9

jquery之图片左右切换动画效果

 2 years ago
source link: https://www.zhangxinxu.com/wordpress/2009/08/jquery%e4%b9%8b%e5%9b%be%e7%89%87%e5%b7%a6%e5%8f%b3%e5%88%87%e6%8d%a2%e5%8a%a8%e7%94%bb%e6%95%88%e6%9e%9c/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

jquery之图片左右切换动画效果

这篇文章发布于 2009年08月31日，星期一，01:04，归类于 jQuery相关。 阅读 60391 次, 今日 3 次 13 条评论

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=100

我很喜欢jQuery，因为我发现只要我对css的了解的足够深入，即使我JavaScript不是很在行，一样能做出些不错的动画效果。

这里所要展示的是很常见的一种JavaScript交互效果，点击预览图，可以查看大图，大图和大图之间是以滑动效果进行切换的。一般这种效果实现大致原理是一样的，具体实现可能有差异，如果纯粹的JavaScript写，我估计要整好一会儿，但是使用jQuery，实现这类动画效果就像是踩棉花一样——松松的。

以下就是效果截图：

jQuery图片左右切换动画效果页面截图

效果描述就是：您单击上面的小图，下面的大图就会迅速切换到对应的大图，效果酷就酷在一系列大图整体移动切换。

jQuery代码如下：

$(".pic_small").find("img").click(function(){
    $(".pic_small").find("img").not($(this)).removeClass("current");
    $(this).addClass("current");
    $(this).parent().blur();
    var picNum = parseInt($(this).parent().attr("href").slice(1));
    var movePos = ($('#pic_chg_area li').width()*(-picNum));
    $("#pic_chg_area").animate({left:movePos},500);
});

源文件下载：单击这里（右键另存为就可以了）

您可以狠狠地单击这里：图片滑动切换效果demo

最后还是提一下关键的原理吧：
一个长长的绝对定位层，放了5张大图，但是由于其父<div>宽度定死，且溢出隐藏，所以你只看到父<div>宽度显示的部分。然后通过js控制这个长长的绝对定位层的移动，就可以实现图片左右切换的效果了。至于具体细节，还得由您慢慢体味了！

（本篇完）1f44d.svg 是不是学到了很多？可以分享到微信！
1f44a.svg 有话要说？点击这里。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK