网站制作学习网JS脚本→正文:循环向上滚动代码
字体:

循环向上滚动代码

JS脚本 2015/6/11 19:53:30  点击:不统计

<本文原载于www.forasp.cn>
 在项目中做了个向上滚动的图片代码,可以多个滚动块,自动进行判断。这个代码可以扩展为各个的方向,以及滚动的宽高都可以自定义。这里使用了闭包,使每个滚动块的独立运行,跟互不影响。

 才用jquery 的操作
代码中的图片结构
<div class="over-hide-outer" style="height: 254px; overflow: hidden;position: relative;">
    <div class="up-inner" style="position: absolute; top: 254px;">
<ul class="invest-rec-list clearfix">
<li>内容内容</li>
</ul>
</div>
<div class="up-inner" style="position: absolute; top: 1px;"></div>
</div>
 
以上结构可以多个,并且可以隐藏(因为隐藏的时候获取对应的块的高度为 0)。
 
 $(function(){
$(".over-hide-outer").each(function(){
var obj  = $(this);
obj.run = function(obj){
var obj_one = obj.children().eq(0);
var obj_two = obj.children().eq(1);
var h = obj_one.find('li').eq(0).height();//单个li高度
var t = obj_one.height();//整体层高度
obj_two.css({"top":t+"px"}).append(obj_one.prop('innerHTML'));
//开始写滚动事件。
obj.i = setInterval(function(){
if(obj.parent().is(":hidden"))return;
if(t<=0){//
t = obj_one.height();
h = obj_one.find('li').eq(0).height();
obj_two.css({"top":t+"px"});
}
var one_mt = obj_one.position().top;
var two_mt = obj_two.position().top;
obj_one.animate({"top":(one_mt - h)+"px"},1000,function(){
if(one_mt - h - 10 < -t){//进行交换
obj_one.css({"top":t+"px"});
}
});
obj_two.animate({"top":(two_mt - h)+"px"},1000,function(){
if(two_mt - h -10 < -t){//进行交换
obj_two.css({"top":t+"px"});  
});  
},3000);
obj.mouseover(function(){
if(obj.i)clearInterval(obj.i);
});
obj.mouseout(function(){
obj.i = setInterval(function(){
if(obj.parent().is(":hidden"))return;
if(t<=0){
t = obj_one.height();
h = obj_one.find('li').eq(0).height();
obj_two.css({"top":t+"px"});  
}
var one_mt = obj_one.position().top;
var two_mt = obj_two.position().top;  
obj_one.animate({"top":(one_mt - h)+"px"},1000,function(){
if(one_mt - h - 10 < -t){//进行交换
obj_one.css({"top":t+"px"});
}
});
obj_two.animate({"top":(two_mt - h)+"px"},1000,function(){
if(two_mt - h -10 < -t){ 
obj_two.css({"top":t+"px"});  
});  
},3000)
});
};
obj.run(obj);
});  
});

%77w%77%2E%66%6F%72%61%73%70%2E%63%6E

·上一篇:图片刮刮卡,图片覆盖刮刮卡代码 >>    ·下一篇:script defer和async >>
推荐文章
最新文章