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


Posted in Javascript onAugust 27, 2015

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

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

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

<!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=utf-8" />
<title>js div拖动动画运行轨迹效果代码 - 三水点靠木</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>
<center><br>
<div>随意拖动那个小方块几秒钟</div><br>

<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>
</center>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源:<a href="https://3water.com/" target="_blank">三水点靠木</a></p>
</div>

</body>
</html>

以上就是为大家分享的jQuery UI设置固定日期选择代码,希望大家可以喜欢。

Javascript 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
实现一个简单得数据响应系统
Nov 11 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 #Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 #Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 #Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 #Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 #Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 #Javascript
js实现的早期滑动门菜单效果代码
Aug 27 #Javascript
You might like
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
vue如何获取点击事件源的方法
2017/08/10 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
办公室主任岗位职责
2013/11/08 职场文书
社区包粽子活动方案
2014/01/21 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
教师节主持词开场白
2015/05/29 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB