js案例3---商品放大镜

一、案例效果

二、实现步骤

• 首先设置左右两个按钮，点击左边按钮往左滑，点击右边按钮往右滑，然后设置点击底下小图的效果，出现红框以及右下角出现√，再根据小图得到最终的中图以及大图，在小图上创建一个层（鼠标进入出现层，鼠标离开层消失），设置层的大小（要成比例），然后对层的坐标进行限制，然后再根据比例滑动层的时候对应出现大图的部分。

三、核心代码

	//获取所有的small_box
    var small_box = document.querySelectorAll(".small_box");
    //获取两个按钮
    var leftbtn = document.querySelector(".leftbtn");
    var rightbtn = document.querySelector(".rightbtn");
    //获取小图的容器
    var small_list = document.querySelector(".small_list");
    //获取小图图片
    var small_img = document.querySelector(".small_img");
    //获取中图图片
    var c_middle_img = document.querySelector(".c_middle_img");
    //获取中图容器
    var c_middle = document.querySelector(".c_middle");
    //获取最大父容器
    var c_box = document.querySelector(".c_box");
    //获取大图容器
    var big_img = document.querySelector(".big_img");
    var bili=800/350;
    //使用变量接收层
    var pos_ceng=null;
    c_middle.onmouseenter=function(){
        pos_ceng=document.createElement("div");
        pos_ceng.className="ceng";
        //创建时要按照比例计算层的宽高
        var cenh_w = 500 / bili;
        pos_ceng.style.width = cenh_w + "px";
        pos_ceng.style.height = cenh_w + "px";
        this.appendChild(pos_ceng);
        big_img.style.display="block";
    };
    c_middle.onmouseleave=function(){
        pos_ceng.remove();
        big_img.style.display="none";
    };
    c_middle.onmousemove=function(e){
        var x= (e.pageX-c_box.offsetLeft)-pos_ceng.offsetWidth/2;
        var y= (e.pageY-c_box.offsetTop)-pos_ceng.offsetHeight/2;
        //对x,y进行限制
        var maxLeft=c_middle.offsetWidth-pos_ceng.offsetWidth;
        var maxTop=c_middle.offsetHeight-pos_ceng.offsetHeight;
        x=x<=0?0:x>=maxLeft?maxLeft:x;
        y=y<=0?0:y>=maxTop?maxTop:y;
        pos_ceng.style.left=x+"px";
        pos_ceng.style.top=y+"px";
        //设置大图的背景图片坐标
        big_img.style.backgroundPosition=(-x*bili)+"px "+(-y*bili)+"px";
    }
    //添加两个按钮的点击事件
    leftbtn.addEventListener("click",function(){
        small_list.style.transform="translatex(0px)";
    });
    rightbtn.addEventListener("click",function(){
        var transX=small_img.offsetWidth-small_list.offsetWidth;
        small_list.style.transform="translatex("+transX+"px)";
    });
    //使用变量接收已经选中的元素
    var save=null;
    save=small_box[0];
    for(var i=0;i<small_box.length;i++)
    {
        small_box[i].onclick=function(){
            save.classList.remove("userck");
            this.classList.add("userck");
            save=this;
            //点击小图找对应的中图
            var middle=this.getAttribute("data-middle");
            c_middle_img.src=middle;
            //点击小图换对应的大图
            var big=this.getAttribute("data-big");
            big_img.backgroundImage="url('"+big+"')";
        }
    }