兼容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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
js制作提示框插件
Dec 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
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python实现图像的垂直投影示例
2020/01/17 Python
python add_argument()用法解析
2020/01/29 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
求职简历自荐信
2013/10/20 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
女性健康讲座主持词
2015/07/04 职场文书
创业计划书之书店
2019/09/10 职场文书