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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
vue axios整合使用全攻略
May 24 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
JS实现灯泡开关特效
Mar 30 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 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
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
初一科学教学反思
2014/01/27 职场文书
人事科岗位职责范本
2014/03/02 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
保护地球的标语
2014/06/17 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
R9700摩机记
2022/04/05 无线电
Android中的Launch Mode详情
2022/06/05 Java/Android