項目需要做一個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);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="moveup"><img src="up.gif"/></a></td><td></td></tr>
<tr><td style="padding-right:4px;"><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="moveleft"><img src="left.gif"/></a></td>
<td><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="movecenter"><img src="zoom.gif"/></a></td>
<td style="padding-left:4px;"><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="moveright"><img src="right.gif"/></a></td>
</tr>
<tr><td></td><td><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="movedown"><img src="down.gif"/></a></td><td></td></tr>
<tr><td></td><td><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="zoomin"><img src="zoom_in.gif"/></a></td><td></td></tr>
<tr><td></td><td><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="zoomf"><img src="zoomf.gif"/></a></td><td></td></tr>
<tr><td></td><td><a href="javascript:void(0);" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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%" οnerrοr="javascript:noPicture(this)" />
</div> 代碼有點長╮(╯_╰)╭既然是特效，就要duang嘛，有耐心的測試一下吧！當然還有很多需要優化的地方，目的是為了能看懂
IE、Firefox、chrome、世界之窗沒問題
轉載于:https://www.cnblogs.com/mjfmei/p/4940718.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)