jquery+CSS3實(shí)現(xiàn)3D拖拽相冊效果_

1、jquery+CSS3實(shí)現(xiàn)3D拖拽相冊效果_ 這篇文章主要為大家具體介紹了jquery+CSS3實(shí)現(xiàn)3D拖拽相冊效果的具體代碼，具有肯定的參考價(jià)值，感愛好的小伙伴們可以參考一下 效果圖： HTML: !doctype html html onselectstart=return false; lang=en!- !important - head meta charset=UTF-8 title3D拖拽相冊/title link rel=stylesheet href=css/style.css /head body !- html上阻擋默認(rèn)行為onselectstart - div clas

2、s=pic img src=images/1.jpg / img src=images/2.jpg/ img src=images/3.jpg / img src=images/4.jpg / img src=images/5.jpg / img src=images/6.jpg / img src=images/7.jpg / img src=images/8.jpg / img src=images/9.jpg / img src=images/10.jpg / img src=images/11.jpg / p/p /div script type=text/javascript src

3、=js/jquery.js/script script type=text/javascript src=js/index.js/script /body /html CSS: *margin:0;padding:0; body,htmlbackground:#000; .pic width:120px;height:180px; margin:150px auto 0; border:1px solid red; position:relative; transform-style:preserve-3d;/*設(shè)置3D環(huán)境*/ /*perspective:800px;不用這個(gè)*/ trans

4、form:perspective(800px) rotateX(-10deg) rotateY(0deg); .pic img position:absolute; height:100%;width:100%; border-radius:5px; box-shadow:0 0 10px #fff; /*背景漸變效果！important*/ -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 80%,rgba(0,0,0,1) 100%); .pic p width:1200px;height:12

5、00px; /*放射性背景漸變*/ background: -webkit-radial-gradient(center center,400px 400px,rgba(255,255,255,0.2),rgba(0,0,0,0); position:absolute; left:50%;top:100%; /*往回移動(dòng)位置*/ margin-left:-600px; margin-top:-600px; transform:rotateX(90deg); border-radius:600px; JQ: $(function() var imgL=$(div.pic img).size();

6、/獵取到圖片總數(shù) / alert(imgL); var deg=360/imgL;/每張圖片需要旋轉(zhuǎn)的角度 var roY=0,roX=0;/定義父盒子旋轉(zhuǎn)初始值 var xN,yN;/定義當(dāng)前點(diǎn)擊處的坐標(biāo)和前一坐標(biāo)的距離差 var play;/定義定時(shí)器 $(div.pic img).each(function(i) /設(shè)置每張圖片 的3D位置 $(this).css(transform:rotateY(+i*deg+deg) translateZ(350px); $(this).attr(ondragstart,return false);/每張圖片都禁止拖拽 ); $(document)

7、.mousedown(function(ev) /每次都先清除定時(shí)器，防止混亂 clearInterval(play); /獵取當(dāng)前點(diǎn)擊處的坐標(biāo) var x_=ev.clientX; var y_=ev.clientY; $(this).bind(mousemove,function(ev) /獵取移動(dòng)后的坐標(biāo) var x=ev.clientX; var y=ev.clientY; /獵取移動(dòng)后，當(dāng)前坐標(biāo)和前一坐標(biāo)的距離差 xN=x-x_; yN=y-y_; /將距離差轉(zhuǎn)變?yōu)槿萜餍D(zhuǎn)的數(shù)值 roY+=xN*0.2; roX-=yN*0.1; /*$(body).append(div style

8、=background:red;width:5px;height:5px;position:absolute;top:+y+px;left:+x+px;/div); 此處為便利看到效果*/ $(div.pic).css( transform:perspective(800px) rotateY(+roY+deg) rotateX(+roX+deg) ); /將移動(dòng)后的點(diǎn)設(shè)為前一點(diǎn)存放到x_,y_變量中 x_=ev.clientX; y_=ev.clientY; ) ).mouseup(function() /鼠標(biāo)抬起時(shí)，解綁鼠標(biāo)移動(dòng)大事 $(this).unbind(mousemove); /鼠標(biāo)抬起時(shí)候，實(shí)現(xiàn)慣性緩沖效果 play=setInterval(function() /將距離插值慢慢變小，實(shí)現(xiàn)慣性緩沖 xN*=0.95; yN*=0.95; /向左拖動(dòng)的時(shí)候，當(dāng)前點(diǎn)與前一點(diǎn)的距離差是負(fù)值的，要取肯定值 /停止慣性 if(Math.abs(xN)1Math.abs(yN)1) clearInterval(play); /將距離差轉(zhuǎn)為旋轉(zhuǎn)角度 roY+=xN*0.