JS效果：放大镜

个人博客新地址：→点我♪(＾∀＾●)ﾉ

效果图

原理

需求分析：

当鼠标在small中移动时，mask显示，big显示

当鼠标在small中移动时，mask跟随鼠标移动，并且鼠标在mask的中间，mask不能超出small

当鼠标在small中移动时，mask覆盖的区域，在big中会显示细节

当鼠标移出small时，mask和big都隐藏；

需要材料：一张大图，一张小图

小图，大图的容器要定位，总容器溢出隐藏

小图：小图中的mask绝对定位，小图宽高设置百分百（小图容器）

大图：执行放大镜的时候，移动大图容器中的大图

布局

<div class="box">
<div class="small">
<img src="images/small.jpg" alt="" />
<div class="mask"></div>
</div>
<div class="big">
<img src="images/big.jpg" alt="" />
</div>
</div>

样式

<style>
*{
margin:0;
padding:0;
}
.box{
width: 900px;
height: 430px;
margin:50px 100px;
position: relative;
}
img{
display: block;
}
.small{
float: left;
}
div.mask{
width: 184.9px;
height: 184.9px;
background: lightyellow;
opacity: 0.3;
filter:alpha(opacity=30);
display: none;
position: absolute;
top:0;
left:0;
}
.big{
border:1px solid #ccc;
overflow: hidden;
width: 430px;
height: 430px;
float: left;
margin-left:20px;
}
.big img{
margin-top:0px;
margin-left:0px;
}
</style>

JS

<script>
//需求分析：
//1、当鼠标在small中移动时，mask显示，big显示
//2. 当鼠标在small中移动时，mask跟随鼠标移动，并且鼠标在mask的中间，mask不能超出small
//3、当鼠标在small中移动时，mask覆盖的区域，在big中会显示细节
//4、当鼠标移出small时，mask和big都隐藏；
//获取事件源和相关元素：
var box = document.getElementsByTagName('div')[0];
var small = box.children[0];
var big = box.children[1];
var mask = small.children[1];
var bigImg = big.children[0];
//当鼠标在small中移动时
small.onmousemove = function(event){
//mask显示，big显示
mask.style.display = "block";
big.style.display = "block";
//获取事件对象
var e = event||window.event;
//获取鼠标距离页面顶部和页面左侧的距离
var pageX = e.clientX + scroll().left;
var pageY = e.clientY + scroll().top;
//获取以box为参考系，鼠标的坐标，并且鼠标在mask的中间
var x = pageX - box.offsetLeft-mask.offsetWidth/2;
var y = pageY - box.offsetTop-mask.offsetHeight/2;
//mask不能超出small
if(x<0){
x=0;
}
if(y<0){
y=0;
}
if(x>small.offsetWidth-mask.offsetWidth){
x = small.offsetWidth-mask.offsetWidth;
}
if(y>small.offsetHeight-mask.offsetHeight){
y = small.offsetHeight-mask
fd5b
.offsetHeight;
}
//mask跟随鼠标移动
mask.style.top = y + "px";
mask.style.left = x+"px";
//mask覆盖的区域，在big中会显示细节
//大图从百分之几开始显示
var percentX = x/small.offsetWidth;
var percentY = y/small.offsetHeight;
//大图移动
bigImg.style.marginLeft = -percentX*bigImg.offsetWidth +"px";
bigImg.style.marginTop = -percentY*bigImg.offsetHeight + "px";
}
//当鼠标移出small时，mask和big都隐藏
small.onmouseout = function(){
mask.style.display = "none";
big.style.display = "none";
}
</script>

在原位置的放大镜

这个是在逛游戏商城的时候遇到的，顺带提一下。这里的JS实现原理是一样的，知识在布局上有所不同。



* (458 438 )→(600 600)

* 点击下面的小图片》该图片显示 其他隐藏

* 悬浮在大图片，原本的大图可视为hidden；最大的图出来。执行放大镜

Css样式

