兼容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 相关文章推荐
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
5 cool javascript apps
2007/03/24 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python k-近邻算法实例分享
2014/06/11 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python之py2exe打包工具详解
2017/06/14 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
华为python面试题
2016/05/03 面试题
经理管理专业自荐信范文
2013/12/31 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
委托书样本
2014/04/02 职场文书
项目投资合作意向书
2014/07/29 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
Go timer如何调度
2021/06/09 Golang
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python