购物网图片放大镜JS效果实现
时间：5年前 阅读：3689
每当打开购物网站，比如淘宝天猫等pc端时，看到喜欢的商品一般都会把鼠标放在左侧上面图片，这时便会呈现出放大的效果。在没有去理解分析它的原理时，感觉非常的神奇，当真正地去接触，也是非常好理解。如下图展示所见：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#zb{
width: 400px;
height: 400px;
border: 2px solid palevioletred;
margin: 30px;
background: url(https://www.qiquanji.com/data/img/dmj/201904141555211663231342.jpg) no-repeat;
position: relative;
float: left;
/*cursor 光标; crosshair 十字线 鼠标变十分架*/
cursor: crosshair;
}
#zb #ssk{
width: 220px;
height: 200px;
background: white;
/*opacity 不透明 W3C的写法*/
opacity: 0.5;
/*filter IE的写法 过滤; 滤除;*/
filter: alpah(opacity=60) ;
/*等一下这个色块要动,就是要改变left值和top值,所以要定位*/
position: absolute;
top: 0;
left: 0;
/* ## 右侧和左侧小色块一开始是隐藏的,鼠标移到左边小色块才显示 先隐藏*/
display: none;
}
/*加个没有什么用和小色块同级元素解决移动鼠标颤动的问题 因为它鼠标一移动它有子元素的话会作用到子元素身上（也就是本来作用左侧DIV，一移动就作用在子元素小色块身上了，本来是得到左大块的距离减110和100的，现在相当于小色块有事件：得到的小色块距离，是110和100，再减去110和100，等于0回到原点，然后再一动，反复颤动的问题）*/
#zb #mr{
width: 400px;
height: 400px;
background: red;
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
}
#rou{
width: 440px;
height: 400px;
border: 2px solid darkgreen;
float: left;
overflow: hidden;
position: relative;
/* ## 右侧和左侧小色块一开始是隐藏的,鼠标移到左边小色块才显示 先隐藏*/
display: none;
}
#rou #dt{
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
var zb = document.getElementById('zb');
var ssk = document.getElementById('ssk');
var rou = document.getElementById('rou');
var dt = document.getElementById('dt');
var mr = document.getElementById('mr');
// 关于js的onmousemove与onmouseover区别over，在鼠标指针移动到指定的对象上时发生。move，在鼠标指针移动时发生。
// 给左侧加鼠标移动事件
// zb.onmousemove = function(e){
// 改成mr这个 作用在mr和zb结果是一样的,这个没有其它子元素再好理解
mr.onmousemove = function(e){
// 鼠标只要移动一下就获得鼠标的位置 就先获得事件对象
// 获得事件对象
var dd = window.event || e;
// 获得div左边的距 offsetX IE的写法 这个是获得事件源左边的距离
var mouse_zb = dd.offsetX || dd.layerX;
// 获得div顶部的距
var mouse_db = dd.offsetY || dd.layerY;
// 在网页标题栏上面输出一下
document.title = mouse_zb +'|'+ mouse_db;
// 计算色块的位置 因为这个色块是220*200的，一半就是中心点
// skz 色块左 skd色块顶
var skz = mouse_zb - 110;
var skd = mouse_db -100;
// 判断,不让小色块的超出去范围
if (skz<0) {
skz=0;
}
// 这个大小180,是400减220 大块是400减去小色块的220
if (skz>180) {
skz=180;
}
if (skd<0) {
skd=0;
}
if (skd>200) {
skd=200;
}
// 让色块移动
ssk.style.left = skz +'px';
ssk.style.top = skd+ 'px';
// 计算右侧图片的位置(实际上是大图片在移动)roudt右大图
var roudt_left = skz*-2;
var roudt_top = skd*-2;
// 让右侧图片移动
dt.style.left = roudt_left +"px";
dt.style.top = roudt_top + 'px';
}
// ## 然后再给左侧DIV加移入事件--鼠标放入左图:左侧小色块显示,右侧大图显示
// 给左侧加鼠标移入事件 mr这个好了，上面理解放在这里
mr.onmouseover = function(){
// 让左侧色块和右侧DIV显示
ssk.style.display = 'block';
rou.style.display = 'block';
}
// 给鼠标加移出事件
mr.onmouseout = function(){
ssk.style.display = 'none';
rou.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="zb">
<!--小色块-->
<div id="ssk"></div>
<!--加个没有什么用和小色块同级元素解决移动鼠标颤动的问题-->
<div id="mr"></div>
</div>
<!--右边DIV-->
<div id="rou">
<img src="https://www.qiquanji.com/data/img/dmj/201904141555211694214302.jpg" id="dt"/>
</div>
</body>
</html>
上面例子代码里都有详细解释，认真看应该很容易理解。
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论