<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#drap_div{
width: 200px;
height: 200px;
position: absolute;
right:10px;
bottom: 10px;
background: #eeeeee;
border: 2px #dddddd solid;
}
#drap_tool{
position: absolute;
top:0px;
left: 0px;
background: #cccccc;
width: 10px;
height: 10px;
cursor:nw-resize;
}
</style>
<script>
function init(){
var drop=false;
var drapToolObj=document.getElementById("drap_tool");
var drapDivObj=document.getElementById("drap_div");
var windowWidth=document.body.clientWidth;
var windowHeight=document.body.clientHeight;
var drapObjRight;
var drapObjBottom;
drapToolObj.onmousedown=function(){
drop=true;
drapObjRight=windowWidth-drapDivObj.offsetLeft- drapDivObj.offsetWidth;
drapObjBottom=windowHeight-drapDivObj.offsetTop- drapDivObj.offsetHeight;
};
drapToolObj.onmouseup=function(){
drop=false;
};
document.onmouseup=function(){
drop=false;
};
document.onmousemove=function(e){
var e=e?e:window.event; //IE下事件E不存在，为window.event事件
if(drop){
if(windowWidth-e.clientX-drapObjRight>10 && windowHeight-e.clientY-drapObjBottom>10){
drapDivObj.style.width= windowWidth-e.clientX-drapObjRight+"px";
drapDivObj.style.height= windowHeight-e.clientY-drapObjBottom+"px";
}
}
}
}
</script>
</head>
<body onload="init()">
<div id="drap_div">
<div id="drap_tool"></div>
</div>
</body>
</html>
分享到：
相关推荐
本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能。分享给大家供大家参考，具体如下： 实现效果如下： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
在本文中，我们将深入探讨如何使用JavaScript库JQuery实现图片的放大缩小和拖动功能。JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得前端开发更加高效。在这个项目中，"magnify-...
在Vue.js中实现一个具有放大、缩小和拖拽功能的弹框，主要涉及到自定义指令（Directives）的使用和事件监听。以下是如何利用JavaScript和Vue.js实现这一功能的详细步骤： 1. 首先，在`utils`文件夹下创建一个新的`...
这个项目专注于创建一个可拖拽、放大和缩小的地图功能，让我们深入了解一下这些技术细节。 首先，我们要明白地图的基本原理。地图是通过经纬度坐标系统来定位地球表面的点，而Web上的地图通常是通过切片（tiles）...
总结来说，jQuery idrag插件是一个强大的工具，它使开发者能够快速实现元素的拖动和缩放功能，无需编写复杂的JavaScript代码。通过结合使用其丰富的配置选项和事件系统，你可以构建出高度交互的用户界面，提高用户...
在网页开发中，实现元素的放大、缩小、拖拽和移动功能是常见的需求，这能够增强用户的交互体验，尤其在创建交互式应用或富媒体网站时。本项目通过结合使用drag（拖拽）、jQuery和HTML技术，提供了一种实现此类功能的...
在移动设备上，为了提供更好的用户体验，特别是在处理图像或视图时，双指缩放（Pinch Zoom）和双击放大缩小（Double Tap Zoom）功能是必不可少的。这些手势操作在许多应用程序和网页中被广泛使用，特别是对于查看高...
### js放大缩小拖拽图片（兼容IE、火狐） #### 概述 本文将详细介绍一个JavaScript脚本，该脚本可以实现图片的放大、缩小以及拖拽功能，并且能够兼容Internet Explorer (IE) 和 Firefox 浏览器。通过这个脚本，...
在JavaScript（js）编程中，实现百度地图的放大、缩小和拖拽查看功能是一项常见的需求。这涉及到对百度地图API的深入理解和应用。百度地图API是百度提供的一套用于开发地图应用的JavaScript库，它允许开发者在网页上...
整体而言，微信小程序中实现滑动放大缩小效果需要对swiper组件的布局和样式进行精确控制，并结合JavaScript逻辑代码来实现动态交互。通过上述的实例代码和详细说明，开发者可以掌握如何在自己的小程序中实现这样的...
本教程将介绍如何利用JavaScript库`viewer.js`和CSS文件`viewer.css`来实现这样的功能，使得用户点击图片时能弹出一个可交互的视图窗口，该窗口支持图片的放大、缩小、自由旋转和拖拽。 `viewer.js`是一个轻量级的...
**标题解析：** "H5 PhotoSwipe简单例子 - vue图片拉伸放大缩放例子" 这个标题表明我们要探讨的是一个使用H5技术，并结合PhotoSwipe库实现的Vue.js项目，该项目主要用于处理图片的放大、缩小和拉伸功能。 **描述...
- 在JavaScript中，可以使用以下方式实现SVG元素的手势拖动和放大缩小： ```javascript let startX, startY, currentX, currentY; const svgElement = document.querySelector('svg'); svgElement....
微信开发的时候，在公众号菜单中打开一个H5页面(如：个人中心)，在这个页面上的一些操作，经过多次跳转后，点击左上角的返回按钮，发现会原封不动的返回至上一级页面。 即 公众号菜单->A->B->C，点击返回后，返回了B...
总结来说，"图片放大缩小拖拽查看Demo"是利用PhotoSwipe插件实现的一个优秀的图片浏览解决方案，结合了图片的放大、缩小、拖动等功能，提升了用户在网页中查看图片的体验。对于开发者而言，理解并掌握这一Demo的实现...
"Jquery浮动窗口拖动放大缩小关闭效果"这个主题涉及了几个关键的jQuery功能，包括元素的定位、事件监听、动画效果以及用户交互的增强。 1. **浮动窗口**：浮动窗口通常指的是在网页上可以自由移动的弹出式窗口，如...
图片放大缩小 img { width: 100px; /* 初始化图片大小 */ cursor: zoom-in; /* 添加放大效果的光标 */ } 示例图片"> <script src="expandimg.js"></script> ``` 在这个HTML文件中，我们用`<img>`...
虽然名字相似，但这里可能是误传，因为thumbnailator是Java的一个图片处理库，主要用于生成缩略图，而不是JavaScript的图片放大缩小插件。在JavaScript中，一些流行的图片放大插件包括`lightbox2`、`fancybox`和`...
这个插件专为H5（HTML5）页面设计，目的是为了提供在手机浏览器中对图片的便捷操作，如放大、缩小和拖拽。以下是关于这一主题的详细解释： 1. **HTML5（HyperText Markup Language 5）**：HTML5是HTML的最新版本，...
在这个场景下，"图片放大缩小功能"是ASP应用中的一个关键点，主要用于优化用户在网页上查看图片的体验。 首先，我们要理解图片放大和缩小的基本原理。图片的尺寸通常由宽度和高度的像素值决定。当图片被放大时，...