<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>15.iphone图片查看器</title>
<meta name="author" content="Administrator" />
<style>
*{margin:0;padding:0}
#wrap{width:900px;height:600px;background:url(images/bg.png);margin:0 auto;position:relative}
#iphone{width:240px;height:361px;margin:0 auto;overflow:hidden;position: relative}
#img-frame{position:absolute}
li{list-style:none;float:left;width:240px;}
</style>
<script>
window.onload=function(){
var oWrap=document.getElementById('wrap');
var oIphone=document.getElementById('iphone');
var oIphone_ul=document.getElementsByTagName('ul')[0];
var oIphone_aLi=document.getElementsByTagName('li'); var downX=0;
var iNow=0; oIphone.style.paddingTop = (oWrap.offsetHeight - oIphone.offsetHeight)/2 +'px';
oIphone_ul.style.width = oIphone_aLi.length * oIphone_aLi[0].offsetWidth +'px'; oIphone_ul.onmousedown=function(ev){
var ev= ev || event;
downX= ev.clientX; if(oIphone_ul.setCapture) oIphone_ul.setCapture(); var disX = ev.clientX - oIphone_ul.offsetLeft; document.onmousemove=function(ev){
var ev= ev || event;
oIphone_ul.style.left = ev.clientX - disX +'px'
} document.onmouseup=function(ev){
var ev= ev || event;
document.onmousemove = document.onmouseup = null; if( ev.clientX < downX ){ if( iNow < oIphone_aLi.length-1 ) iNow++; //最后一次 不让他发生弹性运动 bb(oIphone_ul,{'left':-iNow*oIphone_aLi[0].offsetWidth});
console.log( iNow ) }else{ if( iNow!= 0 ) iNow--;//iNow 如果小于0 不让他发生弹性运动 bb(oIphone_ul,{'left':-iNow*oIphone_aLi[0].offsetWidth})
} }
return false
}
} function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
/**多物体弹性运动框架**/
function bb(obj,json){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iBtn = true;
for( var attr in json ){
/**代码块**/
if( !obj.iSpeed ) obj.iSpeed={};
if( !obj.iSpeed[attr] ) obj.iSpeed[attr]=0; var iTarget = json[attr];
var iCur = parseInt( getStyle( obj,attr ) ); obj.iSpeed[attr] += (iTarget - iCur)/6;
obj.iSpeed[attr] *= 0.75; if( Math.abs(obj.iSpeed[attr]) <=1 && Math.abs( iTarget - iCur )<=1 ){
obj.iSpeed[attr]=0;
obj.style[attr] = iTarget +'px'
}else{
iBtn = false;
var sNow= iCur + obj.iSpeed[attr];
if( attr =='width' || attr =='height' ){
if( sNow < 0 ) sNow =0;
}
obj.style[attr] = sNow +'px';
}
document.title = iCur +'-'+obj.iSpeed[attr];
/**代码块**/
} if( iBtn ){
clearInterval( obj.timer );
} },30)
}
</script>
<!-- Date: 2014-12-15 -->
</head>
<body>
<div id="wrap">
<div id="iphone">
<ul id="img-frame">
<li><img src="data:images/pic1.png"/></li>
<li><img src="data:images/pic2.png"/></li>
<li><img src="data:images/pic3.png"/></li>
<li><img src="data:images/pic4.png"/></li>
</ul>
</div>
</div>
</body>
</html>
