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); 红色的位置就不对了。。

...全文

995 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 的左上位置