transform: scale(0.8,0.8) 缩放后,怎么计算拖动的鼠标值?

rao3324180 2015-08-04 04:22:31
<!doctype html>

<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<meta charset="utf-8" />
<style type="text/css">
body,html{ height:100%; }
*{margin: 0;padding: 0;}
.wrap{ width: 500px;height:100%; position: relative;margin: 0 auto;background: blue;transform: scale(0.8,0.8);}
.box{ position: absolute;top:0;left:0; background: red;width: 200px;height: 200px; }
</style>
</head>
<body>

<div class="wrap">
<div class="box"></div>
</div>

<script type="text/javascript">
var element = $(".box") , e = $(".wrap");
var startX = 0, startY = 0, posY = 0, posX = 0;
e.on("mousedown", function (event) {
startX = event.clientX - e.offset().left;
startY = event.clientY - element.offset().top;
element.css({
left : startX
})
console.log(startX)

// console.log(event.clientX-(e.offset().left+100))

});
$(document).on("mousemove", function (event) {
if (startX || startY) {

}

});
$(document).on("mouseup", function () {
//startX = 0;
//startY = 0;
});

</script>

</body>
</html>

正常应该是鼠标光标点到哪里 红色的left值应该就是光标的坐标才对。。但是现在我设置了transform: scale(0.8,0.8); 红色的位置就不对了。。
...全文
979 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
香烟啤酒饮料 2019-01-15
  • 打赏
  • 举报
回复
<!doctype html> <html> <head> <title></title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script> <meta charset="utf-8" /> <style type="text/css"> body,html{ height:100%; } *{margin: 0;padding: 0;} .wrap{ width: 500px;height:100%; position: relative;margin: 0 auto;background: blue; transform: scale(0.2,0.2); overflow: ss;} .box{ position: absolute;top:0;left:0; background: red;width: 200px;height: 200px; } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> <script type="text/javascript"> var element = $(".box") , e = $(".wrap"); var startX = 0, startY = 0, posY = 0, posX = 0; e.on("mousedown", function(event) { startX = event.clientX - e.offset().left; startY = event.clientY - e.offset().top; element.css({ left : startX/ 0.2, top: startY/0.2 }); document.onmousemove = function(event) { startX = event.clientX - e.offset().left; startY = event.clientY - e.offset().top; element.css({ left : startX/ 0.2, top: startY/0.2 }); }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }); </script> </body> </html>
香烟啤酒饮料 2019-01-15
  • 打赏
  • 举报
回复
实现 缩放情况下的 拖拽 <!doctype html> <html> <head> <title></title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script> <meta charset="utf-8" /> <style type="text/css"> body,html{ height:100%; } *{margin: 0;padding: 0;} .wrap{ width: 500px;height:100%; position: relative;margin: 0 auto;background: blue; transform: scale(0.2,0.2)} .box{ position: absolute;top:0;left:0; background: red;width: 200px;height: 200px; } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> <script type="text/javascript"> var element = $(".box") , e = $(".wrap"); var startX = 0, startY = 0, posY = 0, posX = 0; e.on("mousedown", function(event) { startX = event.clientX - e.offset().left; startY = event.clientY - e.offset().top; element.css({ left : startX/ 0.8, top: startY/0.8 }); document.onmousemove = function(event) { startX = event.clientX - e.offset().left; startY = event.clientY - e.offset().top; element.css({ left : startX/ 0.2, top: startY/0.2 }); }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }); </script> </body> </html>
香烟啤酒饮料 2019-01-15
  • 打赏
  • 举报
回复
e.on("mousedown", function(event) { startX = event.clientX - e.offset().left; startY = event.clientY - e.offset().top; element.css({ left : startX/ 0.8, top: startY/0.8 }); console.log(startX,startY); // console.log(event.clientX-(e.offset().left+100)) }); 现在 你能够实现点击点 为box 的左上位置
zhangyxh 2015-08-04
  • 打赏
  • 举报
回复
startX = (event.clientX - e.offset().left)/0.8; 即可

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