jquery 文字无缝滚动

这里作为一个文字无缝滚动,简单js写法记录

html：

<!-- box-move 滚动的盒子ul1 滚动列表ul2 衔接列表-->
<div id="box-move" style="height: 78px; overflow: hidden;"><ul id="ul1">        <li class="ellipsis"><a href="{$vo.href}" target="_blank"  class="ellipsis" style="display: inline-block;">{$vo.title}</a></li><li class="ellipsis"><a href="{$vo.href}" target="_blank"  class="ellipsis" style="display: inline-block;">{$vo.title}</a></li><li class="ellipsis"><a href="{$vo.href}" target="_blank"  class="ellipsis" style="display: inline-block;">{$vo.title}</a></li><li class="ellipsis"><a href="{$vo.href}" target="_blank"  class="ellipsis" style="display: inline-block;">{$vo.title}</a></li>        </ul><ul id="ul2"></ul>
</div>

js:

//热点新闻无缝滚动
window.onload=function(){//先获取三个元素 var area = $("#box-move"), ul1 = $("#ul1"), ul2 = $("#ul2");area.scrollTop(0);//克隆一个列表ul2，作为衔接滚动；ul2.html(ul1.html()); //按照指定的周期（以毫秒计）来调用函数。var myscroll = setInterval(function(){scroll()}, 50)var top = area.scrollTop();function scroll(){if (area.scrollTop() >= ul1.height()) {top = 0;area.scrollTop(0)}else{             area.scrollTop(top++);}}//鼠标移入清除滚动area.mouseover(function(){clearInterval(myscroll)})//鼠标移出滚动继续area.mouseout(function(){myscroll = setInterval(function(){scroll()}, 50)})}

jquery 文字无缝滚动相关推荐

php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
html自动滚动代码,html文字无缝滚动代码
实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } .s ...
html纵向字幕无缝滚动,html文字无缝滚动代码
这篇文章主要为大家详细介绍了html文字无缝滚动代码,具有一定的参考价值,可以用来参考一下. 实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体", ...
jq文字无缝滚动代码(鼠标悬停停止滚动)
jq实现文字无缝滚动代码(鼠标悬停停止滚动) 效果图直接copy就能运行 <!DOCTYPE html> <html lang="en"> <hea ...
html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
JQuery的无缝滚动
图片无缝向左滚动的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
各种图片、文字无缝滚动
1.文字的无缝向上滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
jquery文字循环滚动播报实现
题引需要实现一个从右往左,文字循环滚动播报的功能工具:jquery 演示地址1(这个慢) 演示地址2(点这个) 思路 <div id="barrageInfo">& ...
vue 文字无缝滚动_手把手教你搭建 Vue 聊天室
WebSocket简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单,并且允许服务端主动向客户端推送数据.(HTTP协 ...

jquery 文字无缝滚动

jquery 文字无缝滚动相关推荐

最新文章

热门文章