js实现div拖动动画运行轨迹效果代码分享
本文实例讲述了js div拖动动画运行轨迹效果。分享给大家供大家参考。具体如下：
这是一款基于js实现的div拖动动画运行轨迹效果源码，是一款原生js div拖动效果制作鼠标拖动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="http://www.jb51.net/" target="_blank">我们</a></p>
</div>
</body>
</html>
以上就是为大家分享的jQuery UI设置固定日期选择代码，希望大家可以喜欢。
相关推荐
-
js实现div在页面拖动效果
本文实例讲述了js实现div在页面拖动效果.分享给大家供大家参考,具体如下: <style type="text/css"> body { margin: 0px; } #div1 { display: none; position: absolute; z-index: 1000; height: 100%; width: 100%; background: #000000; filter:Alpha(opacity=30); } #div2 { display: non
-
js 鼠标拖动对象 可让任何div实现拖动效果
js鼠标拖动对象: 复制代码 代码如下: //定义鼠标拖动对象 drag=function (a,o){ var d=document;if(!a)a=window.event; if(!a.pageX)a.pageX=a.clientX; if(!a.pageY)a.pageY=a.clientY; var x=a.pageX,y=a.pageY; if(o.setCapture) o.setCapture();
-
Javascript实现的类似Google的Div拖动效果代码
复制代码 代码如下: JScript 文件: //检测浏览器 MSIE Firefox var ie=false,moz=false; (function() {//check the browser var userAgent=navigator.userAgent; if(userAgent.indexOf("MSIE")!=-1) ie=true; else if(userAgent.indexOf("Firefox")!=-1) moz=true; })()
-
js实现可拖动DIV的方法
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的 mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如
-
js通过八个点 拖动改变div大小的实现方法
复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resize</title> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRigh
-
js拖动div 当鼠标移动时整个div也相应的移动
HTML代码如下,其中,要拖动的div为最外层的div 复制代码 代码如下: <div id="dialog_createUserGroup" class="dialog_main" style=""> <div id="McreateUserGroup"> <div class="title"> <span class="poptitle"&g
-
javascript div 弹出可拖动窗口
/* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象 参数:id 弹出窗口id: title:弹出窗口标题名称: width:弹出窗口宽度 height:弹出窗口高度 content: 弹出窗口显示内容 2.接口说明: closeDivWindow(id) 关闭窗口 参数: id 弹出窗口id 3.接口说明:setPopupTopTitleFontColor(PopupTopTitleFon
-
JavaScript实现可拖拽的拖动层Div实例
本文实例讲述了JavaScript实现可拖拽的拖动层Div.分享给大家供大家参考.具体如下: 这是一个完美的JS拖拽效果,带拖尾的JavaScript拖动层代码,经过了多次优化修正,复制节点的方法不错,值得JS爱好者学习,同时代码修正了给拖拽元素加ondblclick事件无效的问题,兼容多种浏览器,拷贝代码即可运行使用. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-
利用javascript移动div层-javascript 拖动层
利用javascript移动div层-javascript 拖动层: 程序功能:利用javascript开发在界面上随意拖动以下html code中的div层. javascript移动div层-javascript 拖动层代码-html code: 复制代码 代码如下: <div id="div_Info" style="display: none; dz-index: 101; left: 175px; width: 650px; position: absolut
-
javascript 可以拖动的DIV（二）
function beginDrag(elementToDrag,event) { var =event.clientX-parseInt(elementToDrag.style.left); var deltaY=event.clientY-parseInt(elementToDrag.style.top); //这儿的deltaX/Y实际上就是得出鼠标和div的坐标差. if(document.addEventListener) //之所以在这儿加这样一个判断,是因为IE6和firefox对