思路：
布局，左边一张小的图片，右边一张大的图片，按照等比例放大
所谓放大就是右边有一张比左边更大的图片，鼠标划上遮罩层，右边显示放大图片
通过鼠标事件实现其功能
htmlcssjs
<div id = 'small'> <img src="http://jiuaibuni.top/h5/img/timg.jpeg" alt=""/> <div id = 'mark'></div> </div> <div id = 'big'> <img src="http://jiuaibuni.top/h5/img/timg.jpeg" alt=""/> </div>
/* 左边 */
#small{
width: 300px;
height: 560px;
position: absolute;
left: 100px;
top: 100px;
}
#small img{
width: 100%;
height: 100%;
}
/* Mark遮罩层样式
刚开始遮罩层是隐藏的
*/
#mark{
display: none;
width: 200px;
height: 200px;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
left: 0px;
top: 0px;
}
/*
右边区域
初始隐藏
*/
#big{
display: none;
width: 400px;
height: 400px;
border: 1px solid black;
left: 500px;
top: 100px;
position: absolute;
overflow: hidden;
}
#big img{
width: 600px;
height: 1120px;
position: absolute;
left: 0px;
top: 0px;
}
window.onload = function(){
var oSmall = document.getElementById("small");
var oBig = document.getElementById("big");
// 遮罩层
var oMark = document.getElementById("mark");
// 获取右面的img，通过下标0把图片取出来
var oBigImg = oBig.getElementsByTagName("img")[0];
// 遮罩层鼠标移入显示
oSmall.onmouseover = function(){
oMark.style.display = 'block';
oBig.style.display = 'block';
}
// 遮罩层鼠标移出隐藏
oSmall.onmouseout = function(){
oMark.style.display = 'none';
oBig.style.display = "none";
}
// 跟着鼠标移动
oSmall.onmousemove = function(ev){
// 拿到事件对象
// 兼容事件对象
var e = ev || window.event;
// clientX距离视窗的距离
// 鼠标箭头在遮罩层中居中
// left值和top值
var l = e.clientX - oSmall.offsetLeft - 100;
var t = e.clientY - oSmall.offsetTop - 100;
// 设极值限制遮罩层出界
if(l <= 0){ l = 0; } if(l >= 100){
l = 100;
}
if(t <= 0){ t = 0; } if(t >= 360){
t = 360;
}
// 获取鼠标的坐标
oMark.style.left = l + 'px';
oMark.style.top = t + 'px';
// 右边图片的移动方式，左边遮罩层如何移动，右边图片，
// 放大两倍，反方向（是乘负数）对应倍数移动
oBigImg.style.left = l * -2 + 'px';
oBigImg.style.top = t * -2 + 'px';
}
}
Comments | NOTHING