zoukankan      html  css  js  c++  java
  • JS-商品图片放大器

    //给mask添加事件,让其随着鼠标移动
    superMask.onmousemove=function(){
    var left=event.offsetX-175/2;
    left=left>0?left:0;
    left=left<175?left:175;
    var top=event.offsetY-175/2;
    top=top>0?top:0;
    top=top<175?top:175;
    mask.style.left=left+"px";
    mask.style.top=top+"px";
    //控制大图的预览区
    largeDiv.style.backgroundPositionX=left*2*(-1)+'px';
    largeDiv.style.backgroundPositionY=top*2*(-1)+'px';
    }
    superMask.onmouseover=function(){
    mask.style.display="block";//控制小遮罩显示
    largeDiv.style.display="block";//控制大图区显示
    var mediumSrc=document.getElementById("mediumImg").src;
    var dotIndex=mediumSrc.lastIndexOf(".");
    var largeSrc=mediumSrc.substring(0,dotIndex-1)+"l"+mediumSrc.substring(dotIndex);
    //console.log(largeSrc);
    largeDiv.style.background='url('+largeSrc+')';//大图链接字符串
    }
    superMask.onmouseout=function(){
    mask.style.display="none";
    largeDiv.style.display="none";
    }

    我的github: https://github.com/moux1024
  • 相关阅读:
    Java 学习资料
    01 html5
    vscode 插件推荐
    08 css高级
    07 css定位
    06 css布局浮动
    05 css盒子
    04 css复合选择器 标签 行高
    03 css字体样式
    02 css基础选择器
  • 原文地址:https://www.cnblogs.com/xd1024/p/4637662.html
Copyright © 2011-2022 走看看