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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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
用PHP读注册表
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python解析树及树的遍历
2016/02/03 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
详解python中的线程与线程池
2019/05/10 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python3远程监控程序的实现方法
2019/07/15 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
通信专业个人自我鉴定
2013/10/21 职场文书
建筑专业自我鉴定
2013/10/22 职场文书
运动会稿件50字
2014/02/17 职场文书
体育活动总结范文
2014/05/04 职场文书
低碳生活的宣传标语
2014/06/23 职场文书