div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox


Posted in Javascript onAugust 29, 2013

div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox

用marquee实现首尾相连循环滚动效果(仅IE):

<marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100" onmouseover="this.stop();" onmouseout="this.start();"> 
这里是要滚动的内容 
</marquee>

用div+css+javascript实现首尾相连循环滚动效果(兼容firefox):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox</title> 
<style type="text/css"> 
#scrollobj { 
white-space: nowrap; 
overflow: hidden; 
width: 500px; 
} 
</style> 
</head> 
<body> 
<div id="scrollobj" onmouseover="javascript:_stop();" onmouseout="javascript:_start();"> 
这里是要滚动的内容 
</div> 
<script language="javascript" type="text/javascript"> 
<!-- 
function scroll(obj) { /*往左*/ 
var tmp = (obj.scrollLeft)++; 
//当滚动条到达右边顶端时 
if (obj.scrollLeft == tmp) { 
obj.innerHTML += obj.innerHTML; 
} 
//当滚动条滚动了初始内容的宽度时滚动条回到最左端 
if (obj.scrollLeft >= obj.firstChild.offsetWidth) { 
obj.scrollLeft = 0; 
} 
/*往上*/ 
//var tmp = (obj.scrollTop)++; 
//if (obj.scrollTop == tmp) { 
// obj.innerHTML += obj.innerHTML; 
//} 
//if (obj.scrollTop >= obj.firstChild.offsetWidth) { 
// obj.scrollTop = 0; 
//} 
} 
var _timer = setInterval("scroll(document.getElementById('scrollobj'))", 20); 
function _stop() { 
if (_timer != null) { 
clearInterval(_timer); 
} 
} 
function _start() { 
_timer = setInterval("_scroll(document.getElementById('scrollobj'))", 20); 
} 
//--> 
</script> 
</body> 
</html>
Javascript 相关文章推荐
基于jquery的direction图片渐变动画效果
May 24 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
写一个Vue Popup组件
Feb 25 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 #Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 #Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 #Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 #Javascript
js中substring和substr的详细介绍与用法
Aug 29 #Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 #Javascript
JavaScript自定义事件介绍
Aug 29 #Javascript
You might like
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python实现基本进制转换的方法
2015/07/11 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python制作词云的方法
2018/01/03 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
客服主管岗位职责
2013/12/13 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
杨善洲观后感
2015/06/04 职场文书
指导教师推荐意见
2015/06/05 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
Python各协议下socket黏包问题原理
2022/04/12 Python