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-data的三种用法
Apr 18 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 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
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Python3最长回文子串算法示例
2019/03/04 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python单例设计模式实现解析
2020/01/07 Python
Pytorch之finetune使用详解
2020/01/18 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
python实现用户名密码校验
2020/03/18 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
高校十八大报告感想
2014/01/27 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
学术诚信承诺书
2014/05/26 职场文书
期末复习计划
2015/01/19 职场文书
班主任寄语2015
2015/02/26 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis