首页 / JAVASCRIPT / javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效

javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1060字，纯文字阅读大概需要2分钟。

内容图文

javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效

学习中...本段JS制作参考 MSClass.js

代码如下:

boxmove(d1,d2,d3,e,obj)  
d1 = 外围容器  
d2 = 内容  
d3 = 复制d2的内容接替循环滚动  
e   = 方向与方法  
   1,2,3,4 = 自动滚动，分别对应：上,右,下,左  
   "top","right","bottom","left" = 手动滚动，分别对应：上,右,下,左  
    obj = 选择手动滚动时设置为this，用于事件绑定操作。自动滚动时无须设置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="PRcss,xhtml,html,css,js,book,个人主页,无聊,神经,懒惰" /> 
<meta name="description" content="脚本之家提供精品学习资料" /> 
<meta name="Author" content="PRcss,qq:50198763" /> 
<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" /> 
<title>滚动合集 - www.gxlcms.com</title> 
<script type="text/javascript"> 
// 自动滚动 
function boxmove(d1,d2,d3,e,obj){ 
    var speed=30; 
    var demo=document.getElementById(d1);  
    var demo1=document.getElementById(d2);  
    var demo2=document.getElementById(d3); 
    demo2.innerHTML=demo1.innerHTML; 
    function boxTop(){ 
            if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight} 
            else{demo.scrollTop++} 
        } 
    function boxRight(){ 
            if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth} 
            else{demo.scrollLeft--} 
        } 
    function boxBottom(){  
            if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight} 
            else{demo.scrollTop--} 
        } 
    function boxLeft(){ 
            if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth} 
            else{demo.scrollLeft++} 
        } 
    if(e==1){ 
            var MoveTop=setInterval(boxTop,speed); 
            demo.onmouseover=function(){clearInterval(MoveTop);} 
            demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)} 
        } 
    if(e==2){ 
            var MoveRight=setInterval(boxRight,speed); 
            demo.onmouseover=function(){clearInterval(MoveRight)} 
            demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)} 
        } 
    if(e==3){ 
            var MoveBottom=setInterval(boxBottom,speed); 
            demo.onmouseover=function(){clearInterval(MoveBottom);} 
            demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)} 
        } 
    if(e==4){ 
            var MoveLeft=setInterval(boxLeft,speed) 
            demo.onmouseover=function(){clearInterval(MoveLeft)} 
            demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)} 
        } 
    if(e=="top"){ 
            MoveTop=setInterval(boxTop,speed) 
            obj.onmouseout=function(){clearInterval(MoveTop);} 
        } 
    if(e=="right"){ 
            MoveRight=setInterval(boxRight,speed) 
            obj.onmouseout=function(){clearInterval(MoveRight);} 
        } 
    if(e=="bottom"){ 
            MoveBottom=setInterval(boxBottom,speed) 
            obj.onmouseout=function(){clearInterval(MoveBottom);} 
        } 
    if(e=="left"){ 
            MoveLeft=setInterval(boxLeft,speed) 
            obj.onmouseout=function(){clearInterval(MoveLeft);} 
        } 
    }     
</ script> 
<style type="text/css"> 
div#a,div#b,div#c,div#d { float:left;} 
h2 { clear:both; } 
div#b,div#d,div#bb { white-space:nowrap; } 
</style> 
</head> 
<body> 
<h2>滚动合集</h2> 
<hr />

<h2>向上</h2> 
<div id="a" style="overflow:hidden;height:100px;width:90px;">  
<div id="a1">  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />   
</div>  
<div id="a2"></div> 
</div>  
<script type="text/javascript"> 
boxmove("a","a1","a2",1); 
</ script>

<h2>向右</h2> 
<div id="b" style="overflow:hidden;height:100px;width:90px;">  
<div id="b1"> 
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />   
</div>  
<div id="b2"></div> 
</div>  
<script type="text/javascript"> 
boxmove("b","b1","b2",2); 
</ script>

<h2>向下</h2> 
<div id="c" style="overflow:hidden;height:100px;width:90px;">  
<div id="c1">  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />   
</div>  
<div id="c2"></div> 
</div>  
<script type="text/javascript"> 
boxmove("c","c1","c2",3); 
</ script>

<h2>向左</h2> 
<div id="d" style="overflow:hidden;height:100px;width:90px;">  
<div id="d1">  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />  
<img src="http://www.gxlcms.com/images/logo.gif" alt="" />   
</div>  
<div id="d2"></div> 
</div>  
<script type="text/javascript"> 
boxmove("d","d1","d2",4); 
</ script>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效全部内容，希望文章能够帮你解决javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/307492.html

来源：【匿名】

【上一篇】javascript图片渐显效果代码_图象特效【下一篇】javascript 怎么调用php方法

更多 ►

【javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效】教程文章相关的互联网学习教程文章

JavaScript无提示关闭当前页面窗口，兼容IE/Firefox/Chrome【代码】

JS与IE/Firefox兼容性汇总

以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox1. document.form.item 问题 (1)现有问题：现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行 (2)解决方法：改用 document.formName.elements["elementName"] (3)其它参见 22. 集合类对象问题 (1)现有问题：现有代码中许多集合类对象取用时使用 ()，IE 能接受，...

如果路径中有查询字符串,Firefox是否会缓存javascript并在没有请求的情况下使用它？【代码】

