电商商品滑动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ position: relative; } #imgSmall{ width: 400px; height: 400px; position:absolute; top: 0; left: 0; } #divSmall{ width: 400px; position: absolute; top: 0; left: 0; height: 400px; } #divBig{ width: 400px; height: 400px; position: absolute; left:410px; top: 0; overflow: hidden; opacity:0; display: none; } #glass{ width: 100px; height: 100px; background: rgba(0,0,0,.5); position: absolute; top:0; left: 0; overflow:hidden; display: none; opacity: 0; cursor: pointer; } #imgSmall2{ width: 400px; height: 400px; position:absolute; top: 0; left:0; } #imgBig{ width:1600px; height: 1600px; position: absolute; top: 0; left: 0; } #mask{ width:400px; height: 400px; background: rgba(0,0,0,.5); position: absolute; top: 0; left: 0; } #show{ width: 400px; height: 200px; position: absolute; top: 400px; left:0; } #show div{ float: left; width: 20px; height: 200px; background: greenyellow; text-align: center; line-height: 200px; font-size: 30px; color:pink; } #show #div2{ width:360px; background:yellowgreen; overflow: hidden; } #div2 img{ width: 150px; height: 150px; } #div2 li{ float:left; list-style: none; height: 150px; padding: 0 5px; cursor: pointer; } #div2 ul{ width: 640px; padding-top:20px; } </style> </head> <body> <div id="box"> <div id="divSmall"> <img id="imgSmall" alt="" src="img/img1.png"/> <div id="mask"></div><!--设置一块幕布把原图遮起来--> <div id="glass"> <img id="imgSmall2" src="img/img1.png"/> </div> </div> <div id="divBig"> <img id="imgBig" src="img/img1.png" alt="" /> </div> </div> <div id="show"> <div id="div1"><</div> <div id="div2"> <ul id="ul1"> <li><img src="img/img4.png" alt="" /></li> <li><img src="img/img2.png" alt="" /></li> <li><img src="img/img3.png" alt="" /></li> <li><img src="img/img1.png" alt="" /></li> </ul> </div> <div id="div3">></div> </div> <script src="startMove.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //当鼠标在小div上移动时 divSmall.onmousemove = (e)=>{ //获取鼠标相对div整体的坐标,因为div定位相对于box定位所以 var [x,y] = [e.clientX - box.offsetLeft,e.clientY - box.offsetTop]; //定义鼠标在glass的中心 ,最大宽度减去元素本身一半。 x-=glass.offsetWidth/2; y-= glass.offsetHeight/2; if(x<0){ x=0;//用来判断在原点位置时x轴是否会溢出,这里是左边 } if(y<0){ y=0;//用来判断在原点位置时y轴是否会溢出,这里是右边 } var maxX = divSmall.offsetWidth - glass.offsetWidth; //定义glass在X轴可运动的最大范围 if(x>maxX){ x = maxX; //如果大于,就让它等于 } var maxY = divSmall.offsetHeight - glass.offsetHeight; //定义glass在Y轴可运动的最大范围 if(y>maxY){ y = maxY; //如果大于,就让它等于 } [glass.style.left,glass.style.top] = [x+"px",y+"px"]; //把得到的鼠标移动的值传给glass [imgBig.style.left,imgBig.style.top] = [-4*x+"px",-4*y+"px"]; //把得到的鼠标移动的值传给imgBig 负数是因为在操作时图片一定是相反的移动, //4是倍数关系。 [imgSmall2.style.left,imgSmall2.style.top]=[-x+"px",-y+"px"] //类似于大图一样,移动时他也一定是相反运动 } divSmall.onmouseout=()=>{ startMove(glass,{"opacity":0},()=>{ glass.style.display = "none"; }); startMove(divBig,{"opacity":0},()=>{ divBig.style.display ="none"; });//先让运动执行完,然后在执行display } divSmall.onmouseover=()=>{ startMove(glass,{"opacity":100}); glass.style.display = "block"; startMove(divBig,{"opacity":100}); divBig.style.display ="block"; } var n=div2.scrollLeft; var timer ; div1.onmouseover =()=>{ timer = setInterval(()=>{ n++; div2.scrollLeft=n++; if(n>=280){ clearInterval(timer); } },10); } div1.onmouseout =()=>{ clearInterval(timer); } div3.onmouseover =()=>{ timer = setInterval(()=>{ n--; div2.scrollLeft=n--; if(n<=0){ clearInterval(timer); } },10); } div3.onmouseout=()=>{ clearInterval(timer); } ul1.onclick =(e)=>{ var e = e.target; if(e.nodeName=="IMG"){ imgSmall2.src=imgSmall.src=imgBig.src=e.src ; } } </script> </body> </html>
/* * elem: 操作哪一个元素 * json:表示多个属性 * attr: 操作的那个元素的css中的什么属性 * value: 操作的那个元素的css中的那个属性的目标值 * cb:回调函数,前一个运动执行后,这一段代码才被执行 */ var startMove = (elem, json, cb)=>{ // 每当执行运动函数的时候,都先把上一次的运动结束掉 clearInterval(elem.timer); // 开启定时器,让elem的attr属性,不断的变化 elem.timer = setInterval( ()=>{ // 循环,把json中的每一个属性,都做处理(让json中的每一个属性,都运动起来) var flag = true; //是不是所有的属性,都运动到了目标值 for( var attr in json ){ // attr属性的目标值 var value = json[attr]; // 求当前属性值 var v = getComputedStyle(elem)[attr]; if( attr=="opacity" ){ v = Math.round(v*100); }else{ v = parseInt(v); } //console.log(v); // 求目标值与当前值的间距 var dist = value-v; // 求步长值(注意:缓冲运动中,步长值是逐渐减小的) var step = dist/6; //console.log(step); // 如果属性逐渐变大的运动,那么step最后几次的值类似 0.1,我们希望把0.1变为1 // 如果属性逐渐变小的运动,那么step最后几次的值类似 -0.1,我们希望把-0.1变为-1 if( step>0 ){ step = Math.ceil(step); }else{ step = Math.floor(step); } // 更新属性值 //console.log(v, step); if( attr=="opacity" ){ elem.style[attr] = (v+step)/100; }else{ elem.style[attr] = (v+step)+'px'; } // 如果到达目标值,运动停止 //if( v==value ){ // clearInterval(elem.timer); //} if( v!=value ){// 只要有1个属性,没有到达目标值,就让flag等于false flag = false; } } // 判断是否所有的属性,都已经到达了目标值 if( flag ){ clearInterval(elem.timer); if( cb ){ // 如果设置了回调函数,则执行它 cb(); } } }, 30 ); }