兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码


Posted in Javascript onApril 19, 2013

html里的marqueen也能实现内容的滚动,但滚动是间断的,在滚动一个周期中,会有一段空白出现。如果滚动的区域比较大,空间的出现,会让页面看起来很不美观。运用JavaScript可以使这一问题得到改观,实现无间断的滚动。

上下循环滚动代码

<div id="demo" onmouseover="clearInterval(inter)" onmouseout="inter=setInterval(qswhMarquee,30)" style="overflow:hidden; height:60px"> 
<div id="demo1"> 
111111111111111<br> 
222222222222222<br> 
333333333333333<br> 
444444444444444<br> 
555555555555555 
</div> 
<div id="demo2"></div> 
</div> 
<script> 
var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show"); 
var inter; 
t2.innerHTML=t1.innerHTML; 
function qswhMarquee(){ 
if(t2.offsetTop<=t.scrollTop) 
t.scrollTop-=t1.offsetHeight; 
else 
t.scrollTop++; 
} 
inter=setInterval(qswhMarquee,30); 
function getid(id){ 
return document.getElementById(id); 
} 
</script>

文字左右循环滚动代码
<style type="text/css" media="all"> 
.d1{ 
margin:10px auto; 
width:200px; 
background-color:#CCCCCC; 
height:20px; 
overflow:hidden; 
white-space:nowrap; 
} 
.d2{ 
margin:0px auto; 
background-color:#FF9933; 
} 
.div2{ 
width:auto; 
height:20px; 
font-size:12px; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
var s,s2,s3,s4,timer,i=0; 
function init(){ 
s=getid("div1"); 
s2=getid("div2"); 
s3=getid("div3"); 
s4=getid("div4"); 
s4.innerHTML=s3.innerHTML; 
s2.style.width=s.offsetWidth+"px"; 
s2.style.height=s.offsetHeight+"px"; 
timer=setInterval(mar,30) 
} 
function mar(){ 
//s2.innerHTML=s.scrollLeft; 
if(s3.offsetWidth<=s.scrollLeft){ 
s.scrollLeft-=s3.offsetWidth; 
}else{s.scrollLeft++;} 
} 
function getid(id){ 
return document.getElementById(id); 
} 
window.onload=init; 
</script> 
<div class="d1" id="div1"> 
<span class="div2" id="div3"> 余志国网站设计工作室提供专业的外贸网站建站服务。</span> 
<span id="div4" class="div2"></span> 
</div> 
<div class="d2" id="div2"></div>
Javascript 相关文章推荐
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 #Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 #Javascript
jQuery阻止同类型事件小结
Apr 19 #Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 #Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 #Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 #Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 #Javascript
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
php学习之流程控制实现代码
2011/06/09 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
JS实现简易日历效果
2021/01/25 Javascript
动态创建类实例代码
2009/10/07 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python单例模式的两种实现方法
2017/08/14 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
对python中的装包与解包实例详解
2019/08/24 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python中_del_还原数据的方法
2020/12/09 Python
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
应届生体育教师自荐信
2013/10/03 职场文书
书法培训心得体会
2014/01/05 职场文书
信息技术课后反思
2014/04/27 职场文书
詹天佑教学反思
2014/04/30 职场文书
广播体操比赛口号
2014/06/10 职场文书
销售经理工作检讨书
2015/02/19 职场文书
2014年个人年终总结
2015/03/09 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript