jquery 图片缩放拖动的简单实例
本文导语: 一、不使用jquery,简单的缩放: 代码如下: onMouseWheel var count = 10; function Picture() { count = Counting(count); Resize(count); return false; } function Counting(count){ if (event.wheelDelta >= 120) count++; else if (event.wheelDelta 0 || evt.wheelDelta < 0) { ...
一、不使用jquery,简单的缩放:
onMouseWheel
var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta >= 120)
count++;
else if (event.wheelDelta 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");
});
});