DEMO 说明:
图片横向滑动切换的原理很简单,就是当前被选中的图片,或者当前鼠标划入的图片宽度变大,
图片横向滑动切换的原理很简单,就是当前被选中的图片,
假如我们有11张图片,图片容器宽度一共为 960 px ,则每个图片宽度为 960/11 px ,
图片打开状态宽度为 160 px,那么其他图片就要变成 (960-160)/10 px 基于这个公式,
再结合jQuery的 animate 方法对样式的控制,我们就可以模拟这个效果。
再结合jQuery的 animate 方法对样式的控制,我们就可以模拟这个效果。
这个动画的原理很简单,但是在实现的过程中有几个需要注意的问题。
1,样式上:
由于图片要始终位于中间位置,所以我们把图片作为背景图片,这样做的好处有2。
第一,根据容器大小的变换显示图片区域大小 ,就模拟了Flash 遮罩的效果;
第二,用 background:url(../images/0.jpg) center top no-repeat; 可以使得图片始终在容器中间位置显示。
由于图片要始终位于中间位置,所以我们把图片作为背景图片,
第一,根据容器大小的变换显示图片区域大小 ,就模拟了Flash 遮罩的效果;
第二,用 background:url(../
由于图片容器是浮动的,所以我们必须保证图片们不能换行,在本例中,
我采用了这样的DOM结构 :
我采用了这样的DOM结构 :
<div class="picon" id="picon">
<ul>
<li class="pic1"> <!--背景是pic1.jpg的 li--> </li>
<li class="pic2"> <!--背景是pic2.jpg的 li--> </li>
.....
</ul>
</div>
样式:
.picon{ clear:both; height:400px; overflow:hidden; background:#000; position:relative;}
.picon ul{ position:absolute; top:0; left:0; height:400px; 1000px;} /*大于外层容器宽度 预留安全空间*/
.picon li{ float:left; height:400px; border-right:1px solid #fff; 79px; position:relative;}
2,在脚本方面的技巧
第一:在算图片的尺寸的时候要取整 ,var avgw= parseInt((960-maxw-2)/11);
我们并不需要带小数的像素值。
|
第一:在算图片的尺寸的时候要取整 ,var avgw= parseInt((960-maxw-2)/11);
我们并不需要带小数的像素值。
|
第二:就是延时执行,也就是鼠标移入一个图片的时候,不立即执行,要延时一段时间,
如果立即执行则鼠标在经过的途中会划过N多的图片,每个都会触发动作,就导致
图片挨个执行自己的动画,这样就导致运行缓慢系统负担严重,而且我们并不想
触发那些动作。
比如 我们把动作设置成一个函数
var act=function (){
//code goes here;
}
那么我们采用如下方式
$("#picon").find("li").mouseover(
function(){
t=setTimeout(act,200);
}
)
这样就避免了鼠标快速划过触发的动作,别忘了在离开的时候 还要
if(t){
clearTimeout(t);
}
来取消延时。
来取消延时。
PS:在实现的过程中我还试图采用表格的结构,
每个容器的宽度,结果是在IE中运行可以,但是在Firefox等其他现代浏览器中出现反复跳
动的现象。所以最后还是采取了脚本计算分配宽度的做法。