兼容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 相关文章推荐
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
iscroll.js滚动加载实例详解
Jul 18 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
VSCode launch.json配置详细教程
Jun 18 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
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
详解Django中的过滤器
2015/07/16 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
北京SQL新华信咨询
2016/09/30 面试题
微型企业创业投资计划书
2014/01/10 职场文书
高中政治教学反思
2014/01/18 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
就业表自我评价分享
2014/02/06 职场文书
清扬洗发水广告词
2014/03/14 职场文书
大学新生入学教育方案
2014/05/16 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
业务员辞职信范文
2015/03/02 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
矛盾论读书笔记
2015/06/29 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Elasticsearch 索引操作和增删改查
2022/04/19 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python