js鼠标控制图片的特效，滚轮控制放大、缩小、鼠标拖动、聚焦。。。
项目需要做一个js控制图片的特效，滚轮控制放大、缩小、鼠标拖动等效果，网上找方法，各种报错、不兼容。。。最终自己研究出一套方案如下：
代码直接从项目中拷了，就不整理格式了
<script type="text/javascript">
//图片特效 by jifei_mei
//图片大小，记录放大或缩小图片前的大小
var pic_size = {
width:0,
height:0
};
//绑定滚轮滚动事件
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', function(event) {
var targetId = $(event.target).attr("id")+'';
if(targetId== 'currentPicture'||targetId=='currentPictureImg'){
decideSignal(event.detail);
}
}, false);
}
window.onmousewheel = document.onmousewheel = function(event) {
event = event || window.event;
var targetId = event.srcElement.id+'';
if(targetId== 'currentPicture'||targetId=='currentPictureImg'){
decideSignal(event.wheelDelta);
}
}
//判断动作方向：0非法、1向上、-1向下
function decideSignal(signal){
var eventSignal = 0;
if(signal==-3||signal==120||signal==360){
eventSignal = 1;
}
if(signal==3||signal==-120||signal==-360){
eventSignal = -1;
}
resizeImage(eventSignal);
}
function resizeImage(eventSignal){
//非法操作！不处理
if(eventSignal==0){
}
var height = $("#currentPictureImg").attr("height");
var width = $("#currentPictureImg").attr("width");
var h = parseInt(height);
var w = parseInt(width);
pic_size = {
width:$("#currentPictureImg").width(),
height:$("#currentPictureImg").height()
};
//放大
if(eventSignal>0){
h += 5;
w += 5;
}
//缩小
if(eventSignal<0){
h -= 5;
w -= 5;
if(h==0){
h = 5;
}
if(w==0){
w = 5;
}
}
//改变图片大小
$("#currentPictureImg").attr("height",h+"%");
$("#currentPictureImg").attr("width",w+"%");
changeImagePositionToOldImageCenter();
}
//使图片中心聚焦到放大前的图片中心
function changeImagePositionToOldImageCenter(){
var left = parseInt($("#currentPictureImg").css('left'));
var top = parseInt($("#currentPictureImg").css('top'));
var height = $("#currentPictureImg").height();
var width = $("#currentPictureImg").width();
left = (pic_size.width-width)/2+left;
top = (pic_size.height-height)/2+top;
$("#currentPictureImg").css({
'left':left+'px',
'top':top+'px'
});
}
//使图片聚焦中间
function changeImagePositionToCenter(){
var height = $("#currentPictureImg").height();//图片宽高
var width = $("#currentPictureImg").width();
var h = $("#currentPicture").height();//图片展示区宽高
var w = $("#currentPicture").width();
var left = (w-width)/2;
var top = (h-height)/2;
$("#currentPictureImg").css({
'left':left+'px',
'top':top+'px'
});
}
//鼠标拖动事件
var isIE = (window.navigator.userAgent.indexOf("IE") == -1) ? false : true;//判断是否是IE
var isIE_8 = -1;
if(navigator.userAgent.indexOf("MSIE")>0){
if((navigator.userAgent.indexOf("MSIE 8.0")>0)||(navigator.userAgent.indexOf("MSIE 9.0")>0 && !window.innerWidth)){
isIE_8 = 8;
}else {
var IE_V = navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")).substring(5,8);
isIE_8 = parseInt(IE_V);
}
}
//判断是否是按下左键(左键拖动有效)
function isLeftButton(btn) {
if(isIE&&isIE_8<=8) {
if(btn == 1)
return true;
else
return false;
} else {
if(btn == 0)
return true;
else
return false;
}
}
var leftMouseDown = false;//是否按下鼠标左键
var pos = {
x:0,
y:0
};
function bind(ev, func) {
if(!window.addEventListener) {
header.attachEvent("on" + ev, func);
} else {
header.addEventListener(ev, func, false);
}
}
//鼠标按下的事件
function mouseDown(event){
event = event || window.event;
if(!isLeftButton(event.button))
return;
leftMouseDown = true;
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnvalue = false;
}
pos = {
x:event.clientX,
y:event.clientY
};
}
//鼠标松开事件
function mouseUp(event){
event = event || window.event;
leftMouseDown = false;
}
//鼠标移动事件
function mouseMove(event){
event = event || window.event;
if(!leftMouseDown)
return;
var left = parseInt($("#currentPictureImg").css('left'));
var top = parseInt($("#currentPictureImg").css('top'));
console.info(left);
left = left+(event.clientX-pos.x);
top = top+(event.clientY-pos.y);
$("#currentPictureImg").css({
'left':left+'px',
'top':top+'px'
});
pos = {
x:event.clientX,
y:event.clientY
};
}
if(isIE){
$("#currentPictureImg").bind( 'mousedown',function(event){
event = event || window.event;
mouseDown(event);
});
$("#currentPictureImg").bind( 'mouseup',mouseUp);
$("#currentPictureImg").bind('mousemove',mouseMove);
}
$("#currentPicture").bind('mousedown',mouseDown);
$("#currentPicture").bind('mouseup',mouseUp);
$("#currentPicture").bind('mousemove',mouseMove);
//导航图标点击事件
$("#moveup").click(function(){
var top = parseInt($("#currentPictureImg").css('top'));
top = top-50;
$("#currentPictureImg").css('top',top+'px');
});
$("#movedown").click(function(){
var top = parseInt($("#currentPictureImg").css('top'));
top = top+50;
$("#currentPictureImg").css('top',top+'px');
});
$("#moveleft").click(function(){
var left = parseInt($("#currentPictureImg").css('left'));
left = left-50;
$("#currentPictureImg").css('left',left+'px');
});
$("#moveright").click(function(){
var left = parseInt($("#currentPictureImg").css('left'));
left = left+50;
$("#currentPictureImg").css('left',left+'px');
});
$("#zoomin").click(function(){
resizeImage(1);
});
$("#zoomout").click(function(){
resizeImage(-1);
});
$("#movecenter").click(function(){
changeImagePositionToCenter();
});
$("#zoomf").click(function(){
$("#currentPictureImg").attr("height","100%");
$("#currentPictureImg").attr("width","100%");
$("#currentPictureImg").css({
'left':'0px',
'top':'0px'
});
});
</script>
<div id="currentPicture" >
<!-- 浮动层导航图标 -->
<div id="myDiv" style="position: absolute;z-index: 999;left:270px;top:90px;">
<table>
<tr><td></td><td><a href="javascript:void(0);" id="moveup"><img src="up.gif"/></a></td><td></td></tr>
<tr><td style="padding-right:4px;"><a href="javascript:void(0);" id="moveleft"><img src="left.gif"/></a></td>
<td><a href="javascript:void(0);" id="movecenter"><img src="zoom.gif"/></a></td>
<td style="padding-left:4px;"><a href="javascript:void(0);" id="moveright"><img src="right.gif"/></a></td>
</tr>
<tr><td></td><td><a href="javascript:void(0);" id="movedown"><img src="down.gif"/></a></td><td></td></tr>
<tr><td></td><td><a href="javascript:void(0);" id="zoomin"><img src="zoom_in.gif"/></a></td><td></td></tr>
<tr><td></td><td><a href="javascript:void(0);" id="zoomf"><img src="zoomf.gif"/></a></td><td></td></tr>
<tr><td></td><td><a href="javascript:void(0);" id="zoomout"><img src="zoom_out.gif"/></a></td><td></td></tr>
</table>
</div>
<img style="position: relative;z-index:-1;cursor:pointer;left:0px;top:0px;" id="currentPictureImg" src="" height="100%" width="100%" onerror="javascript:noPicture(this)" />
</div>
代码有点长╮(╯_╰)╭既然是特效，就要duang嘛，有耐心的测试一下吧！当然还有很多需要优化的地方，目的是为了能看懂
IE、Firefox、chrome、世界之窗没问题
