JS实现放大镜效果

最新推荐文章于 2022-03-15 14:20:02 发布

kw2428

最新推荐文章于 2022-03-15 14:20:02 发布

阅读量193

点赞数

分类专栏： js放大镜文章标签： javascript

本文链接：https://blog.csdn.net/kw8682202/article/details/104856068

版权

js放大镜专栏收录该内容

1 篇文章 0 订阅

订阅专栏

放大镜效果展示
首先确定要实现的效果的结构。
上面是一大图，下面有两个小图，点击小图可以切换大图。鼠标放大左边展示大图上时，会出现一个半透明的黄色框，并且随着鼠标的移动右面的图片会跟随出现对面的图像显示。
用html写出基本结构并用css修饰，如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .box{
        width: 400px;
        height: 500px;
        margin-left:100px;
        /* border:3px solid #00f; */
    }
    .m{
        width: 400px;
        height: 400px;
        /* border:1px solid #000; */
        position: relative;
    }
    .small ul li{
        margin:0 5px;
        border:1px solid black;
    }
    .small ul li img{
        vertical-align: middle;
    }
    .small ul{
        width: 400px;
        height: 100px;
        display:flex;
        align-items: center;
        justify-content: flex-start;
    }
    .small ul li{
        width: 50px;
        height: 50px;
    }
    .small ul li.active{
        border-color:red;
    }
    .small ul li img{
        width: 100%;
    }
    .shade{
        width: 100px;
        height: 100px;
        background:rgba(255,255,0,0.5);
        position: absolute;
        left:0;
        top: 0;
        display:none;
    }
    .big{
        width: 400px;
        height: 400px;
        position:absolute;
        left:105%;
        top:0;
        border:solid;
        background-image:url("../images/big1.jpg");
        background-size:1600px 1600px;
        display:none;
        background-repeat:no-repeat;
    }
    .middle{
        width: 400px;
        height: 400px;
        border:1px solid #000;
        position:absolute;
        left:0;
        top:0;
    }
    .middle img{
        width: 100%;
    }
    .shade:hover{
        cursor:move;
    }
    /* 
    比例：
    中等图和遮罩的比例 === 大图和大盒子的比例
    400/100 === 1600/400
     */
    </style>
<body>
    <div class="box">
        <div class="m">
            <div class="middle">
                <img src="../images/big1.jpg" alt="">
                <div class="shade"></div>
            </div>
            <div class="big"></div>
        </div>
        <div class="small">
            <ul>
                <li class="active"><a href="#"><img src="../images/big1.jpg" alt=""></a></li>
                <li><a href="#"><img src="../images/big2.jpg" alt=""></a></li>
            </ul>
        </div>
</body>
</html>

写好的样式
下面用js实现想要的效果：使用面向对象的方式实现代码

<script type="text/javascript">
function Magnifier（）{
//取出要用的元素标签
	his.box=document.querySelector("."+classname);
    this.m=document.querySelector(".m");
    this.middleimg=document.querySelector(".middle img");
    this.middle=document.querySelector(".middle");
    this.small=document.querySelector(".small");
    this.big=document.querySelector(".big");
    this.shade=document.querySelector(".shade");
    this.ullis=document.querySelectorAll("ul li");
    that=this;
    //遍历ullis给小图加入点击事件
    for(var i=0;i<this.ullis.length;i++){
    that.ullis[i].onclick=function(){
    	that.smallclick(this);
    }
    }
    this.middle.onmouseenter= ()=>{
        this.over();
    }
    this.middle.onmouseleave= ()=>{
        _this.out();
    }
}
//定义小图点击事件
Magnifier.prototype.smallclick=function(ele){
	//先让所有小图的边框都显示为黑色
	for(var i=0;i<that.ullis.length;i++){
	that.ullis[i].style.borderColor="black";
	}
	//让对应的小图边框显示红色
	ele.style.borderColor = "red";
	//小图切换时让对应的大图显示
	var smallimg=ele.firstElementChild.firstElementChild
    var smallsrc=smallimg.getAttribute("src");
    this.middleimg.setAttribute("src",smallsrc);
    this.big.style.backgroundImage = "url("+smallsrc+")"
}
//鼠标移出事件
Magnifier.prototype.out=function(){
    this.shade.style.display="none";
    this.big.style.display="none";
}
//鼠标移入
Magnifier.prototype.over=function(){
//鼠标移入，半透明的阴影盒子和右边的大图出现
    that.shade.style.display="block";
    that.big.style.display="block";
    //鼠标移入 显示阴影和右边的大图
    //获取鼠标在div中的坐标位置
    that.middle.onmousemove=function(e){
        var e=e||window.event;
        var x = e.pageX;
        var y = e.pageY;
        var le=x-that.box.offsetLeft-this.offsetLeft-that.shade.offsetWidth/2;
		//给阴影的移动设置范围
		//判断left的最大值和最小值
        if(le<=0){
            le=0;
        }
        if(le>=this.clientWidth-that.shade.offsetWidth){
            le=this.clientWidth-that.shade.offsetWidth
        }
        that.shade.style.left=le+"px";
		//判断ltop的最大值和最小值
        var he=y-that.box.offsetTop-this.offsetTop-that.shade.offsetHeight/2;
        if(he<=0){
            he=0;
        }
        if(he>=this.clientHeight-that.shade.offsetHeight){
            he=this.clientHeight-that.shade.offsetHeight;
        }
        that.shade.style.top=he+"px";
        that.da(le,he); 
    }
}
//设置右边大图的背景位置
Magnifier.prototype.da=function(le,he){
    var w=this.middle.clientWidth;
    //以阴影框移动的距离和左边大图的尺寸比例来确定右边大图的背景位置
    var parsentl=le/w;
    //获取到右边大图的背景尺寸
    var wh=window.getComputedStyle(this.big).backgroundSize;
    //分割字符串并获取对应的下标值
    var bigw=parseInt(wh.split(" ")[0]);
    var lh=parsentl*bigw;
    var h = this.middle.clientHeight;
    var parsenth=he/h;
      //分割字符串并获取对应的下标值
    var bigh=parseInt(wh.split(" ")[1]);
    var th=parsenth*bigh;
    this.big.style.backgroundPosition = `-${lh}px -${th}px`;
}
var magnifier=new Magnifier();
</script>

以上就是js实现放大镜效果的基本代码——逆战班

kw2428

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现放大镜效果

首先确定要实现的效果的结构。上面是一大图，下面有两个小图，点击小图可以切换大图。鼠标放大左边展示大图上时，会出现一个半透明的黄色框，并且随着鼠标的移动右面的图片会跟随出现对面的图像显示。用html写出基本结构并用css修饰，如下：<!doctype html><html><head><meta charset="utf-8"><...
复制链接

扫一扫

专栏目录