詳細ページ大きな画像まだ商品の詳細を見ることができないを参照するときときは、効果が大きく、画像の上にホバー達成し、大きな画像で虫眼鏡の効果は、マウスの位置の全体像を変更するには、右側と右側に表示されますこれは、コンテンツを表示し、ホバー位置拡大鏡同一内容。効果は、ピクチャーを達成：大きな画像マウスイベントリスナを追加し、リスナーは、まずマウスイベント、マウスイベントリスナーに大きな画像上のマスク層、および見られるように、拡大画像表示領域に入ります。全体像を得るためにマウスの座標に対して後者の座標を用いて、マウスイベントリスナを移動最初のページの大きい地図の相対位置を求める、関連する座標を取得し、ページの場所に対するマウス位置を取得し、マイナス前者。示された位置を得るためにマウスの座標マイナスマスク層、マスク層の幅の半分を使用して。座標値画像で拡大鏡の倍率を乗じた座標値を用いて、マスク層は、増幅値は、ここでは2に設定されています。マスク層の座標値のこれらの得られた座標、および拡大鏡画像領域の座標によります。最後に、イベントリスナーマウス休暇を追加したときにマウスの葉大きな画像マスク層、および拡大鏡を隠し。具体的な実装コード：
//magnify
//放大镜效果，首先要获取商品大图div的jQuery对象
var $imgWrap=$('.detail-img-main')
//监听鼠标进入事件
$imgWrap.mouseenter(function (e) {
//#imgLoc为遮罩层，使其显示
$('#imgLoc').css('display','block')
//.mainfyImg即放大镜显示元素，也使其显示
$('.manifyImg').css('display','block')
})
//监听鼠标离开事件
$imgWrap.mouseleave(function (e) {
//当鼠标离开时，使遮罩层隐藏
$('#imgLoc').css('display','none')
//当鼠标离开时，使放大镜隐藏
$('.manifyImg').css('display','none')
})
//监听鼠标的移动事件
$imgWrap.mousemove(function (e) {
//得到商品大图的相对于页面的横坐标
var imgX=document.getElementById('imgMainWrap').getBoundingClientRect().left
//得到商品大图的相对于页面的纵坐标
var imgY=document.getElementById('imgMainWrap').getBoundingClientRect().top
//得到鼠标相对于商品大图的横坐标，使用鼠标相对于页面的横坐标减去商品大图相对于页面的坐标
var cursorX=e.clientX-imgX
//得到鼠标相对于商品大图的纵坐标
var cursorY=e.clientY-imgY
//得到遮罩层的坐标，106是遮罩层边长的一半
var maskX=(cursorX-106)+'px'
var maskY=(cursorY-106)+'px'
//保证遮罩层是完整的
if (cursorX<106) {
maskX='0px'
}else if (cursorX>310) {
maskX='200px'
}
if (cursorY<106) {
maskY='0px'
}else if (cursorY>310) {
maskY='200px'
}
//计算得到放大镜中图片的显示位置
var maginfyX=-parseInt(maskX)*2+'px'
var maginfyY=-parseInt(maskY)*2+'px'
//设置遮罩层的位置
$('#imgLoc').css('left',maskX)
$('#imgLoc').css('top',maskY)
//设置放大镜中图片的位置
$('.manifyImg img').css('left',maginfyX)
$('.manifyImg img').css('top',maginfyY)
}) ここではHTML構造である
div.detail-IMGは、
a(href='javascript:;').detail-img-main#imgMainWrap
img(src='./images/detail/band/b1.jpg')#imgMain
div#imgLoc
div.manifyImg
img(src='./images/detail/band/b1.jpg')请输入代码完全なプロジェクトは、私に行くことができます見るGitHubに、ダウンロードし、質問や懸念カザフスタンへの歓迎。