快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

和记娱h88:JS实现图片放大器效果



功能阐明:

在淘宝,京东之类的电子商务网站一样平常会有商品放大年夜浏览功能,赞助顾客阐发产品德量,此次的放大年夜器法度榜样恰是仿照了这种效果,并支持如下功能:

1.图片局部放大年夜。

2.鼠标滚轮调剂放大年夜倍数。

支持IE6 7 8 firefox chrome

效果预览:http://www.fengfly.com/demo/other/fdj.html

实现道理:

此次的图片放大年夜器实现简单来说便是:分层+裁剪

分层:

在原图区域,图片被分成三层:

1.原图层:便是一开始看到的图片。

2.透明遮罩层:原图层上面的半透明层,用于孕育发生遮罩效果。

3.手柄区域层:便是跟随鼠标移动的手柄区域,手柄区域内容在右边被放大和记娱h88年夜。

裁剪:

裁剪主要用在两个地方,一个是对原图中手柄区域层的裁剪,一个是放大年夜区域对大年夜图的裁剪。

代码阐发:

imgEnlarger.enlarge = function(imgElem, times, windowSize, winLeft, winTop, imgLeft, imgTop, containerId)

这里分手设置三层(原图层,透明层,手柄层)的样式,并且必要留意的是,要在图和记娱h88片加载完后才开始后面设置样式的操作,否则会造成后面的操作呈现问题。

function setBigImgRect(rect) {

bigI和记娱h88mg.style.clip = 'rect(' + parseInt(rect.top) * times + 'px ' + parseInt(rect.right) * times + 'px ' + parseInt(rect.bottom) * times + 'px ' + parseInt(rect.left) * times + 'px)';

bigImg.style.top = winTop - parseInt(rect.top) * times + 'px';

bigImg.style.left = winLeft - parseInt(rect.left) * times + 'px';}

firefox和非firefox对鼠标滚动事故的处置惩罚都不合,是以必要检测后分手处置惩罚。关于这个常识点具体可见这里:http://www.javascriptkit.com/javatutors/onmousewheel.shtml

function resize(eve) {

eve = eve || window.event;

if (navigator.userAgent.indexOf("Firefox") > 0) {

times += eve.detail / 3;

}

else

times += eve.wheelDelta / 120;

times = Math.min(Math.max(0.8, times), 15); //the max time is 15,and the min time is 0.8

bigImg.style.wid和记娱h88th = parseInt(imgElem.clientWidth) * times + 'px';

bigImg.style.height = parseInt(imgElem.clientHeight) * times + 'px';

Handler.style.height = Handler.style.width = windowSize / times + 'px';

halfWidth = parseInt(Handler.style.width) / 2;

halfHight = parseInt(Handler.style.height) / 2;

rec = new Rect(parseInt(eve.clientX) - halfWidth - imgLeft, parseInt(eve.clientY) - halfHight - imgTop, parseInt(Handler.style.width));

setImgRect(rec);

setBigImgRect和记娱h88(rec);

if (!window.event)

eve.preventDefault();

return false;

}

}

您可能还会对下面的文章感兴趣: