jQuery制作图片旋转效果

以前用JQuery写深度方向的图片旋转效果。我在这里和大家分享一下，贴个图看看效果如何：

它的实现原理并不复杂，数学上只用到了正弦函数，制作过程大致如下：

(1)首先定义图像旋转的半径

(2)在图像旋转的过程中，需要使用setInterval()方法来获取每个图像所在位置的角度，角度会随着时间的变化而逐渐变化

(3)根据数学公式：x=R*SIN(deg)，可以得到图片在x方向的位置

(4)透明度的设置实际上是根据图片旋转时的角度来决定的。最初，图片在正前方时设置为0度，无论是顺时针还是逆时针旋转，当图片旋转角度大于0度时，

画面透明度小于180度时逐渐降低。这里增加了一个小的计算公式，使图片在180度时不完全透明，代码如下图所示。

(5)图像缩放也是根据图像旋转角度来确定的，相信很容易理解。

(6)有了图片的X轴位置信息、缩放信息和透明度信息，用CSS样式显示所有信息就非常简单了。

css的风格会通过setInterval()方法逐渐改变。

让我们看看主要代码：

var this left=-(o . radius)* math . sin((360/imgnum)* $(this)。数据('索引')*(数学。PI * 2/360))(holder width/2)；var thiszindex=360/imgnum * $(this)。数据('索引')180？360/imgnum*$(这个)。数据(' index ')-360:-360/imgnum * $(this)。数据('索引')；var this opacity=360/imgnum * $(this)。数据('索引')=180？(180-360/imgnum*$(本)。数据(' index ')/180 * 1.2:(360/imgnum * $(this)。数据('索引')-180)/180 * 1.2；第二行的这个zindex是图片的深度信息。我给每张图片添加了一个索引属性，保存它的索引值，图片会根据这个信息计算出相应的深度值。

第三行的不透明度是图片的透明度信息。

每张图片都将被赋予CSS样式：

$(这个)。CSS({ ' left ' : this left-(o . width * this opacity)/2 ' px '，' top ' :(holder heat/2)-o . width *(this opacity 1)/4，' z-index':thiszindex 180，'不透明度' :(thisopacity 0.2)/1.2，' width ' : o . width *(this opacity 1)/2，' height ' : o . height *(this opacity 1)/2 })；第五行中的不透明度使用了一个简单的公式，使其在最深处不完全透明。

功能方面，我增加了左右转动的功能。原理是转换图片X轴信息的正负值。代码如下：

if(dir==' left '){ this left=-(o . radius)* Math . sin(xx *(Math)。PI * 2/360))(holder width/2)；} else { this left=(o . radius)* Math . sin(xx *(Math)。PI * 2/360))(holder width/2)；}用户可以自定义整个效果中的参数：

$ . fn . scroll 3d . defaults={ speed :25，radius :100，width :200，height :150，direction :' left'}效果完整代码附后如下：

（函数($) { $.fn.scroll3d=函数（选项){ var opts=$ .extend({}，$.fn.scroll3d.defaults，options)；var $ this=$(this)；var o=$ .梅塔。$.extend({}，opts，$(this).data()): opts；定义变量半径=o半径；定义变量定时器=0;var xx=0；变化速度=0 .速度；var dir=o.direction$(这个)。hide()；返回这个。每个(函数(){ var $ img=$(this)).查找(' img ').CSS({ ' position ' : ' absolute ' })，num=0；var imgnum=$ img . length var holder width=$(this).宽度()，持有人权利=$(本).高度();$img。每个（函数(i) { var imgsrc=$(this).attr(' src ')；$(这个)。数据({ ' index ' : I })；$(这个)。load(function(){ num；if(num==imgnum){ $ this。show()；} }).attr({ ' src ' : img src })；var这个左=-(o .半径)*数学。sin((360/imgnum)* $(本).数据('索引')*(数学* 2/360))(支架宽度/2)；var thiszindex=360/imgnum * $(this).数据('索引')180?360/imgnum * $(这个)。数据('索引)- 360 : -360/imgnum * $(此处)。数据('索引');var这个不透明度=360/imgnum * $(这个).数据('索引')=180?(180 - 360/imgnum * $(本)。数据(' index ')/180 * 1.2 :(360/imgnum * $(this).数据('索引')-180)/180 * 1.2;$(这个)。attr({ ' now deg ' :(360/imgnum)* $(this).数据(' index ')})；$(这个)。CSS({ ' left ' : this left-(o . width *此不透明度)/2 ' px '，' top ' :(holder heat/2)-o . width *(此不透明度1)/4，' z-index': thiszindex 180 '不透明度：(此不透明度0.2)/1.2，“宽度”: o . width *(此不透明度1)/2，“高度”: o . height *(此不透明度1/2 })；});函数scrolg(){ $ img。每个(函数(){ var this deg=$(this)).attr(' now deg ')；向左变化；xx=this degif(dir==' left '){ this left=-(o . radius)* Math。辛(xx *(数学).PI * 2/360))(支架宽度/2)；}否则{此左侧=(o .半径)*数学。辛(xx *(数学).PI * 2/360))(支架宽度/2)；} var thiszindex=xx 180？xx-360 :-xx；var thisopacity=xx=180？(180 - xx)/180 : ($(本)。attr(' now deg ')-180)/180；$(这个)。CSS({ ' left ' : this left-(o . width *此不透明度)/2 ' px '，' top ' :(holder heat/2)-o . width *(此不透明度1)/4，' z-index': thiszindex 180 '不透明度：(此不透明度0.2)/1.2，“宽度”: o . width *(此不透明度1)/2，“高度”: o . height *(此不透明度1/2 })；xx；如果(xx 360)xx=0；$(这个)。attr({ ' now deg ' : xx })；});};var tt=setInterval(滚动，速度);$ img。悬停(函数(){ clearInterval(TT))；}，function(){ TT=setInterval(scrollimg，speed)；});});};$ .fn。滚动3d。默认值={速度： 25，半径： 300，宽度： 200，高度： 150，方向： '左' } })(jQuery)；在超文本标记语言中只需要有一个差异包含你所需要的图片就可以完成这个效果，例如：

div class=' holder ' style=' width :550 px；高度：300 px位置position : relative ' img src=' http : img/1。jpg '/img src=' http : img/2。jpg '/img src=' http : img/3。jpg '/img src=' http : img/1。jpg '/img src=' http : img/2。jpg '/div代码的调用可以这样写：

$('.holder’)。滚动3d()；

写的有点乱七八糟，还望各位见谅！

压缩包：test_jb51.rar

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！