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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
简单了解JavaScript异步
May 23 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
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多个字符串替换成同一个的解决方法
2013/06/18 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
JavaScript中的私有成员
2006/09/18 Javascript
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python合并多个装饰器小技巧
2015/04/28 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
人力资源主管岗位职责
2014/01/29 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
教师求职自荐书
2014/06/14 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python