您的位置：首页 > Web前端 > JavaScript

js购物时的放大镜效果

2015-06-11 08:56 627 查看

首先需要两张一样的图片，一张大图，一张小图，大图显示，当鼠标移入时，小图上出现一个滑块，可以滑动，大图也跟着显示，大图的显示区域和小图一样，当滑块滑到不同的位置，大图显示不同的区域，当鼠标移出时，滑块和大图都隐藏。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#left{
width:400px;
height:400px;
border:1px solid blue;
position: relative;
float:left;
background: url(xiao.jpg) no-repeat;
}

#left #huakuai{
width:200px;
height:200px;
background:white;
position: absolute;
opacity: 0.6;
filter:alpha(opacity=60);
display: none;
}
#left #cover{
width:400px;
height: 400px;
position: absolute;
z-index: 3;
top:0px;
left:0px;
background: red;
opacity: 0;
filter:alpha(opacity=0);
/*相当于给左边的div加了一个盖子，鼠标直接作用在盖子上，不用作用滑块上，防止滑块的抖动*/
}
#right{
width:400px;
height:400px;
border:1px solid blue;
overflow: hidden;
float: left;
margin-left:20px;
position:relative;
display: none;
}
#right #right_img{
position: absolute;
top:0px;
left:0px;
/*根据鼠标的移动，图片的显示区域显示相应的位置*/
}

</style>
<script type="text/javascript">
window.onload=function(){
var oleft=document.getElementById('left');//获得左边原图的div元素
var ohk=document.getElementById('huakuai');//获得滑块元素
var ocover=document.getElementById('cover');//获得盖子元素
var oright=document.getElementById('right');//获得右边div区域
var oright_img=document.getElementById('right_img');//获得右边图片区域

oleft.onmouseover=function(){//当鼠标移入左边的div时，
ohk.style.display='block';//滑块显示
oright.style.display='block';//右边div显示
}
oleft.onmouseout=function(){//鼠标移出，
ohk.style.display='none';//滑块隐藏
oright.style.display='none';//右边div隐藏
}
ocover.onmousemove=function(e){//鼠标在盖子上移动的事件
var ev=e||window.event;//兼容性
var m_left=ev.layerX||ev.offsetX;//兼容性获得鼠标的横坐标
var left=m_left-100;//表示滑块到div左边框的距离，鼠标在div中间
if(left<0){//如果滑块要超出左边框，另左边距等于0
left=0;
}
if(left>200){//如果滑块要超出右边框，另左边框为最大值200
left=200;
}
huakuai.style.left=left+'px';//将左边距赋值给小滑块

var m_top=ev.layerY||ev.offsetY;//同理设置垂直方向的值
var top=m_top-100;
if(top<0){
top=0;
}
if(top>200){
top=200;
}
huakuai.style.top=top+'px';

var right_left=left*-2;//因为大图为小图的2倍，所以乘以2,因为图片要向左上移动，位置像素值为负，所以再乘以-1
var right_top=top*-2;//同理，获得垂直方向的值
oright_img.style.left=right_left+'px';//赋值
oright_img.style.top=right_top+'px';
}

}
</script>

</head>
<body>
<div id="left">
<div id="huakuai"></div>
<div id="cover"></div>
</div>
<div id="right">
<img src="datu.jpg" id="right_img">
</div>

</body>
</html>

图片如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航