兼容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中的对象化编程
Jan 16 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
微信小程序实现简单表格
Feb 14 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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
第十一节--重载
2006/11/16 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php使用百度天气接口示例
2014/04/22 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
php新建文件的方法实例
2019/09/26 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JS表的模拟方法
2015/02/05 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
python爬虫---requests库的用法详解
2020/09/28 Python
后勤自我鉴定
2013/10/13 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
销售经理工作职责
2014/02/03 职场文书
合作协议书范本
2014/04/17 职场文书
学习型班组申报材料
2014/05/31 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
教师师德师风整改措施
2014/10/24 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
python神经网络编程之手写数字识别
2021/05/08 Python
MySQL数据库 任意ip连接方法
2022/05/20 MySQL