JS实现类似Marquee的无缝滚动代码
导读:
JS实现内容滚动,而且是无缝的,实现代码如下:
<div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600>
<table align=top>
<tr>
<td id=demo1 valign=top>
<p>三贝计算网1</p>
<p>三贝计算网2</p>
<p>三贝计算网3</p>
<p>三贝计算网4</p>
<p>三贝计算网5</p>
<p>三贝计算网6</p>
</td>
</tr>
<tr>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端
else{
demo.scrollTop++ //如果是横向的 将 所有的 height top 改成 width left
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
</script>
代码分享到这里,感兴趣的朋友,复制到一个HTM的文件即可运行了。
相关推荐
jquery插件Marquee.js实现无缝滚动效果代码分享
本文介绍胃jquery插件Marquee.js实现无缝滚动效果代码。Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果,配制代码如下:{ yScroll: "top" //…
2022-05-22 21:40:09 | 分类:默认 | 作者:myerob | 阅读:154 | 标签:jquery 插件 Marquee.js 实现 无缝 滚动 效果 | 收藏
javascript,JS怎么对url进行编码转换
项目中url遇到传参数传数组对象解析失败问题,采用转码方式解决,但并不清楚实际原理,研究了一下JS转码解码。Javascript语言用于编码的函数,一共有三个。escape()encodeURI()e…
2022-10-29 19:12:36 | 分类:JS | 作者:myerob | 阅读:320 | 标签:escape encodeURI encodeURIComponent | 收藏
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 | 阅读:622 | 标签:PHP json_decode() 报错 json_last_error() 判断错误类型 解决方法 | 收藏
mCustomScrollbar 滚动条使用详解
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A…
2022-12-05 22:29:52 | 分类:JS | 作者:myerob | 阅读:160 | 标签:mCustomScrollbar 滚动条使用详解 | 收藏
- 阅读榜
- 1. U.FL座 IPEX/IPX接头1代,2代,3代,4代,5代区分对照图
- 2. NTC热敏电阻B值3950(温度系数对照表)
- 3. 什么情况下免征教育附加税,地方教育附加税?两附加费优惠政策
- 4. 主席令13届第89号《中华人民共和国印花税法》
- 5. C语言编程中sprintf用法详解
- 6. 网页动态效果wow.min.js使用方法总结
- 7. JS如何判断是否在微信浏览器中打开
- 8. 记录一个非常实用的一键复制前端插件 Clipboard.js
- 9. php页面最大执行时间 set_time_limit函数不起作用
- 10. jquery插件Marquee.js实现无缝滚动效果代码分享