QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com

我是如何去了解jquery的(七),案例之不间断滚动

我是如何去了解jquery的(七),案例之不间断滚动

作者:田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

最近经常被人打击说我js能力太差,连json格式都不懂,还有问我json是谁提出来的这种问题我也无法解答,好吧,我承认,我很烂,所以我还是孤芳自赏呗,继续我的历程吧,让打击来得更猛烈些吧!草。

本文案例请点击这里!

今天在说到不间断滚动时,先回顾下上一篇最后提出的问题,什么?上一篇有什么问题你不知道,那赶紧去看一下,在《我是如何去了解jquery的(六),案例之幻灯片轮换》里,我有提到说,如果我们希望在幻灯片里加一些动画效果怎么办呢?我说我有做出一个滚动的效果,不知道你有没有在案例demo里看到,在左上角有一个按钮,点击后,会创建一个滚动的轮换效果。请看下图:

这个图片有点糊,将就下吧,但是这个,我们越看就越像今天要讲的内容,因为你如果把容器拉宽一点,就是一个横向的滚动图片了,所以我们看下这个例子是怎么完成了是很有必要的。首先,我点击按钮,克隆了一个与幻灯片一模一样的东东,然后,让里面的内容横向排布,显示隐藏的代码换成动画滚动就完成了,请看下面的代码:

$("#addList").click(addList);
    function addList(){
        var temp=$(".focusPic:eq(0)").clone();
        //$("body").append(temp);
        temp.appendTo("body")
        temp.find(".focus_tab .normal").show();
        temp.css({"overflow":"hidden","margin-left":"350px"});
        temp.find(".focus_tab").css({"position":"relative"})
        temp.find(".focus_tab .normal").css("margin-right","10px");
        var itemWidth=temp.find(".focus_tab .normal").width()+10;
        temp.find(".focus_tab").width(itemWidth*imgCount);    
        var curIndex=0;
        function play(){
            curIndex++;
            if(curIndex>=imgCount){
                curIndex=0;
            }
            temp.find(".sidePic > li:eq("+curIndex+")").click();
        }
        var startIndex=0;
        setInterval(play,2000);
        temp.find(".sidePic li").click(function(){
            $(this).siblings(".on").removeClass("on");
            $(this).addClass("on")
            curIndex=$(this).index();
            var step = startIndex-curIndex;//步长,移动了多少张图片
            console.log(step);
            temp.find(".focus_tab").animate({left:step*itemWidth+"px"},"slow");
        });
    }

这里又多了几个没见过的方法,clone就是复制前面查询出的jquery对象,如果参数是.clone(true),那就会把里面的dom节点的事件方法都复制出来,appendTo是把前面的对象追加到后面的参数对象里面,相反的就是append,他们的区别就是以谁为主,都是追加到尾部里,还有类似的一些方法,如after、before等。相关的可以查阅API了解。然后我计算了每项的宽度,把总宽度赋给了二级容器,这样它们就可以横着摆放了。play方法和前面的幻灯片一样,都是改变的当前索引值,最后的运动是使用的animate,里面的第一个参数是传说中的json格式,这个我也不懂,问淘宝的吧,他们知道json是谁发明的。这里加了一个新的变量startIndex=0;这是二级容器的起始位置,然后计算运动后的偏移量,赋给animate这个方法就行了。第二个参数是时间,还有第三第四个参数,可以看下API。

这样,幻灯片的滚动效果就完成了,你可以点击这里查看效果,记得点击左上角的按钮才会创建。这样,所谓的不间断滚动,就冒似不成问题了,唯一的问题是怎么让它不间断,这里用到比较多的一种解决方案是:复制出多一倍的内容,当第一次滚动完结时跳回起始位置,这样肉眼是看不出来有跳回去的。然后动画,我们也不需要使用animate这个方法了,我们用定时器来完成,只要修改样式的left位置就可以了,记得把二级容器的position改成relative或absolute,这样left才会起作用。最后的代码如下:

 $(function(){
    var itemWidth=$(".focus_tab > .normal").width()+10;
    var sumWidth=itemWidth*$(".focus_tab > .normal").length;
    var temp=$(".focus_tab > div").clone();
    temp.appendTo(".focus_tab");
    $(".focus_tab").width(sumWidth*2);
    var i=0;
    setInterval(play,18);
    function play(){
        //$(".focus_tab").offset({left:i,top:$(".focus_tab").offset().top});
        $(".focus_tab").css("left",i)
        i-=1;
        //if(Math.abs($(".focus_tab").offset().left)>=sumWidth)
        if(Math.abs($(".focus_tab").css("left"))>=sumWidth)
        i=0;
    }
 });

这次代码是不是更少了,这就是不间断滚动了,你可以再给它加个鼠标移上去清除定时器,移出时还原,所以反而我感觉上一节会更复杂些。效果请看下面的gif动画:

QQ截出来的动画也就这个效果了,所以还是看实际页面吧,本文案例请点击这里!如果你有任何的疑问都不要来问我,请重复阅读本文,或加入Q群70210212。

posted @ 2011-11-22 17:18 田想兵 阅读(...) 评论(...) 编辑 收藏
联系QQ:55342775,QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com