jquery 图片360度旋转效果
其中js类库，图片都自己去找，不影响
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery制作一个漂亮的手机软件</title> <link href="css/basic.css" rel="stylesheet" type="text/css" /> <script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script> </head> <body> <div class="weiduduan clearfix"> <div id="phoneCarousel"> <div class="previous arrow"> </div> <div class="next arrow"> </div> <div id="stage"> <a href="http://www.jq22.com/" target="_blank" ><img width="270" height="400" src="images/iphone.png" alt="iPhone" id="iphone" class="default" /></a> <a href="http://www.jq22.com/" target="_blank" ><img width="270" height="400" src="images/nexus_one.png" alt="Nexus One" id="nexus" /> </a> <a href="http://www.jq22.com/" target="_blank" ><img width="270" height="400" src="images/nokia.png" alt="Nokia" id="nokia" /> </a> <a href="http://www.jq22.com/" target="_blank" ><img width="270" height="400" src="images/blackberry.png" alt="BlackBerry" id="blackberry" /></a></div> </div> <script type="text/javascript" src="js/script.js"></script> </div> </body> </html>
basic.css
@charset "utf-8"; /* reset */ body{font:12px/18px arial,sans-serif;color:#585858;} body,div,p,span,form,iframe,table,td,th,input,textarea,button,label,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{font-size:100%; } ul,ol,li,dl{list-style-type:none;} em,i,dfn,cite,strong,small{font-style:normal;} img{border:0;} fieldset,button,input,select,option{vertical-align:middle;font:12px/18px arial,sans-serif;} table{border-collapse:collapse;border-spacing:0} textarea{resize:none} /* color */ a:link,a:visited{color:#575757;text-decoration:none;} a:hover{color:#ef4165;text-decoration:none;} a:active{color:#1d7400;} /* clearfix */ .clearfix{ *zoom:1;} .clearfix:after{display:table; line-height:0; content:""; clear:both;} /* public.omission */ .fl{ float:left;} .fr{ float:right;} .tc{ text-align:center;} .tr{ text-align:right;} .fb{ font-weight:bold;} .f12{ font-size:12px;} h3{ font-weight:normal;} .listop{ padding-top:15px;} .mr10{ margin-right:10px;} .mr15{ margin-right:15px;} .mL10{ margin-left:10px;} .mL15{ margin-left:15px;} .mt10{ margin-top:10px;} .mt15{ margin-top:15px;} .mb10{ margin-bottom:10px;} .mb15{ margin-bottom:15px;} .weiduduan{ width:800px; margin:50px auto 0 auto;} #phoneCarousel{height:390px;margin:0 auto;position:relative;width:800px;} #phoneCarousel .arrow{width:44px;height:44px;background:url(../images/arrows.png) no-repeat;position:absolute;top:50%;margin-top:-22px;left:0;cursor:pointer;} #phoneCarousel .next{background-position:right top;left:auto;right:0;} #phoneCarousel .arrow:hover{background-position:left bottom;} #phoneCarousel .next:hover{background-position:right bottom;} #stage{left:50%;margin-left:-350px;position:absolute;width:700px;height:100%;} #stage img{display:none;} #stage .default{display:block;left:50%;margin-left:-135px;position:absolute;} #stage .animationReady{display:block;position:absolute;top:0;left:0;}
script.js
$(document).ready(function(){ var deg=0; /* Storing all the images into a variable */ var images = $('#stage img').removeClass('default').addClass('animationReady'); var dim = { width:images.width(),height:images.height()}; var cnt = images.length; /* Finding the centers of the animation container: */ var centerX = $('#stage').width()/2; var centerY = $('#stage').height()/2 - dim.height/2; function rotate(step,total){ // This function loops through all the phone images, and rotates them // with "step" degrees (10 in this implementation) until total has reached 0 /* Increment the degrees: */ deg+=step; var eSin,eCos,newWidth,newHeight,q; /* Loop through all the images: */ for(var i=0;i<cnt;i++){ /* Calculate the sine and cosine for the i-th image */ q = ((360/cnt)*i+deg)*Math.PI/180; eSin = Math.sin(q); eCos = Math.cos(q); /* / With the sine value, we can calculate the vertical movement, and the cosine / will give us the horizontal movement. */ q = (0.6+eSin*0.4); newWidth = q*dim.width; newHeight = q*dim.height; /* / We are using the calculated sine value (which is in the range of -1 to 1) / to calculate the opacity and z-index. The front image has a sine value / of 1, while the backmost one has a sine value of -1. */ images.eq(i).css({ top : centerY+15*eSin, left : centerX+200*eCos, opacity : 0.8+eSin*0.2, marginLeft : -newWidth/2, zIndex : Math.round(80+eSin*20) }).width(newWidth).height(newHeight); } total-=Math.abs(step); if(total<=0) return false; // Setting the function to be run again in 40 seconds (equals to 25 frames per second): setTimeout(function(){rotate(step,total)},40); } // Running the animation once at load time (and moving the iPhone into view): rotate(10,360/cnt); $('#phoneCarousel .previous').click(function(){ // 360/cnt lets us distribute the phones evenly in a circle rotate(-10,360/cnt); }); $('#phoneCarousel .next').click(function(){ rotate(10,360/cnt); }); $('#phoneCarousel .previous,#phoneCarousel .next').hover(function(){ clearInterval(timer); },function(){ timer=setInterval(function(){rotate(10,360/cnt);},4000); }); var timer=null; timer=setInterval(function(){rotate(10,360/cnt);},4000); });