[javascript]代码库
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body, dl, dt, dd {
padding:0;
margin:0;
}
</style>
</head>
<body>
<dl id="J_move">
<dt>鼠标放上去的效果</dt>
<dd>1、这是第1行</dd>
<dd>2、这是第2行</dd>
<dd>3、这是第3行</dd>
<dd>4、这是第4行</dd>
</dl>
<script>
!function(){
var D = document, moveArea = D.getElementById("J_move");
//moverFn
function moverFn(oTarget){
var self = oTarget, iSpeed = 0;
oTarget.timer && clearInterval(oTarget.timer)
oTarget.timer = setInterval(function(){
var nVal = parseInt(self.style.textIndent) || 0;
iSpeed += ((self.finish - nVal)/2)*0.7;
iSpeed = iSpeed<0 ? Math.floor(iSpeed) : Math.ceil(iSpeed)
if(nVal==oTarget.finish || Math.abs(iSpeed- nVal)<1) {
clearInterval(self.timer);
self.style.textIndent = (self.finish < 0 ? 0 : self.finish) + 'px';
self = null;
}else{
self.style.textIndent = iSpeed + 'px';
}
},30);
}
//eventAdd
moveArea.onmouseover = function(e){
var oEven = e || event, oTarget = oEven.target || oEven.srcElement;
while(oTarget!=this){
if(oTarget.nodeName.toLowerCase()==="dd") break;
oTarget = oTarget.parentNode;
}
if(oTarget.nodeName.toLowerCase()==="dd"){
oTarget.finish = 25;
moverFn(oTarget)
oTarget.onmouseout = function(){
oTarget.finish = 0;
moverFn(oTarget);
}
}
}
}();
</script>
</body>
</html>
[代码运行效果截图]
初级程序员
by: 正仔 发表于:2013-02-22 14:28:18 顶(0) | 踩(0) 回复
能不能改变偏移过度的时间呢!?
网友回复
回复小蜜锋 : 你是指偏移的速度?
顶(0) 踩(0) 2013-02-22 17:27:59
回复评论