JavaScript:缩放效果与预期一致
JavaScript:缩放效果与预期一致
提问于 2011-02-17 11:36:38
我的数学很差，所以我不知道需要什么才能让缩放正常工作。您可以看到，第一次单击时，它会按预期方式工作(它会放大到所需的位置)。但是，如果您尝试单击多次，它将不会放大到所需的位置。
以下是代码(也可从http://jsfiddle.net/XVmNU/获得)
<!DOCTYPE HTML>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
overflow: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
(function ($) {
var scale = 1;
$(window).load(function () {
$('img:first').click(function (e) {
scale *= 1.5;
var w = $(this).width(),
h = $(this).height();
var new_w = w * scale,
new_h = h * scale;
var x = e.pageX,
y = e.pageY;
var new_x = Math.round(x / (w / new_w)),
new_y = Math.round(y / (h / new_h));
new_x = (0 - (new_x - x)),
new_y = (0 - (new_y - y));
$(this).animate({
left: new_x,
top: new_y,
width : new_w,
height : new_h
}, 'fast');
});
});
})(jQuery);
</script>
</head>
<body>
<img src="http://www.worldpress.org/images/maps/world_600w.jpg" style="position: absolute; left: 0px; top: 0px;"/>
</body>
</html>回答 1
Stack Overflow用户
发布于 2011-02-17 11:58:20
<!DOCTYPE HTML>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
overflow: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
(function ($) {
var scale = 1;
$(window).load(function () {
$('img:first').click(function (e) {
scale *= 1.5;
var w = $(this).width(),
h = $(this).height();
var new_w = w * scale,
new_h = h * scale;
var x = e.pageX,
y = e.pageY;
var new_x=Math.round([x-($(this).position().left)]*(1-scale)+$(this).position().left),
new_y=Math.round([y-($(this).position().top)]*(1-scale)+$(this).position().top);
$(this).animate({
left: new_x,
top: new_y,
width : new_w,
height : new_h
}, 'fast');
});
});
})(jQuery);
</script>
</head>
<body>
<img src="http://www.worldpress.org/images/maps/world_600w.jpg" style="position: absolute; left: 0px; top: 0px;"/>
</body>
</html>计算new_x和new_y的方法有问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5024817
复制相关文章
相似问题
腾讯云开发者
