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，用于事件绑定操作。自动滚动时无须设置。

滚动合集 - www.jb51.net

// 自动滚动
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+=demo2.offsetHeight}
else{demo.scrollTop--}
}
function boxLeft(){
if(demo2.offsetWidth-demo.scrollLeft

div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }

滚动合集

向上








boxmove("a","a1","a2",1);

向右








boxmove("b","b1","b2",2);

向下








boxmove("c","c1","c2",3);

向左








boxmove("d","d1","d2",4);

手动滚动 - 上 下








手动滚动 - 左 右








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

赞 (0)

相关推荐

  • js 实现无缝滚动 兼容IE和FF

    原理解析: 1.首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden: 2.容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果: 3.改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理): 4.到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间

  • JS实现兼容性较好的随屏滚动效果

    JS实现兼容性较好的随屏滚动效果

    本文实例讲述了JS实现兼容性较好的随屏滚动效果.分享给大家供大家参考,具体如下: 代码中的参数解释如下: id 你要滚动的内容的id l 横坐标的位置 不写为紧贴右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定 不写或者0表示滚动. 本代码滚动时不会出现抖动,随着屏幕大小而变动 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-scroll-follow-src-style-codes/ 具体代码如下: <!DOC

  • JS中完美兼容各大浏览器的scrolltop方法

    1.各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  : Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接

  • 关于scrollLeft,scrollTop的浏览器兼容性测试

    今天在修改原群组弹窗的时候,发现弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样.逐一排查,肯定是在计算窗口位置的时候,少加了scrollTop这个值.在查看源代码的时候发现直接采用 document.documentElement.scrollTop这个,但在chrome下这个值为0. 在有文档声明的情况下,也就是第一行有个dtd声明,标准浏览器认识document.documentElement.scrollTop,可chrome竟然不认识这斯.在没有文档声明的情况下,chrome

  • div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

    div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo

  • 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此

  • js 实用的无间断滚动图效果(良好兼容性)

    js 实用的无间断滚动图效果(良好兼容性)

    下面介绍一个方法:基本上实现结构跟行为相分离,两者的联系只需要一个 id就可以,使用起来很方便,而且同一个js代码可以实现在本页面多个滚动图效果,之间互不干扰, 1.xhtml 复制代码 代码如下: <div class="demo" id="demo1"> <table cellpadding="0" cellspacing="0"> <tr> <td><ul> &

  • javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容)

    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 = 选择手

  • 原生js实现中奖信息无间隙滚动效果

    知识要点 1.实现原理:通过定时器不断改变列表的top值.而达到无间隙滚动就要对信息列表复制一份,再判断两个列表的top临界值初始化.最后注意的就是 防止动画积存需要对定时器进行清除. 2.用到的属性方法: setInterval() //每隔一定时间执行一次函数,可以无限执行下去 clearInterval() //清除指定的setInterval setTimeout() //经过一定时间执行一次函数,只能执行一次,如果要无限下去需要在函数里自行设置 clearTimeout() //清除指

  • Discuz 公告效果（自动换行，无间隙滚动）

    ul { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px } #announcement { width:100%; background:url(img/menu_bg.gif) repeat; overflow: hidden; } #announcement div { border: #e6e6e6 1px solid; padding:0px 10px 0

  • JS实现图片无间断滚动代码汇总

    本文整理汇总了JavaScript实现图片滚动的常见代码,可以实现向上下左右四个方向的无缝滚动的效果,这是前端设计开发时常用的一个图片特效,你可只用其中的一种滚动效果. 具体的实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="ht

  • 符合W3C Web标准的图片连续无间隙水平滚动

    这次又遇上一个这样的问题,找了老半天终于从网上找到一个不错的,看了下代码,思路很简单,但代码太多,通用性也不行,于是乎,自己又发明了两个函数,用起来感觉还真不错,与大家共享: 图片连续无间隙向左滚动,无间隙向右滚动,符合W3C Web标准_ //调用向左滚动 toleft("demo","demo1","demo2",30,"hehe123") //调用向右滚动 toright("demo0","

  • javascript 三组文字间隙滚动实例代码

    三组文字间隙滚动 *{font-size:12px;} #scrollBox2{width:150px; height:64px; line-height:22px; overflow:hidden; background-color:#eee;} 国家 汇率名称 今日汇率 美元USD ŀ.775% 港币HKD ŀ.75% 英镑GBP ŀ.50% 欧元EUR ŀ.25% 日元JPY ŀ.01% window.onload=function(){ new Marquee( "scrollBox2&

  • JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)

    **兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动) **实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆, **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置, **因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到"无缝&

  • 无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee

    <!--Quirks Mode--> <!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"> <head> <meta http-equiv=&

  • JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

    JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this

  • Python实现四个经典小游戏合集

    Python实现四个经典小游戏合集

    目录  一.效果展示 1.俄罗斯方块 2.扫雷 3.五子棋 4.贪吃蛇 二.代码展示 1.俄罗斯方块 2.扫雷 3.五子棋 4.贪吃蛇  一.效果展示 1.俄罗斯方块 这个应该是玩起来最最简单的了- 2.扫雷 运气好,点了四下都没踩雷哈哈- 3.五子棋 我是菜鸡,玩不赢电脑人- 4.贪吃蛇 害,这个是最惊心动魄的,为了我的小心脏,不玩了不玩了- 女朋友:你就是借机在玩游戏,逮到了 啊这- 那我不吹牛逼了,我们来敲代码吧~ 二.代码展示 1.俄罗斯方块 方块部分 这部分代码单独保存py文件,这里我

随机推荐