兼容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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
解决vue中的无限循环问题
2020/07/27 Javascript
python的unittest测试类代码实例
2017/12/07 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python 同时读取多个文件的例子
2019/07/16 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
大学生就业策划书范文
2014/04/04 职场文书
竞选学委演讲稿
2014/09/13 职场文书
学校食品安全责任书
2015/01/29 职场文书
介绍信如何写
2015/01/31 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
网吧温馨提示
2015/07/17 职场文书
高中化学教学反思
2016/02/22 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs