基于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 面向对象继承
Nov 26 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
GD输出汉字的函数的分析
2006/10/09 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
培养自己的php编码规范
2015/09/28 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
js异或加解密效果代码
2008/06/25 Javascript
js DOM的学习笔记
2011/12/22 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Python实现网站注册验证码生成类
2017/06/08 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python的sorted用法详解
2019/06/25 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
关于Java finally的面试题
2016/04/27 面试题
会计专业自我鉴定范文
2013/10/06 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
仓库主管岗位职责
2014/03/02 职场文书
初中班主任寄语
2014/04/04 职场文书
社区好人好事材料
2014/12/26 职场文书
实习介绍信范文
2015/05/05 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python