<!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>
<script type="text/javascript">
function Drag()
{
//初始化
this.initialize.apply(this, arguments)
}
Drag.prototype = {
//初始化
initialize : function (drag, options)
{
this.drag = this.$(drag);
this._x = this._y = 0;
this._moveDrag = this.bind(this, this.moveDrag);
this._stopDrag = this.bind(this, this.stopDrag);
this.setOptions(options);
this.handle = this.$(this.options.handle);
this.maxContainer = this.$(this.options.maxContainer);
this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;
this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;
this.limit = this.options.limit;
this.lockX = this.options.lockX;
this.lockY = this.options.lockY;
this.lock = this.options.lock;
this.onStart = this.options.onStart;
this.onMove = this.options.onMove;
this.onStop = this.options.onStop;
this.handle.style.cursor = "move";
this.changeLayout();
this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag))
},
changeLayout : function ()
{
this.drag.style.top = this.drag.offsetTop + "px";
this.drag.style.left = this.drag.offsetLeft + "px";
this.drag.style.position = "absolute";
this.drag.style.margin = "0"
},
startDrag : function (event)
{
var event = event || window.event;
this._x = event.clientX - this.drag.offsetLeft;
this._y = event.clientY - this.drag.offsetTop;
this.addHandler(document, "mousemove", this._moveDrag);
this.addHandler(document, "mouseup", this._stopDrag);
event.preventDefault && event.preventDefault();
this.handle.setCapture && this.handle.setCapture();
this.onStart()
},
moveDrag : function (event)
{
var event = event || window.event;
var iTop = event.clientY - this._y;
var iLeft = event.clientX - this._x;
if (this.lock) return;
this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > this.maxTop && (iTop = this.maxTop), iLeft > this.maxLeft && (iLeft = this.maxLeft));
this.lockY || (this.drag.style.top = iTop + "px");
this.lockX || (this.drag.style.left = iLeft + "px");
event.preventDefault && event.preventDefault();
this.onMove()
},
stopDrag : function ()
{
this.removeHandler(document, "mousemove", this._moveDrag);
this.removeHandler(document, "mouseup", this._stopDrag);
this.handle.releaseCapture && this.handle.releaseCapture();
this.onStop()
},
//参数设置
setOptions : function (options)
{
this.options =
{
handle: this.drag, //事件对象
limit: true, //锁定范围
lock: false, //锁定位置
lockX: false, //锁定水平位置
lockY: false, //锁定垂直位置
maxContainer: document.documentElement || document.body, //指定限制容器
onStart: function () {}, //开始时回调函数
onMove: function () {}, //拖拽时回调函数
onStop: function () {} //停止时回调函数
};
for (var p in options) this.options[p] = options[p]
},
//获取id
$ : function (id)
{
return typeof id === "string" ? document.getElementById(id) : id
},
//添加绑定事件
addHandler : function (oElement, sEventType, fnHandler)
{
return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
},
//删除绑定事件
removeHandler : function (oElement, sEventType, fnHandler)
{
return oElement.removeEventListener ? oElement.removeEventListener(sEventType, fnHandler, false) : oElement.detachEvent("on" + sEventType, fnHandler)
},
//绑定事件到对象
bind : function (object, fnHandler)
{
return function ()
{
return fnHandler.apply(object, arguments)
}
}
};
//应用
window.onload = function ()
{
var oBox = document.getElementById("box");
var oTitle = document.getElementById("canvas");
var oDrag = new Drag(oBox, {handle:oTitle, limit:false});
var aInput = document.getElementsByTagName("input");
};
</script>
</head>
<body>
<div id="box" style="background:lightblue;padding:5px;margin:50px;border:1px solid #f60;">
<canvas id="canvas" width="4000" height="300">
</canvas>
</div>
</body>
</html>
分享到:
相关推荐
基于HTML5 Canvas绘制的线条平移科技背景特效源码.zip
主要介绍了通过HTML5 Canvas实现图片的平移及旋转变化的方法,其中旋转讲解的是配合平移坐标系确定圆心位置而进行的顺时针旋转,需要的朋友可以参考下
208 4.7 以图像制作动画 211 4.8 图像绘制的安全问题 216 4.9 性能 216 4.9.1 对比drawimage(htmlimage)、drawimage(htmlcanvas)与putimagedata()的绘图效率 217 4.9.2 在canvas中绘制另一个canvas与绘制普通...
HTML5之纯canvas实现转盘游戏,用到了canvas的旋转,平移,叠加,清除
HTML5 Canvas中提供了实现图形平移,旋转,放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变成(-x, -y) 图示如下: 任何原来的坐标点p(ox, oy)在translate...
3.1.2 平移 / 53 3.1.3 旋转 / 54 3.1.4 利用transform矩阵实现多样化的变形 / 56 3.2 图形的渲染 / 65 3.2.1 绘制颜色渐变效果的图形 / 65 3.2.2 颜色合成之globalcompositeoperation属性 / 67 3.2.3 颜色...
HTML5 Canvas万花筒旋转特效是一款类似万花筒旋转缩放,就像旋转楼梯一样,效果特别棒。
jQuery Panzoom是一款非常实用的HTML DOM元素平移和缩放jQuery和...Panzoom利用CSS transforms 和 matrix函数来为浏览器进行硬件(GPU)加速,它可以支持任何元素的平移和缩放:图片、视频、iframe、canvas或文本等等。
HTML5线条平移科技背景特效是一款基于HTML5 Canvas绘制的倾斜方块线条平移动画,橙色科技背景动画特效。
无限画布无限的html5画布描述提供一个接口,以垂直和水平无限地平移html5画布。 这通过创建无限增长的缓冲画布来工作,当使用.move([x, y])相对移动原点或绝对使用.setOrigin([x, y])相对移动原点时,可以调整画布的...
imageResizer是一款基于canvas的jQuery图片剪裁插件。它使用简单,可以基于HTML5 canvas实现图片的平移和剪裁。
本文写一个html5的时钟应用程序试手主要设置了坐标变换的平移(translate)和旋转变换(ratate),以及html5 Canvas的路径绘图,beginPath,closePath,rect,arc等多的也不说了,直接上代码有需要的朋友可以参考下
由于直接操作,因此很容易学习:单击并拖动以平移(平移),旋转轮子以缩放(缩放),或使用触摸。 平移和缩放在基于Web的地图中广泛使用,但也可以与时间序列和散点图等可视化一起使用。 d3-zoom实现的缩放行为是...
哈哈哈俺又来啦,这次带来的是canvas实现一些画布功能的文章,希望大家喜欢!...采用的是 canvas 绘制画笔,由css3的 transform 属性来进行平移与缩放,之后再详细介绍介绍 (希望大家可以留下宝贵的赞与star嘻嘻
HTML5-Image-Panner 来自 Core HTML5 Canvas 的 HTML5 Image Panner 应用程序,由 Prentice-Hall 于 2012 年发布。 ![屏幕截图] ( )