源码提要:
。pageX,pageY 鼠标指针的位置,相对于文档的左边缘;
。parseInt(css(“left”))的left值;
。mousedown、mouseup、mousemove 鼠标事件;
。DOMMouseScroll、onmousewheel 鼠标滚动事件;
源码:
<div class="pic-area" style="position:relative;">
<div class="pic-tool">
<div class="tool-move">
<div class="move-left" id="J-picview-left"></div>
<div class="move-right" id="J-picview-right"></div>
<div class="move-top" id="J-picview-top"></div>
<div class="move-bottom" id="J-picview-bottom"></div>
</div>
<div class="tool-zoom">
<div class="zoom-in" id="J-picview-zoomIn"></div>
<div class="zoom-out" id="J-picview-zoomOut"></div>
</div>
</div>
<img src="media/svg/d.jpg" id="pic-zoom">
</div>
</div>
$(function() {
//鼠标拖动
var _move = false,_x, _y,
$img = $("#pic"),w=$(".pic-area").width(),h=$(".pic-area").height();
$img.mousedown(function(e) {
_move = true;
_x = e.pageX - parseInt($(this).css("left"));//图片距左上角距离
_y = e.pageY - parseInt($(this).css("top"));
return false;
});
$img.mousemove(function(e) {
if (_move) {
var x = e.pageX - _x;
var y = e.pageY - _y;
if(x>0) x=0;
if(x<w-$img.width()){
x=w-$img.width();
}
if(y>0) y=0;
if(y<h-$img.height()){
y=h-$img.height();
}
$img.css({ top: y, left: x });
}
}).mouseup(function() {
_move = false;
});
//鼠标滚轮
if (document.addEventListener) { //firefox
$img[0].addEventListener("DOMMouseScroll", fnMouseWheel);
}
$img[0].onmousewheel = fnMouseWheel; // other browser
function fnMouseWheel(e) {
var evt = e || window.event;
var wheelDelta = evt.wheelDelta || evt.detail; //鼠标滚动值,,火狐3倍数=向下滚动、其他-120倍数=向下滚动
if (wheelDelta == -120 || wheelDelta == 3)//向下
$img.width($img.width()*1.5);
else if (wheelDelta == 120 || wheelDelta == -3)//向上
$img.width($img.width()*0.5);
}
//方向移动
$("#J-picview-right").click(function(){
var x= parseInt($img.css("left"))-20;
if(x<w-$img.width()){
x=w-$img.width();
}
$img.css({left:x});
});
$("#J-picview-left").click(function(){
var x= parseInt($img.css("left"))+20;
if(x>0) x=0;
$img.css({left:x});
});
$("#J-picview-top").click(function(){
var y= parseInt($img.css("top"))-20;
if(y<h-$img.height()){
y=h-$img.height();
}
$img.css({top:y});
});
$("#J-picview-bottom").click(function(){
var y= parseInt($img.css("top"))+20;
if(y>0){
y=0;
}
$img.css({top:y});
});
//放大缩小
$("#J-picview-zoomIn").click(function(){
$img.width($img.width()*1.5);
});
$("#J-picview-zoomOut").click(function(){
$img.width($img.width()*0.5);
});
});