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>
