兼容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 Button使用实例
Apr 14 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
原生JS实现不断变化的标签
May 22 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python编码类型转换方法详解
2016/07/01 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
小学教师岗位职责
2013/11/25 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
公司联欢会策划方案
2014/05/19 职场文书
安全宣传标语
2014/06/10 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
布达拉宫的导游词
2015/02/02 职场文书