您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 鼠标特效 >

记录鼠标运行轨迹，拖动放开时，图层会按照鼠标运行轨迹到达终点

时间：2013-04-25 11:20 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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" />
<title>拖动_轨迹运行</title>
<style type="text/css">
*   {margin:0px;padding:0px;}
#div1  {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);
  }
 }
}
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封装
</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;
  }
 }
}
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++;
 }
}

onload = function(){
 var myDrag = new MyDrag("div1");
 $ID("rad1").onclick = function(){
  myDrag._ifSavePos = true;
 }
 $ID("rad2").onclick = function(){
  myDrag._ifSavePos = false;
 }
}
</script>
</head>
<body>
<div>随意拖动那个小方块几秒钟</div>
<label for="rad1"><input type="radio" id="rad1" name="rad" checked="checked"/>记住轨迹</label>
<label for="rad2"><input type="radio" id="rad2" name="rad"/>不记住轨迹</label>
<div id="div1">

</div>

</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

记录鼠标运行轨迹，拖动放开时，图层会按照鼠标运行轨迹到达终点

记录鼠标运行轨迹，拖动放开时，图层会按照鼠标运行轨迹到达终点

记录鼠标运行轨迹，拖动放开时，图层会按照鼠标运行轨迹到达终点由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/shubiaotexiao/2161.html

标签：网站源码

上一篇：没有了

下一篇：js涂鸦画板特效可调画笔颜色|粗细|橡皮

[鼠标特效] 网页上任意处单击显示坐标

[鼠标特效] 跟随鼠标转动的眼睛

[鼠标特效] 鼠标经过显示详细信息效果

[鼠标特效] 跟随鼠标的飞行星星

[鼠标特效] 非常酷的鼠标拖拽翻页效果

[鼠标特效] 右击鼠标后页面强制跳转js代码

[鼠标特效] jQuery图文高亮滚动切换特效

[鼠标特效] 围绕鼠标的文字

[鼠标特效] 奇幻的文字跟随鼠标特效代码

[鼠标特效] 浮动层的js特效代码鼠标经过图片

[鼠标特效] 拖动鼠标画出方框JS鼠标选区代码

[鼠标特效] 跟随鼠标的闪烁文字

相关内容推荐

25个天气预报PNG图标

为单独页面

马达加斯加3PNG图标

麦包包模板

MySQL 免费下载

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1