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>
相关推荐
jquery插件Marquee.js实现无缝滚动效果代码分享
本文介绍胃jquery插件Marquee.js实现无缝滚动效果代码。Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果,配制代码如下:{ yScroll: "top" //…
2022-05-22 21:40:09 | 分类:默认 | 作者:myerob | 阅读:265 | 标签:jquery 插件 Marquee.js 实现 无缝 滚动 效果 | 收藏
javascript,JS怎么对url进行编码转换
项目中url遇到传参数传数组对象解析失败问题,采用转码方式解决,但并不清楚实际原理,研究了一下JS转码解码。Javascript语言用于编码的函数,一共有三个。escape()encodeURI()e…
2022-10-29 19:12:36 | 分类:JS | 作者:myerob | 阅读:389 | 标签:escape encodeURI encodeURIComponent | 收藏
滚动条插件 NiceScroll 使用详解
有时为了保持页面风格的统一,我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式,但这种方式不支持老版本的浏览器。而且不同的浏览器下,CSS 滚动条属性的写法也不一样,如果各…
2022-12-05 22:23:19 | 分类:JS | 作者:myerob | 阅读:480 | 标签:滚动条插件 NiceScroll 使用详解 | 收藏
mCustomScrollbar 滚动条使用详解
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A…
2022-12-05 22:29:52 | 分类:JS | 作者:myerob | 阅读:199 | 标签:mCustomScrollbar 滚动条使用详解 | 收藏
- 阅读榜
- 1. 什么情况下免征教育附加税,地方教育附加税?两附加费优惠政策
- 2. 概率统计学中95%置信区间的系数1.96怎么得到的?
- 3. NTC热敏电阻B值3950(温度系数对照表)
- 4. 个人所得税申报系统(扣缴端)如何删除已离职人员信息
- 5. cdr怎么画环形阵列,cdr阵列复制快捷键
- 6. 快速开发CSS的利器——less的基本用法
- 7. 离职员工申报个税删不掉 显示存在收入明细,若该人员已离职或退休,请将人员状态改为非正常。可改为非正常后还是不行
- 8. Win10: WMI Provider Host 占用CPU过高解决方案
- 9. 采购和销售都要交印花税吗?哪些合同需要交印花税?
- 10. 什么是热电阻两线制、三线制、四线制接线?接法原理总结