放大镜,HTML5中,如何为图片制作放大镜效果?"/>
HTML5文本框右侧加一个放大镜,HTML5中,如何为图片制作放大镜效果?
在文档中显示缩略图, 通过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;
}
更多推荐
HTML5文本框右侧加一个放大镜,HTML5中,如何为图片制作放大镜效果?
发布评论