HTML5⽂本框右侧加⼀个放⼤镜,HTML5中，如何为图⽚制作
放⼤镜效果？
在⽂档中显⽰缩略图, 通过getComputedStyle来获取缩略图⼤⼩, 并映射成真实⼤⼩的图⽚尺⼨;
给缩略图添加mouseon事件, 当⿏标处在缩略图上时显⽰放⼤镜元素; 反之则移除
给缩略图添加mousemove事件, 读取event.offsetX和event.offsetY, 并根据1中的关系换算成在放⼤的图⽚中应该显⽰的部分;
在放⼤镜中添加图⽚, 并通过position:absolute来定位和移动图⽚.
⽂字说得可能不是很清楚, 待我写个
Magnifier Demo
//container⽤来放缩略图
width:400px;
margin: 100px auto;
}
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元素
display: block;
}
//⽤来显⽰坐标
,
//需要在load事件⾥完成, 否则获取不到图⽚正常⾼度
//⽤起来⽅便些
var selector = document.querySelector.bind(document);
//定义数据对象
var data = {
dataX: '',
dataY: ''
};
var img = selector('div.magnifier > img');
var thumbnail = selector('ainer');
var magnifier = selector('div.magnifier');
var mousemoveTimer = null;
//获取缩略图⼤⼩
var thumbnailX = thumbnail.clientWidth;
//确定转换系数, 例如在缩略图上移动1px, 则真实图⽚需要移动6px
var converter = img.naturalWidth/thumbnailX;
selector('ainer > img').addEventListener('mousemove', function(e) { //写数据
data.dataX = e.offsetX;
data.dataY = e.offsetY;
//移动图⽚位置
img.style.left = '-' + e.offsetX*converter + 'px';
html怎样设置文本框输入输出
p = '-' + 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; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。