jQuery实现文章图片弹出放大效果


Posted in jQuery onApril 06, 2017

首先先搭写一个基本的格式:

$.fn.popImg = function() {
  //your code goes here
}

然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部,如下:

;(function($,window,document,undefined){
  $.fn.popImg = function() {
   //your code goes here
  }
})(jQuery,window,document);

那么接下来我们就在里面实现点击文章图片弹出该图片并放大的效果。

整体代码如下:

;(function($,window,document,undefined){
 $.fn.popImg = function(){

   //创建弹出层
   var $layer = $("<div>").css({
    position:'fixed',
    left:0,
    right:0,
    top:0,
    bottom:0,
    width:'100%',
    height:'100%',
    zIndex:9999999,
    display:'none',
    background: "#000",
    opacity:'0.6'
   });

   //复制点击的图片,获得图片的宽高以及位置
   var cloneImg = function($targetImg){
     var cloneW = $targetImg.width(),
       cloneH = $targetImg.height(),
       left = $targetImg.offset().left,
       top = $targetImg.offset().top;

     return $targetImg.clone().css({
       position:'fixed',
       width:cloneW,
       height:cloneH,
       left:left,
       top:top,
       zIndex:10000000
     });
   };

   //让复制的图片居中显示
   var centerImg = function($cloneImg){
     var dW = $(window).width();
     var dH = $(window).height();
     $cloneImg.css('cursor','zoom-out').attr('clone-bigImg',true);
     var img = new Image();
     img.onload = function(){
      $cloneImg.stop().animate({
         width: this.width,
        height: this.height,
        left: (dW - this.width) / 2,
        top: (dH - this.height) / 2
      },300);
     }
     img.src = $cloneImg.attr('src');
   };

   this.each(function(){
     $(this).css('cursor','zoom-in').on('click',function(){
       var $body = $("body");
       $layer.appendTo($body);
       $layer.fadeIn(300);
       var $c = cloneImg($(this));
       $c.appendTo($body);
       centerImg($c);
     });
   });

  var timer = null;
  $(window).on("resize", function(){
   $("img[clone-bigImg]").each(function(){
    var $this = $(this);
    timer && clearTimeout(timer);
    timer = setTimeout(function(){
     centerImg($this);
    }, 10);
   });
  });

  $(window).on("click keydown", function(evt){
   if(evt.type == "keydown" && evt.keyCode === 27) {
    $layer.fadeOut(300);
    $("img[clone-bigImg]").remove();
   }
   var $this = $(evt.target);
   if($this.attr("clone-bigImg")){
    $layer.fadeOut(300);
    $("img[clone-bigImg]").remove();
   }
  });
 }
})(jQuery,window,document);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 #jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 #jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 #jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 #jQuery
You might like
根德YB400的电路分析
2021/03/02 无线电
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
详解Python yaml模块
2020/09/23 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
董事长职责范文
2013/11/08 职场文书
班主任2015新年寄语
2014/12/08 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书