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


Posted in Javascript onJuly 15, 2009

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

<!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> 
<title>滚动</title> 
<script type="text/javascript" src="divCycle.js" src="divCycle.js"></script> 
<style><!-- 
li{ height:20px; mar} 
--></style><style bogus="1">li{ height:20px; mar}</style> 
</head> 
<body> 
<div> 
<ul id="list" style="border:1px #ccc solid; overflow:hidden; height:40px; width:100px; margin:0; padding:0; list-style-type:none;"> 
    <li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
<li>7</li> 
<li>8</li> 
<li>9</li> 
<li>10</li> 
</ul> 
</div> 
<script type="text/javascript"><!-- 
new simpleScroll("list",20,40,1); 
// --></script> 
</body> 
</html>

js源码
// JavaScript Document /***** 
@author leaves chen (leaves615@gmail.com) 
@copyright 2009 
*****/ 
var pause=false; 
var scrollTimeId=null; 
var container=null; 
var lineHeight=null; 
var speed=0; 
var delay=0; 
simpleScroll=function(container1,lineHeight1,speed1,delay1){ 
    container=document.getElementById(container1); 
    lineHeight=lineHeight1; 
    speed=speed1; 
    delay=delay1; 
    //滚动效果 
    scrollexc=function(){ 
        if(pause) return ; 
        container.scrollTop+=2; 
        var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight; 
        if(container.scrollTop%lh<=1){ 
            clearInterval(scrollTimeId); 
            fire(); 
            container.scrollTop=0; 
            setTimeout(start,delay*1000); 
        } 
    }; 
    //开始滚动 
    start=function(){ 
        var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight; 
            if (container.scrollHeight - container.offsetHeight >= lh) 
                scrollTimeId = setInterval(scrollexc, speed); 
    }; 
    //把子节点树中的第一个移动到最后 
    fire=function(){ 
        container.appendChild(container.getElementsByTagName('li')[0]); 
    }; 
    container.onmouseover=function(){pause=true;}; 
    container.onmouseout=function(){pause=false;}; 
    setTimeout(start,delay*1000); 
};

Javascript 相关文章推荐
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 #Javascript
JavaScript 继承详解(四)
Jul 13 #Javascript
JavaScript 继承详解(三)
Jul 13 #Javascript
JavaScript 继承详解(二)
Jul 13 #Javascript
JavaScript 继承详解(一)
Jul 13 #Javascript
javascript dom 操作详解 js加强
Jul 13 #Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 #Javascript
You might like
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
银行职员思想汇报
2013/12/31 职场文书
教师职位说明书
2014/07/29 职场文书
合作协议书范文
2014/08/20 职场文书
社会工作专业自荐信
2014/09/26 职场文书
计生个人工作总结
2015/02/28 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL