RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
如何使用js制作淘宝放大镜效果-创新互联

小编给大家分享一下如何使用js制作淘宝放大镜效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

盐津网站建设公司成都创新互联公司,盐津网站设计制作,有大型网站制作公司丰富经验。已为盐津近1000家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱,请找那个售后服务好的盐津做网站的公司定做!

具体内容如下



  
    
    
    
      *{
        margin: 0;
        padding: 0;
      }
      img{
        width: 100%;
        height: 100%;
      }
      #content{
        width: auto;
        height: auto;
        margin-left: 200px;
        margin-top: 60px;
      }
      #content-left{
        position: relative;
        width: 420px;
        height: auto;
        float: left;
      }
      #middle{
        border: 1px solid #d2d2d2;
        width: 418px;
        height: 418px;
      }
      #small{
        width: 420px;
        height: auto;
      }
      #glass{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
        top: 0;
        opacity: 0.5;
        z-index: 1;
        display: none;
      }
      ul{
        width: inherit;
        height: 60px;
      }
      ul li{
        display: inline;
        height: 60px;
        list-style: none;
        float: left;
        margin: 10px;
      }
      #content-right{
        position: relative;
        width: 418px;
        height: 418px;
        border: 1px solid #ccc;
        float: left;
        margin-left: 10px;
        overflow: hidden;
        display: none;
      }
      #content-right img{
        position: absolute;
        width: 836px;
        height: 836px;
      }
    
  
  
    
      
        
          
                   
                   
                
  •             
  •             
  •             
  •             
  •           
        
      
                      
    
          var smallLi = document.getElementById("small").getElementsByTagName("ul")[0].getElementsByTagName("li");     var middle = document.getElementById("middle")     var middleImg = middle.getElementsByTagName("img")[0]     var contentRight = document.getElementById("content-right");     var bigImg = contentRight.getElementsByTagName("img")[0]     var glass = document.getElementById("glass");     //获取放大镜大小     var bigImgWidth = getStyle(bigImg,"width");     var bigImgHeight = getStyle(bigImg,"height");     var contentRightWidth = getStyle(contentRight,"width");     var contentRightHeight = getStyle(contentRight,"height");     var middleWidth = getStyle(middle,"width");     var middleHeight = getStyle(middle,"height");     var glassWidth = contentRightWidth/bigImgWidth*middleWidth;     var glassHeight = contentRightHeight/bigImgHeight*middleHeight;     var middleBorder = getStyle(middle,"border")     glass.style.width = glassWidth + "px";     glass.style.height = glassHeight + "px";     for(var i =0;i=middle.offsetWidth-glass.offsetWidth-middleBorder){           x = middle.offsetWidth - glass.offsetWidth -middleBorder;         }         if(y<=middleBorder){           y = middleBorder;         }         if(y>=middle.offsetHeight-glass.offsetHeight-middleBorder){           y = middle.offsetHeight - glass.offsetHeight - middleBorder;         }         glass.style.left = x + "px"         glass.style.top = y + "px"         bigImg.style.left = -x*middleWidth/glassWidth + middleBorder*2 + "px"         bigImg.style.top = -y*middleHeight/glassHeight + middleBorder*2 + "px"         console.log(x)         console.log(x*middleWidth/glassWidth)       }       middle.onmouseout = function(){         contentRight.style.display = "none";         glass.style.display = "none";       }     }     function getStyle(obj,attr){//获取css属性       return (obj.currentStyle)?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,false)[attr]);     }   

看完了这篇文章,相信你对“如何使用js制作淘宝放大镜效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道,感谢各位的阅读!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻标题:如何使用js制作淘宝放大镜效果-创新互联
分享网址:http://lswzjz.com/article/dssoec.html