jquery 上下无缝滚动

//html结构<div class="bcon"><h1><b>jquery无缝滚动</b></h1><div class="list_lh"><ul><li><p>我是一楼</p></li><li><p>我是二楼</p></li><li><p>我是三楼</p></li><li><p>我是四楼</p></li><li><p>我是五楼</p></li>               </ul></div></div>

//调用jq文件
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/scroll.js"></script> <script> $(function(){ $("div.list_lh").myScroll({ speed:40, //数值越大，速度越慢 rowHeight:44 //li的高度 }); });</script>

//scroll.js

(function($){$.fn.myScroll = function(options){//默认配置var defaults = {speed:40,  //滚动速度,值越大速度越慢rowHeight:24 //每行的高度
    };var opts = $.extend({}, defaults, options),intId = [];function marquee(obj, step){obj.find("ul").animate({marginTop: '-=1'},0,function(){var s = Math.abs(parseInt($(this).css("margin-top")));if(s >= step){$(this).find("li").slice(0, 1).appendTo($(this));$(this).css("margin-top", 0);}});}this.each(function(i){var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);intId[i] = setInterval(function(){if(_this.find("ul").height()<=_this.height()){clearInterval(intId[i]);}else{marquee(_this, sh);}}, speed);_this.hover(function(){clearInterval(intId[i]);},function(){intId[i] = setInterval(function(){if(_this.find("ul").height()<=_this.height()){clearInterval(intId[i]);}else{marquee(_this, sh);}}, speed);});});}
})(jQuery);

转载于:https://www.cnblogs.com/Agrass/p/6595868.html

jquery 上下无缝滚动相关推荐

JQuery的无缝滚动
图片无缝向左滚动的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
jquery 文字无缝滚动
这里作为一个文字无缝滚动,简单js写法记录 html:  <div id="box-move&q ...
jQuery kxbdMarquee 无缝滚动
转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...
化妆品护肤DiY的广告界面简单的jquery 图片无缝滚动
/* ww 图片宽度 id table ID */ 代码应用实例化妆品护肤DiY的广告界面 function moveleft(id,ww) {var stopKey = true;if(ww ...
html自动滚动代码,html文字无缝滚动代码
实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } .s ...
JavaScript----marquee滚动标签图片无缝滚动插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
html纵向字幕无缝滚动,html文字无缝滚动代码
这篇文章主要为大家详细介绍了html文字无缝滚动代码,具有一定的参考价值,可以用来参考一下. 实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体", ...
JQuery控制图片无缝滚动
经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html> ...
html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】
本文实例讲述了jQuery实现的多张图无缝滚动效果.分享给大家供大家参考,具体如下: slider *{ padding: 0; margin: 0; } li{ list-style-type: n ...

jquery 上下无缝滚动

jquery 上下无缝滚动相关推荐

最新文章

热门文章