jQuery頭像裁剪工具jcrop用法實例(附演示與demo源碼下載)
624
2024-03-13
很久之前練習(xí)過的一個實踐,復(fù)習(xí)完漸變、圓角、3D變形、拖拽等等來看源碼,估計還不會太凌亂(◎?◎)哈哈哈
效果圖:
HTML:
<!doctype html> <html onselectstart="return false;" lang="en">< !important --> <head> <meta charset="UTF-8"> <title>3D拖拽相冊</title> <link rel="stylesheet" > </head> <body> < html上阻止默認行為onselectstart --> <div class="pic"> <img src="http://www.gimoo.net/t/1901/images/1.jpg" /> <img src="http://www.gimoo.net/t/1901/images/2.jpg"/> <img src="http://www.gimoo.net/t/1901/images/3.jpg" /> <img src="http://www.gimoo.net/t/1901/images/4.jpg" /> <img src="http://www.gimoo.net/t/1901/images/5.jpg" /> <img src="http://www.gimoo.net/t/1901/images/6.jpg" /> <img src="http://www.gimoo.net/t/1901/images/7.jpg" /> <img src="http://www.gimoo.net/t/1901/images/8.jpg" /> <img src="http://www.gimoo.net/t/1901/images/9.jpg" /> <img src="http://www.gimoo.net/t/1901/images/10.jpg" /> <img src="http://www.gimoo.net/t/1901/images/11.jpg" /> <p></p> </div> <script type="text/javascript" src="http://www.gimoo.net/t/1901/js/jquery.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1901/js/index.js"></script> </body> </html>
CSS:
*{margin:0;padding:0;} body,html{background:#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;不用這個*/ transform: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:1200px; /*放射性背景漸變*/ 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%; /*往回移動位置*/ margin-left:-600px; margin-top:-600px; transform:rotateX(90deg); border-radius:600px; }
JQ:
$(function(){ var imgL=$("div.pic img").size();//獲取到圖片總數(shù) // alert(imgL); var deg=360/imgL;//每張圖片需要旋轉(zhuǎn)的角度 var roY=0,roX=0;//定義父盒子旋轉(zhuǎn)初始值 var xN,yN;//定義當前點擊處的坐標和前一坐標的距離差 var play;//定義定時器 $("div.pic img").each(function(i){ //設(shè)置每張圖片 的3D位置 $(this).css({"transform":"rotateY("+i*deg+"deg) translateZ(350px)"}); $(this).attr("ondragstart","return false");//每張圖片都禁止拖拽 }); $(document).mousedown(function(ev){ //每次都先清除定時器,防止混亂 clearInterval(play); //獲取當前點擊處的坐標 var x_=ev.clientX; var y_=ev.clientY; $(this).bind("mousemove",function(ev){ //獲取移動后的坐標 var x=ev.clientX; var y=ev.clientY; //獲取移動后,當前坐標和前一坐標的距離差 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='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)" }); //將移動后的點設(shè)為前一點存放到x_,y_變量中 x_=ev.clientX; y_=ev.clientY; }) }).mouseup(function(){ //鼠標抬起時,解綁鼠標移動事件 $(this).unbind("mousemove"); //鼠標抬起時候,實現(xiàn)慣性緩沖效果 play=setInterval(function(){ //將距離插值慢慢變小,實現(xiàn)慣性緩沖 xN*=0.95; yN*=0.95; //向左拖動的時候,當前點與前一點的距離差是負值的,要取絕對值 //停止慣性 if(Math.abs(xN)<1&&Math.abs(yN)<1){ clearInterval(play); } //將距離差轉(zhuǎn)為旋轉(zhuǎn)角度 roY+=xN*0.2; roX-=yN*0.1; $("div.pic").css({ "transform":"perspective(800px) rotateY("+roY+"deg) rotateX("+roX+"deg)" }); },30); }) })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持綠夏網(wǎng)。
#免責(zé)聲明#
本站[綠夏技術(shù)導(dǎo)航]提供的一切軟件、教程和內(nèi)容信息僅限用于學(xué)習(xí)和研究目的;不得將上述內(nèi)容用于商業(yè)或者非法用途,否則,一切后果請用戶自負。本站信息來自網(wǎng)絡(luò)收集整理,版權(quán)爭議與本站無關(guān)。您必須在下載后的24個小時之內(nèi),從您的電腦或手機中徹底刪除上述內(nèi)容。如果您喜歡該程序或內(nèi)容,請支持正版,購買注冊,得到更好的正版服務(wù)。我們非常重視版權(quán)問題,如有侵權(quán)請郵件[admin@lxwl520.com]與我們聯(lián)系進行刪除處理。敬請諒解!