<!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"> ...
"基于vue图片拖拽放大缩小查看npm包" 提供了解决这个问题的一个解决方案。这个npm包可能是专为Vue项目设计的，允许用户对图片进行拖动、缩放以及查看等操作，提升了用户体验。 在Vue项目中，使用这样的npm包可以...
在本文中，我们将深入探讨如何使用JavaScript库JQuery实现图片的放大缩小和拖动功能。JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得前端开发更加高效。在这个项目中，"magnify-...
在Vue.js中实现一个具有放大、缩小和拖拽功能的弹框，主要涉及到自定义指令（Directives）的使用和事件监听。以下是如何利用JavaScript和Vue.js实现这一功能的详细步骤： 1. 首先，在`utils`文件夹下创建一个新的`...
在实现拉框放大缩小功能时，通常会监听鼠标的`mousedown`、`mousemove`和`mouseup`事件。当鼠标按下时，记录下起始位置；鼠标移动时，根据移动的坐标更新矩形的大小；鼠标释放时，根据矩形的大小来调整地图的视图...
这个项目专注于创建一个可拖拽、放大和缩小的地图功能，让我们深入了解一下这些技术细节。 首先，我们要明白地图的基本原理。地图是通过经纬度坐标系统来定位地球表面的点，而Web上的地图通常是通过切片（tiles）...
总结来说，jQuery idrag插件是一个强大的工具，它使开发者能够快速实现元素的拖动和缩放功能，无需编写复杂的JavaScript代码。通过结合使用其丰富的配置选项和事件系统，你可以构建出高度交互的用户界面，提高用户...
本篇文章将深入探讨如何使用Raphaël来创建一个可拖动并能自由放大缩小的大括号，即花括号。 首先，我们需要了解Raphaël的基本概念。Raphaël基于SVG（Scalable Vector Graphics）和VML（Vector Markup Language）...
在网页开发中，实现元素的放大、缩小、拖拽和移动功能是常见的需求，这能够增强用户的交互体验，尤其在创建交互式应用或富媒体网站时。本项目通过结合使用drag（拖拽）、jQuery和HTML技术，提供了一种实现此类功能的...
在移动设备上，为了提供更好的用户体验，特别是在处理图像或视图时，双指缩放（Pinch Zoom）和双击放大缩小（Double Tap Zoom）功能是必不可少的。这些手势操作在许多应用程序和网页中被广泛使用，特别是对于查看高...
### js放大缩小拖拽图片（兼容IE、火狐） #### 概述 本文将详细介绍一个JavaScript脚本，该脚本可以实现图片的放大、缩小以及拖拽功能，并且能够兼容Internet Explorer (IE) 和 Firefox 浏览器。通过这个脚本，...
在JavaScript（js）编程中，实现百度地图的放大、缩小和拖拽查看功能是一项常见的需求。这涉及到对百度地图API的深入理解和应用。百度地图API是百度提供的一套用于开发地图应用的JavaScript库，它允许开发者在网页上...
整体而言，微信小程序中实现滑动放大缩小效果需要对swiper组件的布局和样式进行精确控制，并结合JavaScript逻辑代码来实现动态交互。通过上述的实例代码和详细说明，开发者可以掌握如何在自己的小程序中实现这样的...
在IT行业中，"gallery放大缩小拖拽"是一个常见的交互功能，尤其在图像展示或应用界面设计中非常实用。这个功能允许用户通过双击或者手势操作来改变图片的大小，并且可以自由地在屏幕上移动图片的位置，提升用户体验...
本教程将介绍如何利用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...
"JQuery点击放大缩小图片并可左右滑动"这个功能就是一个典型的例子，它使得用户可以更方便地查看和浏览网页中的图片，同时也增加了页面的互动性和视觉吸引力。 JQuery是一个广泛使用的JavaScript库，它简化了DOM...
总结来说，"图片放大缩小拖拽查看Demo"是利用PhotoSwipe插件实现的一个优秀的图片浏览解决方案，结合了图片的放大、缩小、拖动等功能，提升了用户在网页中查看图片的体验。对于开发者而言，理解并掌握这一Demo的实现...