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 | 阅读:613 | 标签:PHP json_decode() 报错 json_last_error() 判断错误类型 解决方法 | 收藏
CSS中设置height:100%无效的原因分析和解决方法
我们知道在把盒子宽度自适应为浏览器窗口宽度,只需设置width:100%就可轻松解决问题,但是让盒子的高度自适应浏览窗口的高度并非那么容易,下面举个例子:代码如下:<!-- 高度实际为字体大小 …
2022-10-30 12:24:34 | 分类:HTML,CSS | 作者:myerob | 阅读:1857 | 标签:CSS 设置 height:100% 无效 原因分析 解决方法 | 收藏
滚动条插件 NiceScroll 使用详解
有时为了保持页面风格的统一,我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式,但这种方式不支持老版本的浏览器。而且不同的浏览器下,CSS 滚动条属性的写法也不一样,如果各…
2022-12-05 22:23:19 | 分类:JS | 作者:myerob | 阅读:355 | 标签:滚动条插件 NiceScroll 使用详解 | 收藏
mCustomScrollbar 滚动条使用详解
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A…
2022-12-05 22:29:52 | 分类:JS | 作者:myerob | 阅读:151 | 标签:mCustomScrollbar 滚动条使用详解 | 收藏
- 阅读榜
- 1. 概率统计学中95%置信区间的系数1.96怎么得到的?
- 2. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 3. h3c交换机乱码怎么弄(h3c 配置备份报错)如何修改交换机字符集?
- 4. 预缴税款,预缴增值税怎么做分录,记账步骤
- 5. 关于修改《中华人民共和国发票管理办法实施细则》的决定
- 6. 什么情况下免征教育附加税,地方教育附加税?两附加费优惠政策
- 7. ipex1代与4代差别
- 8. linux主机ssh命令来查看某一端口是否开放
- 9. HTTP请求方法对照表(HTTP Request Method)
- 10. mCustomScrollbar 滚动条使用详解