兼容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 Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python append、extend与insert的区别
2016/10/13 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
python3判断url链接是否为404的方法
2018/08/10 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
公司薪酬管理制度
2014/01/31 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
nginx请求限制配置方法
2021/07/09 Servers