标签:osi onload class UNC black clientx window 图片 定位
<div id="small"> <div id="pic1"> <img src="62-130501163925.jpg" alt=""> </div> <div id="mask"></div> </div> <div id="big"> <div id="pic2"> <img src="62-130501163925.jpg" alt=""> </div> </div>
#small{ width: 500px; height: 312px; position: absolute; left: 20px; top: 20px; } #pic1{ position: absolute; left: 0px; top: 0px; } #pic1 img{ width: 100%; height: 100%; } #big{ width: 200px; height: 200px; position: absolute; right: 50px; top: 50px; border: 1px solid blue; overflow: hidden; } #pic2{ width: 1000px; height: 625px; position: absolute; left: 0; top: 0; } #pic2 img{ width: 100%; height: 100%; } #mask{ width: 100px; height: 100px; background: black; opacity: 0.3;/*让遮罩层看起来透明*/ filter: alpha(opacity = 30);/*兼容不同的浏览器*/ position: absolute; display: none; }
window.onload = function(){//文档内容加载完之后再执行 //当鼠标移入小图片,显示遮罩层和放大的区域 $(‘small‘).onmouseenter = function(){ $(‘mask‘).style.display = ‘block‘; $(‘big‘).style.display=‘block‘; } //鼠标移出时,隐藏遮罩层和放大的区域 $(‘small‘).onmouseleave = function(){ $(‘mask‘).style.display=‘none‘; $(‘big‘).style.display="none"; } //鼠标移动 $(‘small‘).onmousemove = function(ev){ var e = ev || window.event; //计算鼠标的位置,并让鼠标显示在遮罩层的中间 var l = e.clientX - $(‘small‘).offsetLeft - 50; var t = e.clientY - $(‘small‘).offsetTop -50; //别让遮罩层移出图片 if(l <= 0){ l = 0; } if(l >= 500 - 100){ l = 400; } if(t <= 0){ t = 0; } if(t >= 312 - 100){ t = 212; } //遮罩层的移动 $(‘mask‘).style.left = l + ‘px‘; $(‘mask‘).style.top = t + ‘px‘; //通过遮罩层移动,来计算出放大后图片的显示区域 $("pic2").style.left = -$("mask").offsetLeft * 2 + ‘px‘; $("pic2").style.top = -$("mask").offsetTop * 2 + ‘px‘; } } //为了更容容易的获取id function $(id){ return document.getElementById(id); }
标签:osi onload class UNC black clientx window 图片 定位
原文地址:https://www.cnblogs.com/dswg/p/10284333.html