基于jquery编写的放大镜插件


Posted in Javascript onMarch 23, 2016

本文实例为大家分享了自己动手实现的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();
    })
 
 
  }
 
})

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

Javascript 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
简单的Jquery全选功能
Nov 07 Javascript
图解JavaScript中的this关键字
May 28 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
JavaScript 定时器详情
Nov 11 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 #Javascript
JavaScript弹出对话框的三种方式
Mar 23 #Javascript
JS随机洗牌算法之数组随机排序
Mar 23 #Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 #Javascript
JavaScript学习笔记之数组去重
Mar 23 #Javascript
JavaScript学习笔记之数组随机排序
Mar 23 #Javascript
JavaScript学习笔记之数组求和方法
Mar 23 #Javascript
You might like
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python实现一个简单的ping工具方法
2019/01/31 Python
pytorch中图像的数据格式实例
2020/02/11 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
什么是python类属性
2020/06/10 Python
python生成word合同的实例方法
2021/01/12 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
金融行业务员的自我评价
2013/12/13 职场文书
法务专员岗位职责
2014/01/02 职场文书
合同意向书范本
2014/07/30 职场文书
债务授权委托书范本
2014/10/17 职场文书
工作失职检讨书
2015/01/26 职场文书
出国导师推荐信
2015/03/25 职场文书
廉政承诺书范文
2015/04/28 职场文书
圆明园观后感
2015/06/03 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis