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
  • 相关阅读:
    BSGS
    [AT1252] IOIOI カード占い
    [十二省联考2019]春节十二响
    [CF912E] Prime Gift
    CDQ分治
    [CF747F] Igor and Interesting Numbers
    [十二省联考2019]异或粽子
    51Nod 2128 前缀异或
    51Nod 3212 数字变位
    HDU 1106 排序
  • 原文地址:https://www.cnblogs.com/xd1024/p/4637662.html
Copyright © 2011-2022 走看看