1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>15.iphone图片查看器</title> 8 <meta name="author" content="Administrator" /> 9 <style> 10 *{margin:0;padding:0} 11 #wrap{width:900px;height:600px;background:url(images/bg.png);margin:0 auto;position:relative} 12 #iphone{width:240px;height:361px;margin:0 auto;overflow:hidden;position: relative} 13 #img-frame{position:absolute} 14 li{list-style:none;float:left;width:240px;} 15 </style> 16 <script> 17 window.onload=function(){ 18 var oWrap=document.getElementById('wrap'); 19 var oIphone=document.getElementById('iphone'); 20 var oIphone_ul=document.getElementsByTagName('ul')[0]; 21 var oIphone_aLi=document.getElementsByTagName('li'); 22 23 var downX=0; 24 var iNow=0; 25 26 oIphone.style.paddingTop = (oWrap.offsetHeight - oIphone.offsetHeight)/2 +'px'; 27 oIphone_ul.style.width = oIphone_aLi.length * oIphone_aLi[0].offsetWidth +'px'; 28 29 oIphone_ul.onmousedown=function(ev){ 30 var ev= ev || event; 31 downX= ev.clientX; 32 33 if(oIphone_ul.setCapture) oIphone_ul.setCapture(); 34 35 var disX = ev.clientX - oIphone_ul.offsetLeft; 36 37 document.onmousemove=function(ev){ 38 var ev= ev || event; 39 oIphone_ul.style.left = ev.clientX - disX +'px' 40 } 41 42 document.onmouseup=function(ev){ 43 var ev= ev || event; 44 document.onmousemove = document.onmouseup = null; 45 46 if( ev.clientX < downX ){ 47 48 if( iNow < oIphone_aLi.length-1 ) iNow++; //最后一次 不让他发生弹性运动 49 50 bb(oIphone_ul,{'left':-iNow*oIphone_aLi[0].offsetWidth}); 51 console.log( iNow ) 52 53 }else{ 54 55 if( iNow!= 0 ) iNow--;//iNow 如果小于0 不让他发生弹性运动 56 57 bb(oIphone_ul,{'left':-iNow*oIphone_aLi[0].offsetWidth}) 58 } 59 60 } 61 return false 62 } 63 } 64 65 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } 66 /**多物体弹性运动框架**/ 67 function bb(obj,json){ 68 clearInterval(obj.timer); 69 obj.timer=setInterval(function(){ 70 var iBtn = true; 71 for( var attr in json ){ 72 /**代码块**/ 73 if( !obj.iSpeed ) obj.iSpeed={}; 74 if( !obj.iSpeed[attr] ) obj.iSpeed[attr]=0; 75 76 var iTarget = json[attr]; 77 var iCur = parseInt( getStyle( obj,attr ) ); 78 79 obj.iSpeed[attr] += (iTarget - iCur)/6; 80 obj.iSpeed[attr] *= 0.75; 81 82 if( Math.abs(obj.iSpeed[attr]) <=1 && Math.abs( iTarget - iCur )<=1 ){ 83 obj.iSpeed[attr]=0; 84 obj.style[attr] = iTarget +'px' 85 }else{ 86 iBtn = false; 87 var sNow= iCur + obj.iSpeed[attr]; 88 if( attr =='width' || attr =='height' ){ 89 if( sNow < 0 ) sNow =0; 90 } 91 obj.style[attr] = sNow +'px'; 92 } 93 document.title = iCur +'-'+obj.iSpeed[attr]; 94 /**代码块**/ 95 } 96 97 if( iBtn ){ 98 clearInterval( obj.timer ); 99 } 100 101 },30) 102 } 103 </script> 104 <!-- Date: 2014-12-15 --> 105 </head> 106 <body> 107 <div id="wrap"> 108 <div id="iphone"> 109 <ul id="img-frame"> 110 <li><img src="images/pic1.png"/></li> 111 <li><img src="images/pic2.png"/></li> 112 <li><img src="images/pic3.png"/></li> 113 <li><img src="images/pic4.png"/></li> 114 </ul> 115 </div> 116 </div> 117 </body> 118 </html>