最近的网站项目需要实现这个放大镜,在网上也下载了一些实现了的代码,不过感觉比较笨重,就自己写了一次,实现了,需要的朋友可以拿去用;
以下是html部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/fdj.css" />
<script src="js/fdj.js"></script>
</head>
<body>
<div id='bigDiv' class='clearfix'>
<div class='left_div'>
<div id='mid_div'>
<img src="images/detail_img/image1.jpg" alt="" />
<div id='gai'></div>
</div>
<div id='min_div' class='clearfix'>
<img src="images/detail_img/image1.jpg" alt="" data-num='1'/>
<img src="images/detail_img/image2.jpg" alt="" data-num='2'/>
<img src="images/detail_img/image3.jpg" alt="" data-num='3'/>
<img src="images/detail_img/image4.jpg" alt="" data-num='4'/>
<img src="images/detail_img/image5.jpg" alt="" data-num='5'/>
</div>
</div>
<div id='max_div'>
<img src="images/detail_img/image1.jpg" alt="" />
</div>
</div>
</body>
</html>
以下是css部分:
*{
margin:0;
padding:0;
}
/*去掉浮动*/
.clearfix:after{
height:0;
content:" ";
display:block;
overflow:hidden;
clear:both;
}
.clearfix{
zoom:1;/*IE低版本浏览器不支持after伪类所以要加这一句*/
}
#bigDiv img{
display:block;
}
#bigDiv{
overflow:hidden;
background:pink;
}
/*左盒子*/
.left_div{
float:left;
}
/*中盒子*/
#mid_div{
width:350px;
height:350px;
border:8px solid #ccc;
position:relative;/*相对定位*/
}
#mid_div img{
width:100%;
}
#gai{
width:100px;
height:100px;
background:rgba(67,98,230,0.4);
position:absolute;/*子绝父相*/
display:none;
}
/*大盒子*/
#max_div{
float:left;
position:relative;/*相对定位*/
border:4px solid #ccc;
overflow:hidden;
display: none;
}
#max_div img{
/*子绝父相*/
position:absolute;
}
/*小盒子*/
#min_div{
/*float:left;*/
width:350px;
}
#min_div img{
float:left;
width:20%;
}
以下是js部分:
window.onload = function(){
// 预加载
new Image().src='images/detail_img/image1.jpg';
new Image().src='images/detail_img/image2.jpg';
new Image().src='images/detail_img/image3.jpg';
new Image().src='images/detail_img/image4.jpg';
new Image().src='images/detail_img/image5.jpg';
var bigDiv = document.getElementById('bigDiv'),
mid_div = document.getElementById('mid_div'),
mid_img = mid_div.children[0],
gai = mid_div.children[1],
min_div = document.getElementById('min_div'),
min_imgs = min_div.children,
max_div = document.getElementById('max_div'),
max_img = max_div.children[0];
// 鼠标放上小的img上 中盒子和大盒子都需要更换图片的src
console.log(min_imgs.length,min_imgs)
for(var i=0,len=min_imgs.length;i<len;i++){
(function(j){
min_imgs[j].onmouseenter = function(){
var img_src = this.src;
mid_img.src = img_src;
max_img.src = img_src;
}
})(i)
}
// 鼠标放上显示gai 移开隐藏
mid_div.onmouseenter = function(){
gai.style.display = 'block';
max_div.style.display = 'block';
};
mid_div.onmouseleave = function(){
gai.style.display = 'none';
max_div.style.display = 'none';
};
//兼容的滑动位置 madeby:张飞龙
// 滚动条的像素兼容写法
window.scroll = function(){
return {
"top":document.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
"left":document.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}
}
// 在中盒子上滑动的时候 需要获取鼠标在mid_div中的坐标位置
mid_div.onmousemove = function(event){
event = event || window.event;
//获取鼠标在文档中的坐标位置 = 滚动条的px+距离浏览器边的px
var pageX = event.pageXOffset || window.scroll().left + event.clientX;
var pageY = event.pageYOffset || window.scroll().top + event.clientY;
//console.log(pageX,pageY)
//mid_div盒子相对于有定位的父盒子的位置;没有定位的盒子则为body
var mid_divX = mid_div.offsetLeft,
mid_divY = this.offsetTop;
//console.log(mid_divX,mid_divY)
//让gai盒子的位置和鼠标一起动起来,最好鼠标的在gai中心位置,
//X为gai盒子的位置,等于鼠标相对body的位置-mid_div的盒子相对body的位置-gai盒子自身宽度的一半
var X = pageX - mid_divX - gai.offsetWidth/2;
var Y = pageY - mid_divY - gai.offsetHeight/2;
//console.log(X,Y)
// 设置边界
if(X<=0){X=0};
if(Y<=0){Y=0};
var max_left = mid_div.scrollWidth-gai.offsetWidth;
var max_top = mid_div.scrollHeight - gai.offsetWidth;
if(X>=max_left){
X = max_left;
}
if(Y>=max_top){
Y = max_top;
}
// 设置位置
gai.style.left = X + 'px';
gai.style.top = Y + 'px';
// 大盒子的大小应该计算出来,和gai盒子等比例就很好了,这样设计比较好
var biliX = gai.offsetWidth/mid_div.scrollWidth;
var biliY = gai.offsetHeight/mid_div.scrollHeight;
max_div.style.width = biliX * max_img.offsetWidth + 'px';
max_div.style.height = biliY * max_img.offsetHeight + 'px';
var bili = mid_div.scrollWidth/max_img.offsetWidth;
//console.log(bili)
max_img.style.left = -X/bili + 'px';
max_img.style.top = -Y/bili + 'px';
};
}
感觉现在的csdn粘代码越来越丑了。