js div控制器 鼠标拖动div控制点 实现旋转、缩放、移动

来源：蜘蛛抓取(WebSpider) 时间：2017-11-14 04:08 标签： div 可拖动
当前位置浏览文章
在做项目的时候会有一个弹出窗填写一些资料，在我们想修改这些列表中的内容的时候就会点击弹出框来修改内容，有时候我们一打开就有可能忘记我们要修改那个内容了，这时候就会想看看之前的内容的时候，又要关掉弹出框，这样会有点麻烦，这个时候我们可以给弹出框的div做一个鼠标拖动的效果，废话太多了，看下面的吧：）html：
&div class="divBody" id="divBody" style="left: 29 top: 14"&
&div class="divHead" id="divHead" style="cursor:"&&/div&
&div class="content"&&/div&
&div class="tail"&&/div&
fdiv = document.getElementById("divBody");
document.getElementById("divHead").onmousedown=function(e)
if(!e) e = window. //IE
posX = e.clientX - parseInt(fdiv.style.left);
posY = e.clientY - parseInt(fdiv.style.top);
document.onmousemove =
document.onmouseup = function()
document.onmousemove =
function mousemove(ev)
if(ev==null) ev = window.//IE
fdiv.style.left = (ev.clientX - posX) + "px";
fdiv.style.top = (ev.clientY - posY) + "px";
margin-top:20
border: solid #CCC 1
height:400
z-index:0;
margin-left:
margin-right:
background-color:#CCC;
height:300
background:#CCC;
display:table-
vertical-align:这是用js实现按下鼠标对div进入放大缩小拖拽特效特效，可以对div进行移动或拖动放大或缩小，非常好看，兼容IE，FF火狐浏览器等
上编：下编：
本月热门的内容
1 2 3 4 5 6 7 8 9 10
最近更新的内容js实现鼠标拖动功能
字体：[ ] 类型：转载 时间：
本文主要介绍了js实现鼠标拖动功能的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
代码如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
width: 200
height: 200
background:
width: 200
height: 200
background:
&div id="div"&
&div id="div2"&&/div&
window.onload=function(){
var div=document.getElementById("div");
div.onmousedown=function(ev){
var e=window.event ||
//var Mydiv=document.getElementById("div");
//获取到鼠标点击的位置距离div左侧和顶部边框的距离；
var oX=e.clientX-div.offsetL
var oY=e.clientY-div.offsetT
//当鼠标移动，把鼠标的偏移量付给div
document.onmousemove=function(ev){
//计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给DIV的左边距和上边距，div就会跟着移动
var e=window.event||
div.style.left=e.clientX-oX+"px";
div.style.top=e.clientY-oY+"px";
//当鼠标按键抬起，清除移动事件
document.onmouseup=function(){
document.onmousemove=
document.onmouseup=
var div2=document.getElementById("div2");
div2.onmousedown=function(ev){
var e=window.event ||
//var Mydiv=document.getElementById("div");
//获取到鼠标点击的位置距离div左侧和顶部边框的距离；
var oX=e.clientX-div2.offsetL
var oY=e.clientY-div2.offsetT
//当鼠标移动，把鼠标的偏移量付给div
document.onmousemove=function(ev){
//计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给DIV的左边距和上边距，div就会跟着移动
var e=window.event||
div2.style.left=e.clientX-oX+"px";
div2.style.top=e.clientY-oY+"px";
//当鼠标按键抬起，清除移动事件
document.onmouseup=function(){
document.onmousemove=
document.onmouseup=
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具当前位置 :
0粉丝/0关注
举报原因：
&&垃圾广告
&&淫秽色情
&&虚假中奖
&&敏感信息
&&人身攻击
&&骚扰他人
下载该资源用户也下载了
使用邮箱登录17素材js实现div跟谁鼠标悬浮移动显示
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&
border:1px solid #000000;
background:#99ff33;
z-index:9;
line-height:17
text-align:
&SCRIPT LANGUAGE="JavaScript"&
function showme(){
var oSon = window.document.getElementById("hint");
if (oSon == null)
with (oSon){
innerText = guoguo.
style.display = "block";
style.pixelLeft = window.event.clientX + window.document.body.scrollLeft + 6;
style.pixelTop = window.event.clientY + window.document.body.scrollTop + 9;
function hidme(){
var oSon = window.document.getElementById("hint");
if(oSon == null)
oSon.style.display="none";
&text id="guoguo" value="ga"&
&a href="#" onmouseover="showme()" onmouseout="hidme()" onmousemove="showme()"&dfdfd&/a&&br&&br&&br&&br&&br&&a href="#" onmouseover="showme()" onmouseout="hidme()" onmousemove="showme()"&dfdfd&/a&&br&&br&&br&&br&&a href="#" onmouseover="showme()" onmouseout="hidme()" onmousemove="showme()"&dfdfd&/a&&br&&br&&br&&a href="#" onmouseover="showme()" onmouseout="hidme()" onmousemove="showme()"&dfdfd&/a&&br&&br&&a href="#" onmouseover="showme()" onmouseout="hidme()" onmousemove="showme()"&dfdfd&/a&&br&&a href="#" onmouseover="showme()" onmouseout="hidme()" onmousemove="showme()"&dfdfd&/a&&br&
&div id="hint" style="display:none"&&/div&
浏览 14761
浏览: 424114 次
来自: 上海
请问这样做的意义何在？
学习了哦！！！
学习了，感谢分享
哥们，给了思路，赞一个。
public static boolean isVa ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'

我要回帖

更多关于 div 可拖动 的文章

 

随机推荐