利用jquery实现向左滚动效果及offset的使用

 

昨天和今天作了一个轮播图，它的tab标签不是1,2,3这样的数据表示，而是使用圆圈表示，效果以下：

 

 

每一个圆中是一个img标签，经过设置src能够指定图片。

点击每一个圆， 下面的图片会向左滚动到对应的位置。

 

今天将记录下图片的滚动效果和箭头随着点击而变化位置的实现。

 

一、jquery实现向左滚动效果

  实现的原理：

< div  id ="outer" >
     < div  id ="inner" >
         < dl >
           //图片列表
         </ dl >
     </ div >
</ div >    

outer的position设置为relative，inner的position设置为absolute,outer有个固定的Width，且设置overflow为hidden，这样就隐藏后面的图片。inner的宽度尽可能设置大一点，能包裹全部的图片。这样，每当点击tab标签即圆圈的时候，经过jquery的动画animate函数设置inner的left便可。

主要的css为：

#outer {
    border:  1px solid #fff;
    width:  100%;
    overflow:  hidden;
    position:  relative;
    height:  230px;
}

#inner{
    width:  40000px;
    position:  absolute;
    overflow:  hidden;
    left:  0;
}

dl{
    width:  100%;
    display:  inline-block;
    text-align:  left;     
}

 

实现滚动效果的js为：

$("#inner").animate({"left":marginLeft+"px"},1000);

 

二、offset的使用

注意到上图的箭头，它会随着点击小圆圈的时候，圆圈慢慢放大后，箭头也会转移到该圆圈的下方，实现的方式就是经过offset来实现的。

首先，箭头是一个img标签，这个img的position为absolute，相对于outer。

而后，当点击圆圈时，会计算圆圈的宽度，圆圈的左偏移量。要想箭头对应正下方，则箭头的左偏移量则为 width/2+offsetLeft.

 

箭头的css:

#outer .arrow{
    position:  absolute;
    left:  50%;
    top:  0px;
    margin-left:  -10px;
    z-index:  1;
}

 

箭头偏移量的设置方法：

// 设置箭头的左偏移量
 setArrowLeft: function(){
     var width =  this.option.cur_wrap_width;
     var offsetWidth = $(".cur_wrap").offset().left;
     var left = width / 2 + offsetWidth;
        $(".arrow").offset({left:left});
}

jquery提供的offset()方法能够获取到left，top的偏移量，同时，也能够经过

offset({left:left,top:top})设置偏移量。