兼容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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
js宝典学习笔记(上)
Jan 10 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Vue.js表单控件实践
Oct 27 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 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读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP错误机制知识汇总
2016/03/24 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
Python实现包含min函数的栈
2016/04/29 Python
django中的setting最佳配置小结
2017/11/21 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
基于python实现从尾到头打印链表
2019/11/02 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
财务人员的自我评价范文
2014/03/03 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
开票证明
2015/06/23 职场文书
八一建军节主持词
2015/07/01 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python