JS实现电商放大镜效果

2023-09-25 23:15:05 45

26-电商放大镜 *{ padding:0; margin:0; } #left{ padding:0; margin:0; width:400px; height:400px; border:2pxsolidblue; background:url(http://chuantu.biz/t6/17/1503469475x2063891122.jpg)no-repeat; float:left; cursor:crosshair; position:relative; box-sizing:border-box; } #box{ width:200px; height:200px; background:white; opacity:0.6; position:absolute; top:0; left:0; display:none; box-sizing:border-box; } #cover{ width:400px; height:400px; background:red; position:absolute; left:0; top:0; opacity:0; box-sizing:border-box; } #right{ width:400px; height:400px; border:2pxsolidblack; overflow:hidden; position:relative; display:none; box-sizing:border-box; } #rpic{ position:absolute; } window.onload=function(){ varleft=document.getElementById("left"); varright=document.getElementById("right"); varrpic=document.getElementById("rpic"); varbox=document.getElementById("box"); varcover=document.getElementById("cover"); //给左侧加鼠标移动事件 cover.onmousemove=function(){ //获得事件对象 varev=window.event; varmouse_left=ev.offsetX||ev.layerX; varmouse_top=ev.offsetY||ev.layerY; //document.title=mouse_left+'|'+mouse_top; //计算色块的位置 varbox_left=mouse_left-100; varbox_top=mouse_top-100; //判断是否超出 if(box_left<0){ box_left=0; } if(box_left>200){ box_left=200; } if(box_top<0){ box_top=0; } if(box_top>200){ box_top=200; } //让色块移动 box.style.left=box_left+'px'; box.style.top=box_top+'px'; //计算右侧图片位置 varrpic_left=box_left*-2; varrpic_top=box_top*-2; //让右侧移动 rpic.style.left=rpic_left+'px'; rpic.style.top=rpic_top+'px'; } //给左侧加鼠标移入事件 cover.onmouseover=function(){ //让左侧色块和右侧隐藏 box.style.display='block'; right.style.display='block'; } //给左侧加鼠标移出事件 cover.onmouseout=function(){ //让左侧色块和右侧隐藏 box.style.display='none'; right.style.display='none'; } }

JS实现电商放大镜效果

热门推荐

随机推荐