div+css+js实现无缝滚动类似marquee无缝滚动兼容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获取随机数和时间转换的简单实例
Win10天气应用设置详细图文教程 Win10显示本地天气方法
Win10系统键盘大小写切换键(Caps Lock)失灵的故障分析及解决方法
C#通用邮件发送类分享
JavaScript基础知识之方法汇总结
android图片压缩的3种方法实例
JavaScript实现向setTimeout执行代码传递参数的方法
Win10 RTM正式版首个候选版Build 10176编译完成
简单掌握Android开发中彩信的发送接收及其附件的处理
jQuery+PHP+MySQL实现无限级联下拉框效果
C++中对象的常引用、动态建立和释放相关知识讲解
Linux系统性能优化的两个重要参数介绍
45个JavaScript编程注意事项、技巧大全
Android中三种注入事件方法比较
快速导航

Copyright © 2016 phpStudy |