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 相关文章推荐
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
兼容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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
PHP中串行化用法示例
2016/11/16 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
英语专业推荐信
2013/11/16 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
制作部班长职位说明书
2014/02/26 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
村党支部书记承诺书
2014/05/29 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
趣味运动会简讯
2015/07/20 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
索尼ICF-5900W收音机测评
2022/04/24 无线电