基于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的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
使用js获取身份证年龄的示例代码
Dec 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
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
asp 取文本框名称代码
2008/12/02 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
理解python正则表达式
2016/01/15 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
Python tkinter事件高级用法实例
2018/01/31 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Django使用rest_framework写出API
2020/05/21 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
个人自我评价范文
2014/02/05 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
总结会主持词
2015/07/02 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript