基于jquery编写的放大镜插件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于jquery编写的放大镜插件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1831字，纯文字阅读大概需要3分钟。

内容图文

本文实例为大家分享了自己动手实现的jquery放大镜插件，供大家参考，具体内容如下

/**
  ***********************************************
  **此插件使用须知---------------       **
  **滤镜（inner）与其活动区(active)之比要等于 **
  **放大区(movequ)与其内部图片之比。如比值不相 **
  **等，请改变图片大小.------------------------**
  **参数介绍                  **
  **active:滤镜活动区             **
  **inner:滤镜                 **
  **movequ:放大区域              **
  **需在Html头部引入本js脚本及jquery-1.8.3脚本 **
  **如有疑问，请联系QQ：64047399，为你解答   **
  ***********************************************
 
**/
 
 
$.fn.extend({
  yangbo:function(active,inner,movequ){
    $(active).hover(function(){
      $(inner).show();
      $(movequ).show();
      var proportionOne=$(active).width()/$(inner).width();
      var proportionTwo=$(movequ).find('img').width()/$(movequ).width();
      // console.log($(movequ).find('img').width());
      if(proportionOne==proportionTwo){
      $(this).mousemove(function(event){
        //以下为右侧放大
        var proportionLeft=$(active).width()/$(inner).width();
        var proportionTop=$(active).height()/$(inner).height();
        $(movequ).scrollLeft($(inner).position().left*proportionLeft).scrollTop($(inner).position()
        .top*proportionTop);
 
        //以下为小滤镜拖拽
        $(inner).offset({
            left:event.pageX-40,
            top:event.pageY-40
          });
 
        //以下为判断临界值
        if($(inner).position().left<=0){
            $(inner).css({
              left:0
            })
          }
          if($(inner).position().top<=0){
            $(inner).css({
              top:0
            })
          }
          if($(inner).position().left>=$(this).width()-$(inner).width()){
            $(inner).css({
              left:$(this).width()-$(inner).width()
            })
          }
          if($(inner).position().top>=$(this).height()-$(inner).height()){
            $(inner).css({
              top:$(this).height()-$(inner).height()
            })
          }
 
      })
    }else{
      $(active).text('图片宽高不正确:请调整图片宽高-->滤镜与其父亲之比应该等于右侧盒子与右侧图片之比')
      .css({
        background:'yellow',
        color:'red',
      });
    }
  },function(){
      $(inner).hide();
      $(movequ).hide();
    })
 
 
  }
 
})

以上就是本文的全部内容，希望对大家的学习有所帮助。

内容总结

以上是互联网集市为您收集整理的基于jquery编写的放大镜插件全部内容，希望文章能够帮你解决基于jquery编写的放大镜插件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端