javascript 中的匀减速运动
[css]
body {
background-color:#FFFFFF;
}
body, td, div, p, a, font, span {
font-family:arial,sans-serif;
}
body {
margin-top:2px;
}
#title {
font-family:arial,sans-serif;
background-color:#DDF8CC;
border-top:1px solid #80C65A;
font-weight:bold;
}
#subtitle {
font-family:arial,sans-serif;
font-weight:bold;
}
p.backtotop {
float:right;
font-size:x-small;
margin:0.5em 0pt 0pt 4em;
padding:0pt;
position:relative;
z-index:99;
}
.horizontal-seperator {
background:#D8DFEA none repeat scroll 0%;
border:medium none;
color:#D8DFEA;
height:1px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
overflow:hidden;
}
.box {
margin:0pt auto;
position:relative;
border:10px solid #AA0000;
width:268px;
height:339px;
overflow:hidden;
}
.bigbox {
width:2412px;
height:339px;
position:absolute;
cursor:move;
}
.container {
float:left;
}
.clear {
clear:both;
}
[/css]
[html]
<body >
<center>
<div class="box" onmousedown="_mousedown(event)" onmousemove="_mousemove(event)" onmouseup="_mouseupout(event)" onmouseout="_mouseupout(event)">
<div style="top: 0px; left: 0px;" class="bigbox" id="bigbox">
<div class="container">
<img border="0" onmousedown="return false" alt="" src="http://abhinavsingh.com/webdemos/iphoneflickphotoapi/images/454405576.jpg">
</div>
<div class="container">
<img border="0" onmousedown="return false" alt="" src="http://abhinavsingh.com/webdemos/iphoneflickphotoapi/images/463332266.jpg">
</div>
<div class="container">
<img border="0" onmousedown="return false" alt="" src="http://abhinavsingh.com/webdemos/iphoneflickphotoapi/images/464349687.jpg">
</div>
<div class="container">
<img border="0" onmousedown="return false" alt="" src="http://abhinavsingh.com/webdemos/iphoneflickphotoapi/images/472790869.jpg">
</div>
<div class="container">
<img border="0" onmousedown="return false" alt="" src="http://abhinavsingh.com/webdemos/iphoneflickphotoapi/images/491461803.jpg">
</div>
<div class="container">
<img border="0" onmousedown="return false" alt="" src="http://abhinavsingh.com/webdemos/iphoneflickphotoapi/images/444297765.jpg">
</div>
<div class="container">
<img border="0" onmousedown="return false" alt="" src="http://abhinavsingh.com/webdemos/iphoneflickphotoapi/images/454393664.jpg">
</div>
<div class="container">
<img border="0" onmousedown="return false" alt="" src="http://abhinavsingh.com/webdemos/iphoneflickphotoapi/images/532641822.jpg">
</div>
<div class="container">
<img border="0" onmousedown="return false" alt="" src="http://abhinavsingh.com/webdemos/iphoneflickphotoapi/images/532707354.jpg">
</div>
<div class="clear"></div>
</div>
</div>
</center>
</body>
[/html]
[javascript]
var s = {};
s.oldX = 0;
s.screenX = 0;
s.f = 0.92;
s.mouseDown = false;
s.timer = null;
function _mousedown(e) {
s.mouseDown = true;
if (e.screenX) {
s.oldX = s.screenX = e.screenX
}
if (!s.timer) {
s.timer = setInterval(onTimerFired, 1E3 / 30)
}
}
function _mousemove(e) {
if (e.screenX) {
s.screenX = e.screenX;
}
}
function _mouseupout(e) {
s.mouseDown = false
}
function onTimerFired() {
if (s.mouseDown) {
s.deltaX = s.oldX - s.screenX;
} else {
s.deltaX *= s.f;
}
s.oldX = s.screenX;
if (Math.abs(s.deltaX) >= 1) {
document.getElementById("bigbox").style.left = parseInt(document.getElementById("bigbox").style.left) - s.deltaX + "px"
} else {
if (!s.mouseDown) {
clearInterval(s.timer);
s.timer = null
}
}
};
[/javascript]
