兼容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做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
Angularjs实现数组随机排序的方法
Oct 02 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 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获取当前相对于域名目录的方法
2015/06/26 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
js的写法基础分析
2011/01/17 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现一个简单的并查集的示例代码
2018/03/19 Python
python中return的返回和执行实例
2019/12/24 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
python爬取音频下载的示例代码
2020/10/19 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
食堂采购员岗位职责
2014/03/17 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
储备店长岗位职责
2015/04/14 职场文书
2015年端午节活动方案
2015/05/05 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
Linux安装Docker详细教程
2022/07/07 Servers