这是一个可拖动的图层特效，用鼠标拖动图层移动后，在后面显示图层所经过的轨迹，看起来效果还不错。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>拖动方块图层能按运动轨迹记录移动效果_武鸣人</title>
<style type="text/css">
#_wuming_ren{position:relative;left:200px;top:200px;width:100px;height:100px;background-color:#f60;cursor:move;}
</style>
<script type="text/javascript">
var isIE = (document.all)?true:false;
var $ID = function(id){
return "string"==typeof id?document.getElementById(id):id;
}
var Class = {
create:function(){
return function(){
this.initilize.apply(this,arguments);
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var Extend = function(destination, source){
for(var property in source){
destination[property] = source[property];
}
}
var Bind = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
return fun.apply(object,args);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var BindAsEventListener = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event){
return fun.apply(object,[event||window.event].concat(args));
}
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
function getNodePosition(node,type){//type="left"or"top"
var nodeTemp = node;
var l = 0;
var t = 0;
while(nodeTemp!=document.body&&nodeTemp!=null){
l += nodeTemp.offsetLeft;
t += nodeTemp.offsetTop;
nodeTemp = nodeTemp.offsetParent;
}
if(type.toLowerCase()=="left") return l;
else return t;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//前面通常都用一个base.js封装
</script>
<script type="text/javascript">
var MyDrag = Class.create();
MyDrag.prototype = {
initilize:function(obj){
this.Obj = $ID(obj);
this._x = this._y = 0;
this._xx = this._yy = 0;//Move记录坐标
this.Obj.style.position = "absolute";
this._pos = [];
this._ifSavePos = true;
this._t = null;
this._speed = 10;
this._indexMove = 0;//全局的MoveIndex
this._fnStart = BindAsEventListener(this,this.Start);
this._fnMove = BindAsEventListener(this,this.Move);
this._fnStop = Bind(this,this.Stop);
addEventHandler(this.Obj,"mousedown",this._fnStart);
},
Start:function(oEvent){
if(!this._ifSavePos)
this._pos = [];
this.Drag = this.Obj.cloneNode(true);
if(isIE) this.Drag.style.filter = "alpha(opacity=50)";
else this.Drag.style.opacity = "0.5";
this.Obj.parentNode.appendChild(this.Drag);
this._left1 = this._xx = getNodePosition(this.Obj,"left");
this._top1 = this._yy = getNodePosition(this.Obj,"top");
this._x = oEvent.clientX - this.Obj.offsetLeft;
this._y = oEvent.clientY - this.Obj.offsetTop;
addEventHandler(document,"mousemove",this._fnMove);
addEventHandler(document,"mouseup",this._fnStop);
this._t = setInterval(Bind(this,this.SavePos),10);
},
SavePos:function(){//记录坐标点
this._pos.push(this._xx + "_" + this._yy);
},
Move:function(oEvent){
if(isIE) oEvent.returnValue = false;
this._xx = oEvent.clientX - this._x;
this._yy = oEvent.clientY - this._y;
this.Drag.style.left = this._xx + "px";
this.Drag.style.top = this._yy + "px";
},
Stop:function(){
removeEventHandler(document,"mousemove",this._fnMove);
removeEventHandler(document,"mouseup",this._fnStop);
this.Obj.parentNode.removeChild(this.Drag);
this.Obj.style.left = this._xx + "px";
this.Obj.style.top = this._yy + "px";
clearInterval(this._t);
this._fnCloneMove = Bind(this,this.CloneMove);
this._t = setTimeout(this._fnCloneMove,50);
},
CloneMove:function(){
if(this._indexMove<6){
new ObjMove({x1:this._left1,y1:this._top1,x2:this._xx,y2:this._yy,pos:this._pos});
this._indexMove++;
this._t = setTimeout(this._fnCloneMove,50);
}else{
clearTimeout(this._t);
this._indexMove = 0;
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var ObjMove = Class.create();
ObjMove.prototype = {
initilize:function(options){
this.SetOptions(options);
this.Obj = document.createElement("DIV");
this.Obj.style.cssText = "position:absolute;left:"+ this.options.x1 +"px;top:"+ this.options.y1 +"px;width:100px;height:100px;background-color:#f60;fliter:alpha(opacity=100);opacity:1;";
document.body.appendChild(this.Obj);
this.Move2();
},
SetOptions: function(options) {
this.options = {//默认值
x1: 0,
y1:0,
x2:0,
y2:0,
pos:[]
};
Extend(this.options, options || {});
},
Move2:function(){
this._indexMove = 0;
this._fnMovePos = Bind(this,this.MovePos);
this._t = setInterval(this._fnMovePos,10);
},
MovePos:function(){
if(this._indexMove>=this.options.pos.length){
this.options.pos = [];
document.body.removeChild(this.Obj);
clearInterval(this._t);
}else{
this.Obj.style.left = this.options.pos[this._indexMove].split("_")[0] + "px";
this.Obj.style.top = this.options.pos[this._indexMove].split("_")[1] + "px";
}
this._indexMove++;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
onload = function(){
var myDrag = new MyDrag("_wuming_ren");
$ID("www_wuming_ren").onclick = function(){
myDrag._ifSavePos = true;
}
$ID("wuming_ren").onclick = function(){
myDrag._ifSavePos = false;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div>随意拖动小方块数秒钟</div>
<label for="www_wuming_ren"><input type="radio" id="www_wuming_ren" name="rad" checked="checked">记住轨迹</label>
<label for="wuming_ren"><input type="radio" id="wuming_ren" name="rad">不记住轨迹</label>
<div id="_wuming_ren"></div>
</body>
</html>本文来自武鸣人网站，转载请注明出处