规定区域的JS拖动展示，运行看下效果你就明白了，在指定区域内显示图像，鼠标可以拖动图像查看，自动感应图像边界，非常不错。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>规定区域的JS拖动展示效果</title>
<style>
body{background:#000; }
.box{
width:400px;
height:400px;
border:1px solid #555;
overflow:hidden;
position:relative;
margin:0 auto;
}
.box img{
cursor:move;
position:absolute;
}
</style>
</head>
<body>
<div class="box" id="map">
<img src="images/20071118165814235_2.jpg" alt=""/>
</div>
<script>
function BuleJS(box) {
var _box = document.getElementById(box),el = _box.getElementsByTagName("IMG")[0],
r = el.offsetWidth - _box.offsetWidth,bi = el.offsetHeight - _box.offsetHeight;
function getXY(e) {
return e ? [e.pageX, e.pageY] : [event.clientX, event.clientY]
};
el.onmousedown = function(e) {
var a = getXY(e),b = [el.offsetLeft,el.offsetTop];
this.setCapture ? this.setCapture() : e.preventDefault();
document.onmousemove = function(e) {
var c = getXY(e);
el.style.left = Math.max( - r, Math.min(0, c[0] - a[0] + b[0]));
el.style.top = Math.max( - bi, Math.min(0, c[1] - a[1] + b[1]));
}
};
document.onmouseup = function(e) {
e || el.releaseCapture();
document.onmousemove = null;
}
};
BuleJS('map');
</script>
</body>
</html>
分享到：
相关推荐
规定区域的JS拖动展示效果.rar规定区域的JS拖动展示效果.rar规定区域的JS拖动展示效果.rar规定区域的JS拖动展示效果.rar规定区域的JS拖动展示效果.rar规定区域的JS拖动展示效果.rar
在“JS规定区域的JS拖动展示效果”这个主题中，我们将深入探讨如何使用JavaScript来实现一个在特定区域内允许用户拖动元素的互动功能。 首先，我们需要理解DOM（Document Object Model），它是HTML和XML文档的结构...
66:___规定区域的JS拖动展示效果 67:___超漂亮Js+css图片幻灯切换 68:___马赛克效果的JS图片切换代码 69:___鼠标放到图片上会滑出提示文字 70:___鼠标滑过,缩略图放大显示（纯CSS） 71:___鼠标移上图片，变换出大...
摘要:脚本资源,Ajax/JavaScript,图片拖动 图片在网页指定区域内拖动的JS代码，类似放大的效果，但有本质上的区别。如截图所示，两张图片分别在作者规定的两个方框内拖动，互不干扰，智能判断图片大小，如果拖动到了...
JS实现图片在网页指定区域内拖动的代码，类似放大的效果，但并不是放大，如截图所示，两张图片分别在作者规定的两个方框内拖动，互不干扰，智能判断图片大小，如果拖动到了图片边缘，则不能再拖动了，相信对学习JS的...
标题中的“类似GOOGLE拖动效果”指的是在网页或应用程序中实现的一种交互功能，让用户能够通过鼠标拖动来移动页面上的元素，这种效果在谷歌的一些产品中被广泛使用...实现这种效果通常涉及到JavaScript和CSS...
通过本文提供的示例代码和分析，读者可以学习到如何通过JavaScript实现网页元素的位置控制、事件监听、定时器运用等技术，从而实现小球在页面规定区域内的运动效果。这对于前端开发人员在设计动态网页和交互式界面时...
CSS负责定义页面的基本样式和布局，而JavaScript则负责实现元素的动态拖拽效果。这种布局方式在需要灵活调整页面结构的应用场景中非常实用，例如后台管理系统的界面设计。开发者可以根据实际需求进一步扩展和完善...
如果图片的宽度或高度小于显示区域，那么不允许相应方向的拖动。 接下来，我们关注事件监听。在`<div class="point">`上监听`mousedown`事件，作为拖动的起点。这个点可以是图片上的任意位置，也可以是特定的控制点...
1. **dragbox.js**：这是核心的jQuery插件文件，包含了实现拖拽功能的JavaScript代码。 2. **demo.html** 或 **example.html**：演示如何使用这个插件的示例文件，通常包含了如何引入插件、初始化拖拽功能的代码示例...
"可拖拽的多文件上传.zip"这个压缩包文件，显然提供了一个实现这一功能的解决方案，主要涉及JavaScript（js）和Java技术。其中，jQuery.upload.min.js是一个轻量级的库，用于增强HTML5中的文件上传体验，特别是支持...
通过监听`dragstart`、`dragover`和`drop`等事件，系统可以识别用户何时开始拖动、何时允许拖放到目标区域以及何时完成投放。这种交互方式增强了用户体验，使简历布局调整变得直观简单。 4. **源码组织结构**： - ...
【标题】"js画图工具" 是一个基于jQuery库实现的图形绘制工具，它使得在网页上动态展示和创建图形变得更加便捷。JavaScript是一种强大的客户端脚本语言，常用于增强网页的交互性和动态性，而jQuery作为JavaScript的...
《jQuery-file-upload：实现跨语言的拖拽上传文件功能》 在现代Web开发中，用户交互体验至关重要，其中文件上传是常见的功能之一。jQuery-file-upload是一个强大的jQuery插件，它支持多语言、拖拽上传等多种特性，...
甘特图是一种常用的时间轴表示方法，它通过条形图来显示项目、进度和其他时间相关的系统组件。在软件开发中，甘特图常用于项目管理，帮助团队可视化任务的开始和结束时间，以及它们之间的依赖关系。JavaScript作为...
通过JavaScript的事件监听和处理，可以响应用户的交互，如点击地图上的某个区域获取详细信息，或者通过拖动和缩放改变视角。同时，通过动态数据加载，地图可以实时反映变化的数据，例如全球疫情分布、股票市场波动等...
ControlKit.JS是一个基于JavaScript的库，专门设计用于在网页上创建美观且功能丰富的交互元素，如按钮、滑块和各种指示器。这个库的主要目标是简化网页界面的开发过程，提供一套统一的、易于使用的API，使得开发者...
1. 裁剪区域的自由调整：用户可以通过拖动、缩放、旋转等操作来调整裁剪框。 2. 图像预览：允许用户在裁剪前查看裁剪结果。 3. 支持比例裁剪：可以设定固定的宽高比或自定义裁剪比例。 4. 触摸友好：在移动设备上也...
本文将深入探讨一个名为"active-areas"的实验性框架，该框架专注于为Web应用程序创建一个支持多点触控和可拖动UI组件的简单结构，同时引入了独特的“活动”区域概念。 首先，我们来看"active-areas"的核心功能。这...