兼容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(JS)替换节点实现思路介绍
Apr 17 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
javascrpt密码强度校验函数详解
Mar 18 Javascript
详解JS数组方法
Nov 20 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
php 图片上添加透明度渐变的效果
2009/06/29 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python 批量修改/替换数据的实例
2018/07/25 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python流程控制常用工具详解
2020/02/24 Python
python调用百度API实现人脸识别
2020/11/17 Python
css3学习心得分享
2013/08/19 HTML / CSS
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
计算机本科生自荐信
2013/10/15 职场文书
学校采购员岗位职责
2014/01/02 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
小学后勤管理制度
2014/01/14 职场文书
建筑个人求职信范文
2014/01/25 职场文书
入党推优材料
2014/06/02 职场文书
化学教育专业自荐信
2014/07/04 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
宣传委员竞选稿
2015/11/19 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript