兼容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 相关文章推荐
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
openlayers实现地图测距测面
Sep 25 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
PHP文件上传实例详解!!!
2007/01/02 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python生成随机图形验证码详解
2017/11/08 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python读取并写入mat文件的方法
2019/07/12 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python类反射机制使用实例解析
2019/12/30 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
护士求职推荐信范文
2013/11/23 职场文书
校园之声广播稿
2014/01/31 职场文书
会计专业自我评价
2014/02/12 职场文书
春秋淹城导游词
2015/02/11 职场文书
研究生个人学年总结
2015/02/14 职场文书
交通安全教育心得体会
2016/01/15 职场文书