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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
javascript 定义新对象方法
Feb 20 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
vue实现列表垂直无缝滚动
Apr 08 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中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Pycharm远程调试openstack的方法
2017/11/21 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python放大图片和画方格实现算法
2018/03/30 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python带参数打包exe及调用方式
2019/12/21 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
商务日语毕业生自荐信
2013/11/23 职场文书
培训演讲稿范文
2014/01/12 职场文书
医生进修自我鉴定
2014/01/19 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
养成教育主题班会
2015/08/13 职场文书
新教师教学工作总结
2015/08/14 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
新手初学Java List 接口
2021/07/07 Java/Android
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
SQL Server使用导出向导功能
2022/04/08 SQL Server