四川盐亭网站制作公司

js怎么实现图片局部放大效果-创新互联

这篇文章给大家分享的是有关js怎么实现图片局部放大效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联-专业网站定制、快速模板网站建设、高性价比山丹网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式山丹网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖山丹地区。费用合理售后完善，十载实体公司更值得信赖。js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

HTMl结构如下：


  
    
      
      
    
                                  
  •                
    •       
  •                
    •       
  •                
    •        
              

    在这个时候，将静态页面按常规方式进行布局，给予css样式如下：

    那么这个时候，开始写js样式，分布书写的话，第一步要考虑到左边的选项卡。选项卡我采用直接使用src赋值的方法，将滑过的图片对应的src给大图，代码呈现：

    for(var i = 0;i
    这样就可以成功实现选项卡功能，比较简单粗暴的一种方式，当然，大家使用selected结合点击下标和大图下标相等的这一点，也一样可以做出来。
    接下来要考虑到，鼠标在大图上移动时，遮罩层的移动效果。值得一提的时候，这个地方其实存在一个视觉上的误区，看起来是在滑动遮罩层，其实是鼠标的滑动，而遮罩层通过获取鼠标的clientX，clientY来确定自己的位置，遮罩层位置获取代码：
    content.onmousemove = function (e) {
    var evt = window.event||e;

    larger.style.display = "block";
    shadow.style.display = "block";
    var clientX = evt.clientX;
    var clientY = evt.clientY;

    var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

    var X = clientX+scrollLeft-chooseMarginL-shadowW/2;
    var Y = clientY+scrollTop-chooseMarginT-shadowH/2;

    if(X<=0){
      X = 0;
    }
    if(X>=maxX){
      X = maxX;
    }
    if(Y<=0){
      Y = 0;
    }
    if(Y>=maxY){
      Y = maxY;
    }
//    防止遮罩层粘滞，跟随鼠标一起滑出大图位置
    var bigX = X*bigW/contentW;
    var bigY = Y*bigH/contentH;
// bigX / bigW = X / contentW,主图和遮罩层之间存在两倍关系，放大图和原图之间也有两倍关系
    shadow.style.left = X+"px";
    shadow.style.top = Y+"px";

    big.style.left = -bigX+"px";
    big.style.top = -bigY+"px";

  }
    感谢各位的阅读！关于“js怎么实现图片局部放大效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
                    
    
                网页题目：js怎么实现图片局部放大效果-创新互联                
    
                本文URL：http://scyanting.com/article/pcgoc.html
            
        
        
    
            
    其他资讯