jquery 图片缩放拖动的简单实例

时间：2021-05-26

一、不使用jquery，简单的缩放：
复制代码 代码如下:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>onMouseWheel</TITLE>
<SCRIPT>
var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta >= 120)
count++;
else if (event.wheelDelta <= -120)
count--;
return count;
}
function Resize(count){
oImage.style.zoom = count + '0%';
oCounter.innerText = count + '0%';
}
</SCRIPT>
</HEAD>
<BODY>
<div align=center>
<span style="font-weight:bold">Size =
<span id="oCounter" style="color:red;">100%</span></span>
<img id="oImage" src="images/aaa.gif" onmousewheel="return Picture();" >
</div>
</BODY>
</HTML>

一、使用jquery，实现缩放和拖动：
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#imgBox
{
width: 200px;
height: 200px;
background: red;
overflow: hidden;
margin: auto;
position: relative;
}
#imgMain
{
position: relative;
top: -200px;
}
</style>
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
var event;
if ($.browser.mozilla) {
event = "DOMMouseScroll";
}
else {
event = "mousewheel";
}
$("#divBlock").bind(event,
function (e) {
var evt = window.event || e;
var newWidth;
var newHeight;
var newLeft;
var newTop;
var overHeight = $("#divBlock").height();
if (evt.detail > 0 || evt.wheelDelta < 0) {
newWidth = $("#imgMain").width() - 20;
newHeight = $("#imgMain").height() - 20;
newLeft = $("#imgMain").position().left + 10;
newTop = $("#imgMain").position().top + 10 - overHeight;
}
else {
newWidth = $("#imgMain").width() + 20;
newHeight = $("#imgMain").height() + 20;
newLeft = $("#imgMain").position().left - 10;
newTop = $("#imgMain").position().top - 10 - overHeight;
}

$("#imgMain").css({ left: newLeft + "px", top: newTop + "px" });

$("#imgMain").width(newWidth);
$("#imgMain").height(newHeight);
}
);

$("#divBlock").bind("mousedown", function (e) {
var xo = e.pageX;
var yo = e.pageY;
var imgLeft = $("#imgMain").position().left;
var imgTop = $("#imgMain").position().top;
var overHeight = $("#divBlock").height();
$("#divBlock").bind("mousemove", function (e) {

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var x = e.pageX;
var y = e.pageY;

var bX = $("#imgBox").offset().left;
var bY = $("#imgBox").offset().top;

$("#imgMain").css("left", x - bX - (xo - bX) + imgLeft);
$("#imgMain").css("top", y - bY - (yo - bY) - overHeight + imgTop);
});

});

$("#divBlock").bind("mouseup mouseout", function () {
$("#divBlock").unbind("mousemove");
});

});
</script>
</head>
<body>
<div id="imgBox">
<div style="width: 200px; height: 200px; cursor: pointer; position: relative; left: 0;
top: 0; filter: alpha(opacity=0); opacity: 0; -moz-opacity: 0; background: blue;
z-index: 999;" id="divBlock">
</div>
<img src="test.jpg" width="200" height="200" alt="" id="imgMain" />
</div>
</body>
</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章