电商网站放大镜效果

最新推荐文章于 2022-10-18 09:26:08 发布

Merlin-蔡

最新推荐文章于 2022-10-18 09:26:08 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/Merlin2017/article/details/70159330

版权

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">
*{
padding: 0;
margin: 0;
}
#left{
width: 400px;
height: 400px;
border: 2px solid blue;
margin: 15px;
background: url(400.jpg)no-repeat;
float: left;
position: relative;
cursor:crosshair;
}
#box{
width: 220px;
height: 200px;
background: green;
opacity:0.8;
filter:alpha(opacity=80);
position: absolute;
top: 0;
left: 0;
display: none;
}
#right{
width: 440px;
height: 400px;
border: 2px solid purple;
float: left;
overflow: hidden;
position: relative;
display: none;
}
#pic{
position: absolute;
top: 0;
left: 0;
}
#cover{
width: 400px;
height: 400px;
background: red;
position: absolute;
left: 0;
top: 0;
opacity:0;
filter:alpha(opacity=0);
}

</style>
<script type="text/javascript">
window.οnlοad=function(){
var left=document.getElementById('left');
var box=document.getElementById('box');
var right=document.getElementById('right');
var pic=document.getElementById('pic');
var cover=document.getElementById('cover');
// 给左边加移动事件
cover.οnmοusemοve=function(e){
// 获得鼠标的位置
var ev=window.event||e;
var mouse_left=ev.offsetX||ev.layerX;
var mouse_top=ev.offsetY||ev,layerY;
// 计算色块的位置
var box_left=mouse_left-110;
var box_top=mouse_top-100;
// 限定box的区域
if(box_left>180){
box_left=180;
}
if (box_top>200) {
box_top=200;
}
if (box_left<0) {
box_left=0;
}
if (box_top<0) {
box_top=0;
}
// 让色块移动
box.style.left=box_left+'px';
box.style.top=box_top+'px';
//计算右边区域的位置
var pic_left=box_left*-2;
var pic_top=box_left*-2;
// 让右边区域移动
pic.style.left=pic_left+'px';
pic.style.top=pic_top+'px';

}
cover.οnmοuseοver=function(){
box.style.display='block';
right.style.display='block';
}
cover.οnmοuseοut=function(){
box.style.display='none';
right.style.display='none';
}
}
</script>
</head>
<body>
<div id="left">
<div id="cover">
</div>
<div id="box">
</div>
</div>
<div id="right">
<img src="800.jpg" id="pic">
</div>
</body>
</html>