iphone照片查看器

  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>