首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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设置固定日期选择代码，希望大家可以喜欢。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
Javascript 二维数组
Nov 26 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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
台湾购物网站(77) 日本购物网站(72) 澳大利亚购物网站(309) 印尼购物网站(37) 墨西哥购物网站(16) 马来西亚购物网站(41) 俄罗斯购物网站(137) 埃及购物网站(2) 法国购物网站(144) 印度购物网站(45)
You might like
php 中文和编码判断代码
2010/05/16 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
js实现鼠标左右移动，图片也跟着移动效果
2017/01/25 Javascript
Bootstrap警告（Alerts）的实现方法
2017/03/22 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
react的hooks的用法详解
2020/10/12 Javascript
用Python中的字典来处理索引统计的方法
2015/05/05 Python
一个基于flask的web应用诞生 记录用户账户登录状态（6）
2017/04/11 Python
简单谈谈Python中的元祖（Tuple）和字典（Dict）
2017/04/21 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
python求前n个阶乘的和实例
2020/04/02 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
农村产权制度改革实施方案
2014/03/21 职场文书
元旦趣味活动方案
2014/08/22 职场文书
琅琊山导游词
2015/02/05 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
《藏戏》教学反思
2016/02/23 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python