兼容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的版本实现执行不同的代码
May 11 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
微信小程序 form组件详解
Oct 25 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 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
超级简单的发送邮件程序
2006/10/09 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
js资料prototype 属性
2007/03/13 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
python原始套接字编程示例分享
2014/02/21 Python
Python自动扫雷实现方法
2015/07/25 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
Python的in,is和id函数代码实例
2020/04/18 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
2013年入党人员的自我鉴定
2013/10/25 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
成立公司计划书
2014/05/07 职场文书
学校节能减排倡议书
2014/05/16 职场文书
安全月宣传标语
2014/10/07 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
雷峰塔导游词
2015/02/09 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书