我想要做的是在javascript路径的末尾添加一个查询字符串,以便每当我的应用程序更新到新版本时,都会下载javascript.但是,只要查询字符串相同,我希望它继续使用缓存版本而不执行http请求来检查脚本是否已更改. 我在PHP中完成此操作的方法是从CVS标记中读取.当我构建HTML输出时,我读取CVS标记并使用它附加到javascript路径的末尾,以便它创建一个如下所示的脚本标记：<script src="javascript/messages/shipments.js?TPRSAPPS-DEV2_090...

javascript – 在Firefox中绕过浏览器缓存？【代码】

考虑以下html页面,它可以加载许多大型png文件：<html> <head> <script type="text/javascript">function hide( ) { document.getElementById("here").innerHTML = "hidden"; } function show( ) { var loadMe = "";for (var i=1; i<250; i++){ loadMe += "<img src='http://domain.com/" + i + "_a.png'><br>";loadMe += "<img src='http://domain.com/" + i + "_b.png'><br>";}document.getElementById("here").innerHT...

Javascript-Web Audio API：使用媒体流时,firefox中的FFT数据与Chrome中的FFT数据不同？

我正在尝试对使用Web音频API从麦克风获得的数据进行频率分析.我需要实时数据(尽可能多地获取1024个样本的窗口大小). 我正在使用createMediaStreamSource作为源节点.我已使用getByteFrequencyData方法(样本大小= 1024)使用了来自Analyzer节点的FFT数据. 来自FFT阵列的数据在chrome和firefox中是完全不同的(在firefox中,频谱始终较小(矢量尺寸较小),值较小(较低值),与Chrome相比,Chrome与其他FFT算法相比似乎还可以例如在Audacity).即...

jquery.AutoComplete.js中文修正版(支持firefox)_jquery

代码如下:jQuery.autocomplete = function(input, options) { // Create a link to self var me = this; // Create jQuery object for input element var $input = $(input).attr("autocomplete", "off"); // Apply inputClass if necessary if (options.inputClass) $input.addClass(options.inputClass); // Create results var results = document.createElement("div"); // Create jQuery object for results var $results = $...

javascript – 为什么Chrome和FireFox控制台打印未定义？【代码】

拿这个简单的Test对象并将其粘贴到控制台中,你会看到它显示为undefined.该对象正在工作,因为它也打印123,但未定义的是什么. 测试：var Test = new (function(){return {get testing(){return "123";}} });console.log(Test.testing);控制台输出：123 undefined解决方法:这是console.log的返回值. 尝试console.log(1);这使1 undefined但是,如果你输入的话Test.testing只给出了"123"

jquery load()在firefox(火狐)下显示不正常的解决方法

代码如下:<html> <head> <script type="text/javascript" src="jquery-1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b01").click(function(){ $(#myDiv).load(http://www.baidu.com); }); }); </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button id="b01" type="button">Change Content</button> </body> </html> 把 http://www.baidu.co...

FireFox浏览器使用Javascript上传大文件_PHP教程

本程序是利用3.x的Firefox浏览器可以读取本地文件的特性，实现通过xmlHttPRequest上传大文件功能，并在可以上传过程中动态显示上传进度。略加修改，并与服务器端配合，可以实现断点续传等诸多功能。本例主要是研究FireFox的file-input节点的一些特性，其他客户端应用，如Flash、Sliverlight等，在实现客户端大文件上传时，在数据传输与服务器端存储等方面，与本例的思路基本一致。注意：文件体积似乎有临界点，但这个临界点是多少尚...

一个JS在IE和FireFox中执行效果,该怎么处理

一个JS在IE和FireFox中执行效果怪！JS在FireFox执行对，在IE执行错我有一个节目的分类，在页面中循环取出，循环大致如下： while($Sort = $db->db_fetch_array()){ echo "" . "". "".$Sort["SORT_NAME"]". "" . ""; }?>点击分类，将选中分类的背景色调整为#E9F4FC，未选中的为无色，以JS实现JS如下：该功能在FireFox下正常执行，但在IE6下，在JS中alert(sort.length);每次得到都是0，...

FireFox浏览器使用Javascript上传大文件_php实例

javascript-firefoxdeveloperedition官网下载不了

firefox developer edition 官网下载不了https://www.mozilla.org/zh-CN/firefox/channel/#developer 无论是中文还是英文，全都不行，复制地址用迅雷也下不了，没资源搜种子也搜不到求大神解决回复内容：firefox developer edition 官网下载不了https://www.mozilla.org/zh-CN/firefox/channel/#developer 无论是中文还是英文，全都不行，复制地址用迅雷也下不了，没资源搜种子也搜不到求大神解决我试了下载是OK的啊： windows: ht...

FireFox浏览器使用Javascript上传大文件_PHP

FireFox浏览器使用Javascript上传大文件

使用ChromeFirefox自带调试工具调试javascript的9种技巧【图】

我们调试Javascript一般会用到Chrome或Firefox自带的调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们，让我们花更少的时间来解决错误和bug，从而提高开发效率。本文主要介绍了9种使用Chrome Firefox 自带网页调试工具调试javascript技巧，希望能帮助到大家。1. debugger除了console.log, debugger是我们最喜欢、快速的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。...

首页 / JAVASCRIPT / javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效

javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)_典型特效】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

FIREFOX - 相关标签

IE - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程