JavaScript拖动层和缩放层(完美版)
<!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>Js层拖动 - www.codefans.net</title>
<style>
*{margin:0;padding:0;}
#zhezhao{
width:100%;
height:100%;
background:#f00;
filter:alpha(opacity:0);
opacity:0;
z-index:9999;
position:absolute;
top:0;
left:0;
display:none;
}
#div2{
width:200px;
height:200px;
position:relative;
background:#EEEEEE;
border:1px solid #f00;
}
#div1{
width:15px;
height:15px;
background:#99CC00;
position:absolute;
right:0px;
bottom:0px;
cursor:nw-resize;
overflow:hidden;
font-size:12px;
text-align:center;
line-height:15px;
color:#FFFFFF;
float:right;
z-index:3;
}
#right{
width:15px;
height:100%;
background:#f00;
float:right;
position:absolute;
right:0;
top:0;
cursor:e-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#bottom{
width:100%;
height:15px;
background:#f00;
position:absolute;
left:0;
bottom:0;
cursor:n-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#div2 p{
padding:10px;
line-height:24px;
font-size:13px;
text-indent:24px;
color:#996600;
}
#div2 h2{
width:100%;
height:25px;
line-height:25px;
font-size:14px;
background:#CC9900;
color:#FFFFFF;
text-indent:15px;
cursor:move;
overflow:hidden;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var zhezhao=document.getElementById("zhezhao");
var h2=oDiv2.getElementsByTagName("h2")[0];
var right=document.getElementById("right");
var bottom=document.getElementById("bottom");
var mouseStart={};
var divStart={};
var rightStart={};
var bottomStart={};
//往右拽
right.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
rightStart.x=right.offsetLeft;
if(right.setCapture)
{
right.onmousemove=doDrag1;
right.onmouseup=stopDrag1;
right.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag1,true);
document.addEventListener("mouseup",stopDrag1,true);
}
};
function doDrag1(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+rightStart.x;
var w=l+oDiv.offsetWidth;
if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
oDiv2.style.width=w+"px";
};
function stopDrag1()
{
if(right.releaseCapture)
{
right.onmousemove=null;
right.onmouseup=null;
right.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag1,true);
document.removeEventListener("mouseup",stopDrag1,true);
}
};
//往下拽
bottom.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
bottomStart.y=bottom.offsetTop;
if(bottom.setCapture)
{
bottom.onmousemove=doDrag2;
bottom.onmouseup=stopDrag2;
bottom.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag2,true);
document.addEventListener("mouseup",stopDrag2,true);
}
};
function doDrag2(ev)
{
var oEvent=ev||event;
var t=oEvent.clientY-mouseStart.y+bottomStart.y;
var h=t+oDiv.offsetHeight;
if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}
oDiv2.style.height=h+"px";
};
function stopDrag2()
{
if(bottom.releaseCapture)
{
bottom.onmousemove=null;
bottom.onmouseup=null;
bottom.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag2,true);
document.removeEventListener("mouseup",stopDrag2,true);
}
};
//往左右同时拽
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv.offsetLeft;
divStart.y=oDiv.offsetTop;
if(oDiv.setCapture)
{
oDiv.onmousemove=doDrag;
oDiv.onmouseup=stopDrag;
oDiv.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag,true);
document.addEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='block';
};
function doDrag(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;
var w=l+oDiv.offsetWidth;
var h=t+oDiv.offsetHeight;
if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}
oDiv2.style.width=w+"px";
oDiv2.style.height=h+"px";
};
function stopDrag()
{
if(oDiv.releaseCapture)
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
oDiv.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag,true);
document.removeEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='none';
};
//h2完美拖拽
h2.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv2.offsetLeft;
divStart.y=oDiv2.offsetTop;
if(h2.setCapture)
{
h2.onmousemove=doDrag3;
h2.onmouseup=stopDrag3;
h2.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag3,true);
document.addEventListener("mouseup",stopDrag3,true);
}
zhezhao.style.display='block';
};
function doDrag3(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv2.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv2.offsetHeight;
}
oDiv2.style.left=l+"px";
oDiv2.style.top=t+"px";
};
function stopDrag3()
{
if(h2.releaseCapture)
{
h2.onmousemove=null;
h2.onmouseup=null;
h2.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag3,true);
document.removeEventListener("mouseup",stopDrag3,true);
}
zhezhao.style.display='none';
}
};
</script>
</head>
<body>
<div id="div2">
<div style="width:100%; height:100%; overflow:hidden;">
<h2>完美的拖拽</h2>
<p>体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩小。想使用的朋友，可将代码里的Js封装成类，从外部引入想必更合理些。'</p>
<div id="right"></div>
<div id="div1">拖</div>
<div id="bottom"></div>
</div>
</div>
<div id="zhezhao"></div>
</body>
</html>
分享到：
相关推荐
49:___按比例缩放图片，JavaScript代码 50:___最简的JavaScript鼠标经过切换图片 51:___有点炫的JavaScript立体图片展示 52:___根据鼠标放上切换内容制作的图片导航 53:___浮动的图片广告 54:___清爽简洁的图片交替...
微信小程序提供了触屏事件API，开发者需要将这些事件与Three.js中的对象绑定，实现用户与3D场景的互动，例如点击、拖动、缩放等操作。 最后，动画和实时更新是提升用户体验的重要手段。Three.js提供了动画系统，...
105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106. 推荐jQuery实用缩略图广告效果插件下载 107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅...
首先，jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。在这个图片墙效果中，jQuery负责处理用户与图片的交互，如拖动和点击事件，以及触发图片的动态效果，如...
这个完美压缩的版本确保了开发者可以离线访问这些文档，无需依赖网络连接，大大提高了学习和查阅的效率。只需30分钟，初学者就能快速掌握基本的API用法，开始构建自己的地图应用。 1. **Google Map API简介**：...
在`camera.swf`中，这一功能可能是通过计算并应用缩放因子来实现的，缩放因子保持宽度和高度的比例一致。这对于保持图像的视觉完整性至关重要，特别是在处理具有特定宽高比的图像时。 接下来，图片截取通常涉及选择...
ArcGIS JavaScript API v4.1 是Esri公司提供的一款强大的Web地图开发工具，它允许开发者构建交互式的地图应用程序，将地理信息与Web技术完美融合。这个压缩包“arcgis_js_v41_api.zip”包含了API的所有核心组件和...
在3D元素周期表中，JQuery被用来处理用户的交互事件，如鼠标点击、滚动和拖拽，使得用户可以自由旋转、放大周期表，仿佛亲手操作一个真实的化学实验室模型。同时，JQuery的动画效果使得元素周期表的转换流畅自然，...
这个压缩包 "amcharts_4.5.15.zip" 包含的是 AmCharts 的官方最新版本 4.5.15，该版本经过了特别处理，完美地移除了左下角的 logo，使得在使用过程中不会出现任何第三方品牌标识，提供了一个更为纯净的展示环境。...
在压缩包"AnyChart-7.11.0"中，包含了该版本的完整资源，包括JavaScript库、示例代码、文档和可能的更新工具，帮助开发者快速上手并充分利用AnyChart的强大功能。无论是初学者还是经验丰富的开发人员，都可以借助...
首先我们了解一下两个主要用到的JavaScript库：jcrop和FileAPI。 jQuery插件jcrop是一个功能强大的图片裁剪工具，它允许用户在页面上定义一个裁剪区域，并通过用户交互来裁剪图片。jcrop提供了丰富的API来调整裁剪...
在Focusky中，用户可以自由设计演示路径，每个关键点都可以作为一个独立的幻灯片，通过拖拽和缩放，可以实现类似地球仪的360度旋转效果。这种设计方式使得内容呈现更加灵活，打破了PPT中固定页码的限制，让演示变得...
《jQuery UI Map 3.0 RC：移动与谷歌地图的完美结合》 在现代Web开发中，交互性和用户体验是至关重要的。jQuery作为一个强大的JavaScript库，极大地简化了DOM操作，事件处理，动画效果等功能，而jQuery UI则进一步...
3. **交互功能**：包括拖拽、缩放、旋转、连接线动态调整等，体现了AntV X6在交互设计上的强大能力。 4. **布局算法**：内置了多种布局算法，如树形布局、力引导布局等，适用于不同复杂度的数据结构展示。 5. **...
`react-googlemap-react`就是这样一款库，它允许开发者将Google Maps与React组件完美结合，实现高度自定义的地图交互体验。这款库的核心特性在于其能够直接在谷歌地图上渲染React组件，极大地扩展了地图的可定制性。...
8. **脚本支持**：NGUI与Unity的内置脚本系统完美融合，可以使用C#或JavaScript（UnityScript）编写控制逻辑。 9. **UI布局**：NGUI提供了多种布局模式，如网格布局、垂直布局、水平布局等，使得UI设计更加灵活。 ...
1. **用户友好的界面**：Django-croppie使用Croppie的交互式UI，允许用户通过拖动和缩放选择他们想要保留的图片区域，提供了直观的裁剪体验。 2. **灵活性**：Django-croppie支持自定义配置，如设定裁剪区域的大小...
2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 ...
而CocosHammer.js则是Cocos2d-x与Hammer.js的完美结合，旨在为开发者提供更加便捷、丰富的触摸事件处理能力。本文将深入探讨CocosHammer.js的核心功能、使用方法以及实际应用。 一、CocosHammer.js的诞生背景 ...
在“百度离线资源js2.0”中，它表明了该离线包已对Vue.js进行了适配，这意味着开发者可以在Vue项目中无缝集成百度地图，实现地图功能与Vue应用的完美结合。 关于百度地图JavaScript API 2.0，其主要特性包括： 1. ...