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

更新时间：2013年08月29日 18:02:57 作者：

marquee无缝滚动想必大家都有见过，本文利用div+css+javascript也实现下类似的滚动且兼容firefox，喜欢的朋友可以参考下

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> 

您可能感兴趣的文章:

js图片滚动效果时间可随意设定当鼠标移上去时停止
这篇文章主要介绍了js图片滚动效果时间可随意设定当鼠标移上去时停止，需要的朋友可以参考下
2014-06-06
用js实现拼图小游戏
这篇文章主要为大家详细介绍了用js实现拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
JavaScript常见事件对象与操作实例总结
这篇文章主要介绍了JavaScript常见事件对象与操作,结合实例形式总结分析了javascript针对DOM、IE及跨浏览器事件对象的相关操作技巧,需要的朋友可以参考下
2019-01-01
Javascript里使用Dom操作Xml
Javascript里使用Dom操作Xml...
2007-01-01
javascript面向对象程序设计（一）
这篇文章主要介绍了javascript面向对象程序设计，分享给大家一段代码，注释里讲解的非常详细，有助于我们理解面向对象，这里推荐给大家。
2015-01-01
JS如何实现在弹出窗口中加载页面
这篇文章主要介绍了JS如何实现在弹出窗口中加载页面,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
手把手教你写一个微信小程序（推荐）
最近接了一个微信小程序的项目，项目需求是小程序语音识别，全景图片观看，登录授权，获取个人基本信息。非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-10-10
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
ie6/ie7的兼容问题很让人苦恼，我们可以针对这两个版本的浏览器单独写独立的样式表，来解决兼容问题。这里的例子以判断ie6与ie7来加载不同的样式表
2011-12-12
小程序input数据双向绑定实现方法
这篇文章主要介绍了小程序input数据双向绑定实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
tkinter使用js的canvas实现渐变色
这篇文章主要为大家介绍了tkinter使用canvas实现渐变色，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12