码迷,mamicode.com
首页 > Web开发 > 详细

jQuery插件--图片文字向上向左循环滚动

时间:2015-07-24 17:36:37      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:

需要引用jquery

 

调用非常简单:

一、 向上滚动

 $(".scroll_two").jScroll({vertical: true});    

<div class="box scroll_two">
    <ul>
        <li><a href="#">声明</a>| <a href="#">农夫山泉关于公益捐赠的严正声明</a></li>
        <li><a href="#">新车</a>| <a href="#">外观媲美轿车 全新一代奥德赛9月初亮相</a></li>
        <li><a href="#">活动</a>| <a href="#">开启燕京啤酒清爽之旅,赢取万元单反相机</a></li>
        <li><a href="#">探密</a>| <a href="#">亲历探寻长寿村莫斯利安的神奇之旅</a></li>
        <li><a href="#">中房</a>| <a href="#">2009CIHAF第十一届中国住交会</a></li>
        <li><a href="#">惠普</a>| <a href="#">你的打印机能省50%打印成本吗?</a></li>
    </ul>
</div>

 

二、向左翻屏

$(".scroll_three").jScroll({speed: 2000, scroll: 3}); 

<div class="box scroll_three">
	<ul>
		<li><a href="#"><img src="images/1.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/2.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/3.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/4.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/5.jpg" width="130" height="107"  /></a></li>
		<li><a href="#"><img src="images/6.jpg" width="130" height="107"  /></a></li>
	</ul>
</div>

  

源码如下:

;(function($){
$.fn.extend({
"jScroll":function(o){
o = $.extend({
auto: 3000, //延迟时间(毫秒)
speed: 800, //单次滚动时长(毫秒)
vertical: false, //是否向上滚动(默认向左)
scroll: 1 //每次滚动的元素数量
},o);
var running = false, sizeCss = o.vertical ? "height" : "width", ulSize = 0;
var scrollTimer, scrollLen, itemSize, animCss, i;
var div = $(this), ul = div.find("ul"), li = ul.children("li");

div.css({overflow: "hidden"});
ul.css({margin: "0", padding: "0", display: "inline-block"});
li.css({"list-style-type": "none", float: o.vertical ? "none" : "left"});

//获取LI元素总宽(高)
for(i=0; i<=li.size()-1; i++){
itemSize = o.vertical ? li.eq(i).outerHeight() : li.eq(i).outerWidth();
ulSize+=itemSize;
}
var divSize = o.vertical ? div.height() : div.width(); //容器宽(高)
ul.css(sizeCss, (ulSize*2)+"px");
if(ulSize > divSize) running = true; //UL的宽(高)大于容的器宽(高)时才滚动

div.hover(function(){
clearInterval(scrollTimer);
},function(){
if(running){
scrollTimer = setInterval(function(){
scrollLen = 0;
itemSize = 0;
li = ul.children("li");
for(i=0; i<=o.scroll-1; i++){
itemSize = o.vertical ? li.eq(i).outerHeight() : li.eq(i).outerWidth();
scrollLen+=itemSize;
}
animCss = o.vertical ? {marginTop:-scrollLen +"px"} : {marginLeft:-scrollLen +"px"};
ul.animate(animCss, o.speed, function(){
ul.css(o.vertical ? "margin-top" : "margin-left", "0");
li.slice(0,o.scroll).appendTo(ul); //将前面的元素移至末尾
})
}, parseInt(o.auto+o.speed));
}
}).trigger("mouseleave"); //DOM加载完毕后自动执行hover(fn1, fn2)的fn2
}
});
})(jQuery);

 

下载例子

jQuery插件--图片文字向上向左循环滚动

标签:

原文地址:http://www.cnblogs.com/event/p/4673682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!