jQuery无缝向上滚动效果

该篇通过js和jquery两种写法来实现内容无缝向上滚动的一个效果，废话不多说，直接上代码

（1）向上滚动

HTML：

 <div id="demo" style="height:110px;overflow:hidden;"><div id="demo1"><ul class="prizelist"><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li><li><span>21:01:03 </span><span>137****6943</span><span> ¥6.06</span></li></ul></div><div id="demo2"><ul class="prizelist"></ul></div></div>

js代码:

  function beginroll() {var speed = 40window.onload = function() {var demo = document.getElementById("demo");var demo2 = document.getElementById("demo2");var demo1 = document.getElementById("demo1");if(demo1.offsetHeight < 110){$("#demo2").hide();demo2.innerHTML = demo1.innerHTML }function Marquee() {if (demo.scrollTop >= demo1.offsetHeight) {demo.scrollTop = 0;} else {demo.scrollTop = demo.scrollTop + 1;}}var MyMar = setInterval(Marquee, speed)demo.onmouseover = function() {clearInterval(MyMar)}demo.onmouseout = function() {MyMar = setInterval(Marquee, speed)}}}beginroll();

jQuery代码：

 $(document).ready(function(){function beginroll(){var speed = 40var demoScrollTop = $("#demo").scrollTop();var demo1OffsetHeight = $("#demo1").height();var demohtml= $("#demo1").html();$("#demo2").html(demohtml);function Marquee() {if (demoScrollTop >= demo1OffsetHeight) {demoScrollTop = 0;} else {demoScrollTop = demoScrollTop + 1;  }$("#demo").scrollTop(demoScrollTop);}var MyMar = setInterval(Marquee, speed);$("#demo").mouseover(function(){clearInterval(MyMar);})$("#demo").mouseout(function(){MyMar = setInterval(Marquee, speed);})}beginroll();})

（2）向左滚动

HTML：

<div id="demoLeft" style="overflow:hidden;width:80%;margin-left:10%;text-align:center;"><table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr><td id="marquePic1"><table width='100%' border='0' cellspacing='0'><tr><td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td><td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td><td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td><td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td><td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td><td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td><td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td><td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td><td><a href='#'><img src="http://www.baidu.com/img/logo.gif"></a></td></tr></table></td><td id="marquePic2" ></td></tr></table></div>

JS代码：

 var speed=50;var demoLeft = document.getElementById("demoLeft");var marquePic2 = document.getElementById("marquePic2");var marquePic1 = document.getElementById("marquePic1");marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demoLeft.scrollLeft>=marquePic1.scrollWidth){
demoLeft.scrollLeft=0
}else{
demoLeft.scrollLeft++
}
}
var MyMar1=setInterval(Marquee,speed)
demoLeft.οnmοuseοver=function() {clearInterval(MyMar1)}
demoLeft.οnmοuseοut=function() {MyMar1=setInterval(Marquee,speed)}

总的来说，这个效果运用的是dom元素的scrollTop与offsetHeight两者之间的联系，运用定时器的操作循环操作从而实现滚动的效果

jQuery无缝向上滚动效果相关推荐

简单的jQuery无缝向上滚动效果
简介这是一个基于 jQuery 的简单的向上滚动效果插件,代码很少,功能也比较单一,可用于文字或图片滚动,鼠标移动到上面会暂停滚动.功能虽然单一,不过一般情况下也够用了,而且还很小巧. 兼容兼容所 ...
原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...
html table表格无缝向上滚动效果,js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
示例演示公告通知标题无缝向上滚动，文字段落无缝向上滚动，简单的wangeditor富文本编辑器，简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...
产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <h ...
vue键盘抬起_vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
最近遇到了之前没有碰到过的一个问题:编辑器输入内容时,最好让内容一直保持在可视区域,比如如果区域超出的话,就在键盘抬起时向上滚动一定距离. 这个和聊天发消息还有一定的区别,聊天的话是只要点开输入框,就 ...
html横向滚动字幕代码,jQuery文字横向滚动效果的实现代码
很多网站都有公告,并且都喜欢用横向滚动的方式来展现.最近自己用jQuery也写了文字横向滚动,实现了自定义滚动速度,鼠标经过时暂停的功能. HTML代码如下: jQuery文字横向滚动jQuery制作 ...
原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...

jQuery无缝向上滚动效果

jQuery无缝向上滚动效果相关推荐

最新文章

热门文章