您的当前位置：首页 js实现div拖动动画运行轨迹效果代码分享_javascript技巧

js实现div拖动动画运行轨迹效果代码分享_javascript技巧

来源：化拓教育网

本文实例讲述了js div拖动动画运行轨迹效果。分享给大家供大家参考。具体如下：
这是一款基于js实现的div拖动动画运行轨迹效果源码，是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码。可以选择【记住轨迹】与【不记住轨迹】两种拖动显示模式，从而显示出不同的拖动效果。
运行效果图： -------------------查看效果下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的js div拖动动画运行轨迹效果代码如下





js div拖动动画运行轨迹效果代码 - 脚本之家




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);
 }
 }
}

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);
 }
}

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;
}
//前面通常都用一个base.js封装