div+css+js实现类似marquee的无缝滚动代码示例
导读:
程序圈朋友,marquee无缝滚动想必大家都有见过,本文介绍了div+css+js,实现下类似的滚动且兼容firefox,喜欢的朋友加收藏。
用marquee实现首尾相连循环滚动效果代码:
<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+js实现首尾相连循环滚动效果代码:
<!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>
相关推荐
PHP json_decode()报错 json_last_error()判断错误类型及解决方法
PHP json_decode()报错 json_last_error()判断错误类型 解决背景:最近在用curl请求接口获取json数据串的时候,一直出现PHP中json_decode()解析字符串…
2022-10-29 21:45:57 | 分类:PHP | 作者:myerob | 阅读:719 | 标签:PHP json_decode() 报错 json_last_error() 判断错误类型 解决方法 | 收藏
jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明
nicescroll是一款基于jQuery的滚动条插件,使用简单,功能强大,较mCustomScrollbar而言:资源文件少,只要一个jquery.nicescroll.min.js即可,无须css…
2022-12-05 22:16:17 | 分类:JS | 作者:myerob | 阅读:290 | 标签:jQuery nicescroll | 收藏
mCustomScrollbar 滚动条使用详解
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A…
2022-12-05 22:29:52 | 分类:JS | 作者:myerob | 阅读:199 | 标签:mCustomScrollbar 滚动条使用详解 | 收藏
- 阅读榜
- 1. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 2. 什么情况下免征教育附加税,地方教育附加税?两附加费优惠政策
- 3. 增值税已交税金和未交税金的区别是什么?
- 4. 主席令13届第89号《中华人民共和国印花税法》
- 5. 什么是热电阻两线制、三线制、四线制接线?接法原理总结
- 6. LCEDA如何将两块不同的PCB拼到一块板上,PCB拼板教程
- 7. BCD码的定义以及其与十进制数据转换方法(附验证工具)
- 8. 记录一个非常实用的前端拖拽插件interact.js(JS前端开发)
- 9. Win10: WMI Provider Host 占用CPU过高解决方案
- 10. 概率统计学中95%置信区间的系数1.96怎么得到的?