这里说的滑移其实就是减速效果&＃xff0c;能根据设定的坐标平面移动。
效果
代码&＃xff1a;
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns&＃61;"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;gb2312" />
<title>滑移效果title>
<script type&＃61;"text/Javascript">
var $ &＃61; function (id) {
return "string" &＃61;&＃61; typeof id ? document.getElementById(id) : id;
};
function Event(e){
var oEvent &＃61; document.all ? window.event : e;
if (document.all) {
oEvent.pageX &＃61; oEvent.clientX &＃43; document.documentElement.scrollLeft;
oEvent.pageY &＃61; oEvent.clientY &＃43; document.documentElement.scrollTop;
}
return oEvent;
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" &＃43; sEventType, fnHandler);
} else {
oTarget["on" &＃43; sEventType] &＃61; fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" &＃43; sEventType, fnHandler);
} else {
oTarget["on" &＃43; sEventType] &＃61; null;
}
};
var Class &＃61; {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend &＃61; function(destination, source) {
for (var property in source) {
destination[property] &＃61; source[property];
}
return destination;
}
var Slippage &＃61; Class.create();
Slippage.prototype &＃61; {
initialize: function(obj, options) {
this.obj &＃61; $(obj);
this._timer &＃61;null;
this._xs &＃61; this._ys &＃61; [];
this.X &＃61; parseInt(this.obj.style.left) || 0;
this.Y &＃61; parseInt(this.obj.style.top) || 0;
this.SetOptions(options);
this.Step &＃61; Math.abs(this.options.Step);
this.Time &＃61; Math.abs(this.options.Time);
this.Loop &＃61; this.options.Loop;
this.Relative &＃61; this.options.Relative;
this.SetPosition(this.options.X || [], this.options.Y || []);
},
//设置默认属性
SetOptions: function(options) {
this.options &＃61; {//默认值
Step: 10,//滑动变化率
Time: 10,//滑动延时
X: [],//x坐标变化
Y: [],//y坐标变化
Loop: false,//是否循环
Relative: true//是否相对位置
};
Object.extend(this.options, options || {});
},
//
SetPosition: function(arrX, arrY) {
if(arrX.length <&＃61; 0 && arrX.length <&＃61; 0) return false;
else if(arrX.length <&＃61; 0) arrX &＃61; [0];
else if(arrY.length <&＃61; 0) arrY &＃61; [0];
this._xs &＃61; arrX; this._ys &＃61; arrY;
if(this.Relative){
for(var i in this._xs){ if (i &＃61;&＃61; 0) { this._xs[0] &＃43;&＃61; this.X; } else { this._xs[i] &＃43;&＃61; this._xs[i-1]; } }
for(var i in this._ys){ if (i &＃61;&＃61; 0) { this._ys[0] &＃43;&＃61; this.Y; } else { this._ys[i] &＃43;&＃61; this._ys[i-1]; } }
}
this.Set();
},
//
Set: function() {
//当全部坐标指向同一个位置时会进入死循环
if(this._xs.length <&＃61; 0 && this._ys.length <&＃61; 0) return;
if(this._xs.length > 0) this.X &＃61; this._xs.shift();
if(this._ys.length > 0) this.Y &＃61; this._ys.shift();
if(this.Loop && this._xs.length > 0 && this._ys.length > 0) { this._xs.push(this.X);this._ys.push(this.Y); }
//$("aa").innerHTML&＃43;&＃61;this._ys.length&＃43;"&＃61;";
this.Move(this.X, this.Y);
},
//
Move: function(iX, iY) {
clearTimeout(this._timer);
var iLeft &＃61; parseInt(this.obj.style.left) || 0, iTop &＃61; parseInt(this.obj.style.top) || 0, iLeftStep &＃61; this.GetStep(iX, iLeft), iTopStep &＃61; this.GetStep(iY, iTop);
if (iLeftStep &＃61;&＃61; 0 && iTopStep &＃61;&＃61; 0) {
this.Set();
} else {
this.obj.style.left &＃61; (iLeft &＃43; iLeftStep) &＃43; "px"; this.obj.style.top &＃61; (iTop &＃43; iTopStep) &＃43; "px";
var oThis &＃61; this; this._timer &＃61; setTimeout(function(){ oThis.Move(iX, iY); }, this.Time);
}
},
//
GetStep: function(iTarget, iNow) {
var iStep &＃61; (iTarget - iNow) / this.Step;
if (iStep &＃61;&＃61; 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
}
};
window.onload &＃61; function(){
new Slippage("idSlippage3", { X: [200,200,0,-200,-100,-100], Y: [0,0,100,-100,100,-100], Loop: true });
var oSlippage &＃61; new Slippage("idSlippage");
$("aa").onclick &＃61; function(e){ var oEvent &＃61; Event(e);oSlippage.Move(oEvent.pageX, oEvent.pageY);}
var oSlippage2 &＃61; new Slippage("idSlippage2", { Step: 1, Relative: false }),x&＃61;[],y&＃61;[];
$("bb").onmousedown &＃61; function(e){ addEventHandler(this, "mousemove", Set); }
$("bb").onmouseout &＃61; function(e){ removeEventHandler(this, "mousemove", Set); x&＃61;y&＃61;[];}
$("bb").onmouseup &＃61; function(e){ removeEventHandler(this, "mousemove", Set); oSlippage2.SetPosition(x, y);x&＃61;y&＃61;[];}
function Set(e){ var oEvent &＃61; Event(e); x.push(oEvent.pageX); y.push(oEvent.pageY); }
}
script>
head>
<body>
自动滑移:
<div id&＃61;"cc" style&＃61;"height:200px; width:500px; border:1px solid #000000; position:relative;overflow:hidden;">
<div id&＃61;"idSlippage3" style&＃61;"width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:50px; left:50px;"> div>
div>
定点滑移:&＃xff08;鼠标点击&＃xff09;
<div id&＃61;"aa" style&＃61;"height:200px; width:500px; border:1px solid #000000; overflow:hidden;">
<div id&＃61;"idSlippage" style&＃61;"width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:-50px; left:50px;"> div>
div>
定线滑移:&＃xff08;鼠标拖动轨迹&＃xff09;
<div id&＃61;"bb" style&＃61;"height:200px; width:500px; border:1px solid #000000; overflow:hidden;">
<div id&＃61;"idSlippage2" style&＃61;"width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:-50px; left:50px;"> div>
div>
body>
html>
本文转自博客园cloudgamer的博客&＃xff0c;原文链接&＃xff1a;Javascript 滑移效果&＃xff0c;如需转载请自行联系原博主。
京公网安备 11010802041100号