网站首页

网站源码

加入VIP，免费下载全站VIP素材开通VIP

PHP源码 ASP源码 .NET源码其他VIP源码手机VIP源码

CMS模板

加入VIP，免费下载全站VIP素材开通VIP

织梦模板帝国cms模板商城源码 discuz模板 wordpress模板其他源码 app源码 pbootcms

安卓源码

加入VIP，免费下载全站VIP素材开通VIP

VIP源码控件分类功能分类技术博客

免费源码

php源码 asp源码 .NET源码 java源码其他源码

会员特权

广告合作

●●●

加入VIP，免费下载全站素材开通VIP

设计素材网页特效网页设计作业开发教程

登录注册 QQ登录

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

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

时间：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下无效。

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

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

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-shubiao/2161.html

标签：源码网站源码鼠标

上一篇：没有了

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

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

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

[鼠标特效] 鼠标移动测试

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

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

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

[鼠标特效] 跟随鼠标的漂亮光环

[鼠标特效] 鼠标轨迹特效，非常漂亮的跟随鼠

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

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

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

[鼠标特效] 跟随鼠标的弹力图片效果

相关内容推荐

直播源码一对一源码

系统架构技能

百度浏览器

智能建站系统

能源科技产品网站源码

一对一交友源码

商城商城源码

asp.net网站管理系

社区扫码进群源码

企业后台管理系统

Shop7z至尊版

得推校园O2O系统

多语言企业站

小学初中作文网站源码

搭建直播平台

热门源码

源代码下载

个人简历网页模板

商城系统源码

呼叫中心源码

个人网站设计模板

网站源文件

免费网站模板下载

免费网页模板

企业网站模板下载

新闻发布系统

网站模版下载

asp建站系统

安卓源码下载

php问答系统下载

网站右下角广告

网页模板免费下载

编程电子书

个人主页模板

个人主页源码

导航条代码

网页制作模板

个人网站模板下载

网站源码出售

电影网站源码

导航网站源码

个人网页设计模板

个人博客模板

广告联盟源码

公司网站源码

html代码大全

简单网页模板

企业网页设计模板

网页源代码

论坛源代码

小区物业管理系统

企业网站管理

办公管理系统

网站源码下载

网页游戏源码

学校网站模板

网站源码免费下载

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

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

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

COPYRIGHT 2012-2019 济南朗达信息技术有限公司版权所有鲁ICP备16040249号-5

鲁公网安备 37010202002306号