一、案例效果
二、实现步骤
- 首先设置左右两个按钮,点击左边按钮往左滑,点击右边按钮往右滑,然后设置点击底下小图的效果,出现红框以及右下角出现√,再根据小图得到最终的中图以及大图,在小图上创建一个层(鼠标进入出现层,鼠标离开层消失),设置层的大小(要成比例),然后对层的坐标进行限制,然后再根据比例滑动层的时候对应出现大图的部分。
三、核心代码
//获取所有的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+"')"; } }