<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#b52725;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
.demo{width:600px;margin:20px auto;border:solid 1px #ddd;padding:0 10px;}
.ranklist{height:200px;overflow:hidden;}
.ranklist li{height:16px;line-height:16px;overflow:hidden;position:relative;padding:0 70px 0 30px;margin:0 0 10px 0;}
.ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.ranklist li em{background-position:0 -16px;}
.ranklist li.top em{background-position:0 0;color:#fff;}
.ranklist li .num{position:absolute;right:0;top:0;color:#999;}
</style>
<div class="demo">
<h2>jquery上下无缝滚动插件 列表溢出高度时 自动上下无缝滚动</h2>
<div class="ranklist">
<ul style="margin-top: -22px;">
<li>
<em>09</em><p><a href="http://www.17sucai.com/" target="_blank">FlippingBook电子杂志书去版权,翻页图片全部外调 站长珍藏版</a></p><span class="num">32万下载</span>
</li>
<li>
<em>10</em><p><a href="http://www.17sucai.com/" target="_blank">门户网站jquery广告控制flash或图片顶部广告显示隐藏</a></p><span class="num">32万下载</span>
</li>
<li class="top">
<em>01</em><p><a href="http://www.17sucai.com/" target="_blank">js图片左右无缝滚动用鼠标控制图片滚动</a></p><span class="num">32万下载</span>
</li>
<li class="top">
<em>02</em><p><a href="http://www.17sucai.com/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></p><span class="num">32万下载</span>
</li>
<li class="top">
<em>03</em><p><a href="http://www.17sucai.com/" target="_blank">jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作</a></p><span class="num">32万下载</span>
</li>
<li>
<em>04</em><p><a href="http://www.17sucai.com/" target="_blank">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></p><span class="num">32万下载</span>
</li>
<li>
<em>05</em><p><a href="http://www.17sucai.com/" target="_blank"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></p><span class="num">32万下载</span>
</li>
<li>
<em>06</em><p><a href="http://www.17sucai.com/" target="_blank">jquery hover图片插件制作鼠标滑过标题单个展开图片效果</a></p><span class="num">32万下载</span>
</li>
<li>
<em>07</em><p><a href="http://www.17sucai.com/" target="_blank">flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</a></p><span class="num">32万下载</span>
</li>
<li>
<em>08</em><p><a href="http://www.17sucai.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></p><span class="num">32万下载</span>
</li>
</ul>
</div>
</div>
js代码
(function($){
$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:60, //滚动速度,值越大速度越慢
rowHeight:24 //每行的高度
};
var opts = $.extend({}, defaults, options),intId = [];
var hh = this.find("ul");
var hh2 = this.find("li");
//alert(hh.length);
//alert(hh2.length);
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(){
alert("_this.find('ul').height()======="+_this.find("ul").height());
alert("_this.length ======== "+_this.length);
if( 250 <=_this.height()){
alert(1);
clearInterval(intId[i]);
}else{
alert(2);
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);
$(function(){
$("div.ranklist").myScroll({
speed:80,
rowHeight:24
});
});
相关推荐
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 Marquee 标签,但比 Marquee 更强大。它可以应用于任何 Web 元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、...
jquery图片无缝滚动插件上下左右图片无缝滚动代码
jquery上下滚动插件 控制li上下滚动 ie789 firefox 测试通过
网站中公告上下无缝滚动,marquee,要求每条广告的内容高度一致,如果想改成高度不一致的无缝滚动,联系我,我再发给你,懒得一批。
jquery图片无缝滚动代码左右上下无缝滚动图片
基于jQuery的图片左右无缝滚动插件
jquery文字上下无缝滚动,实现无缝滚动.rar
jquery 图片滚动 xslider 插件制作图片自动左右滚动与上下滚动,这个图片滚动xslider插件不复制整个容器里面的内容,直接用按钮控制滚动,直到滚动图片内容到最后一个,适用在图片展示滚动和新
jQuery全屏页面滚动效果页面上下滚动效果代码jq插件
一个无缝循环滚动插件,基于jQuery实现。。。
jQuery实现网站中公告上下无缝滚动,marquee(每条广告之间的高度无需一致),自己的坑自己来填了,这个和我以前上传的一样,但是广告的每条高度不需要一致,更加灵活
jquery向上无缝滚动单行向上滚动!!!!!!
jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果
imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动。
基于jQuery的上下无缝滚动应用(单行或多行).htm
jQuery Bootstrap响应式新闻列表文字上下滚动特效
jQuery无缝滚动 jQuery 无缝滚动
NULL 博文链接:https://kongxiantao.iteye.com/blog/1140918
jQuery单页全屏滚动插件,支持多种样式,总有一款适合你
应用jquery 实现页面图片的无缝滚动效果,兼容火狐浏览器