.imgdiv{
width: 458px;
height: 438px;
}
.bigUl{
/*position: relative;*/
height: 438px;
overflow: hidden;
cursor: url("../img/zoomin.png"),pointer;

}
.bigUl li{
height: 438px;
position:relative;     /*li为定位点*/
/*overflow: hidden;*/
}
.bigUL li,.small{
display: block;
width: 458px;
height: 438px;
}
.small{
position: absolute;
top: 0;
left: 0;
z-index: 50;

}
.small img{
width: 100%;
height: 100%;
}
.mask{
width: 230px;
height: 230px;
background: lightyellow;
filter: alpha(opacity=30);
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 500;
}
.big{
position: absolute;
top: 0;
left: 0;
width: 458px;
height: 438px;
}
.big img{
position: absolute;
top: 0;
left: 0;
}
.smallUl{
margin-left: 2px;
}
.smallUl li{
display: inline-block;
width: 74px;
height: 70px;
padding: 2px;
border: 3px solid #fff;
margin: 2px;

}
.smallUl li img{
width: 100%;
height: 100%;
}
.smallUl .now{
border-color: #fe5268;
}

html布局

bigUl

中的每个

li

为一个放大镜

<div class="imgdiv">
<ul class="bigUl">
<li>
<div class="small">
<img src="img/small1.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big1.jpg" alt="">
</div>
</li>
<li>
<div class="small">
<img src="img/small2.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big2.jpg" alt="">
</div>
</li>
<li>
<div class="small">
<img src="img/small3.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big3.jpg" alt="">
</div>
</li>
<li>
<div class="small">
<img src="img/small4.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big4.jpg" alt="">
</div>
</li>
<li>
<div class="small">
<img src="img/small5.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big5.jpg" alt="">
</div>
</li>
</ul>
<ul class="smallUl">
<li class="now"><img src="img/small1.jpg" alt=""></li>
<li><img src="img/small2.jpg" alt=""></li>
<li><img src="img/small3.jpg" alt=""></li>
<li><img src="img/small4.jpg" alt=""></li>
<li><img src="img/small5.jpg" alt=""></li>
</ul>
</div>

JS实现代码

var box = $('.bigUl')[0].children;
for(var i = 0; i < box.length; i++ ){
magnify(box[i]);
}
var  small=$('.smallUl')[0].children;
for(var s = 0; s <small .length; s++ ){
small[s].index=s;
small[s].onmouseover=function () {
for(var j = 0; j <small .length; j++ ){
box[j].style.display='none';
small[j].classList.remove('now');
}
box[this.index].style.display='block';
box[this.index].style.opacity='0';
animation(box[this.index],{opacity:1})
this.classList.add('now');

}
}

function magnify(box) {
var small = box.children[0];
var big = box.children[1];
var mask = small.children[1];
var bigImg = big.children[0];
//当鼠标在small中移动时
small.onmousemove = function(event){
//mask显示，big显示
// small.style.opacity='0';
animation(small,{opacity:0});
// animation(mask,{})
big.style.display = "block";
//获取事件对象
var e = event||window.event;
//获取鼠标距离页面顶部和页面左侧的距离
var pageX = e.clientX + scroll().left;
var pageY = e.clientY + scroll().top;
//获取以box为参考系，鼠标的坐标，并且鼠标在mask的中间
var x = pageX - box.offsetLeft-mask.offsetWidth/2;
var y = pageY - box.offsetTop-mask.offsetHeight/2;
//mask不能超出small
if(x<0){
x=0;
}
if(y<0){
y=0;
}
if(x>small.offsetWidth-mask.offsetWidth){
x = small.offsetWidth-mask.offsetWidth;
}
if(y>small.offsetHeight-mask.offsetHeight){
y = small.offsetHeight-mask.offsetHeight;
}
//mask跟随鼠标移动
mask.style.top = y + "px";
mask.style.left = x+"px";
//mask覆盖的区域，在big中会显示细节
//大图从百分之几开始显示
var percentX = x/small.offsetWidth;
var percentY = y/small.offsetHeight;
//大图移动
bigImg.style.left = -percentX*big.offsetWidth +"px";
bigImg.style.top = -percentY*big.offsetHeight + "px";
}
//当鼠标移出small时，mask和big都隐藏
small.onmouseout = function(){
// small.style.opacity='1';
// mask.style.display = "none";
// big.style.display = "none";
animation(small,{opacity:1})
}

}