在文档中显示缩略图, 通过getComputedStyle来获取缩略图大小, 并映射成真实大小的图片尺寸;

给缩略图添加mouseon事件, 当鼠标处在缩略图上时显示放大镜元素; 反之则移除

给缩略图添加mousemove事件, 读取event.offsetX和event.offsetY, 并根据1中的关系换算成在放大的图片中应该显示的部分;

在放大镜中添加图片, 并通过position:absolute来定位和移动图片.

文字说得可能不是很清楚, 待我写个demo...

Magnifier Demo

//container用来放缩略图

div.container{

width:400px;

margin: 100px auto;

}

div.container > img{

width: 100%;

}

//magnifier用来放实际大小的图片. 注意overflow, display和position属性

div.magnifier{

width: 400px;

height: 400px;

position: relative;

overflow: hidden;

margin: 50px auto;

display: none;

}

div.magnifier > img{

position: absolute;

}

//当鼠标hover在缩略图上时, 显示后一个div, 即magnifier元素

div.container:hover + div{

display: block;

}

//用来显示坐标

,

//需要在window.onload事件里完成, 否则获取不到图片正常高度

window.onload = function(){

//用起来方便些

var selector = document.querySelector.bind(document);

//定义数据对象

var data = {

dataX: '',

dataY: ''

};

var img = selector('div.magnifier > img');

var thumbnail = selector('div.container');

var magnifier = selector('div.magnifier');

var mousemoveTimer = null;

//获取缩略图大小

var thumbnailX = thumbnail.clientWidth;

//确定转换系数, 例如在缩略图上移动1px, 则真实图片需要移动6px

var converter = img.naturalWidth/thumbnailX;

selector('div.container > img').addEventListener('mousemove', function(e) {

//写数据

data.dataX = e.offsetX;

data.dataY = e.offsetY;

//移动图片位置

img.style.left = '-' + e.offsetX*converter + 'px';

img.style.top = '-' + e.offsetY*converter + 'px';

});

//视图和数据结构绑定

Object.defineProperty(data, 'dataX', {

set: function(val){

selector('span.dataX').innerHTML = val;

}

})

Object.defineProperty(data, 'dataY', {

set: function(val){

selector('span.dataY').innerHTML = val;

}

})

// debugger;

}