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实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
javascript数组的使用
2013/03/28 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python实现二叉堆
2016/02/03 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python  Django 母版和继承解析
2019/08/09 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
社区健康教育工作方案
2014/06/03 职场文书
另类冲刺标语
2014/06/24 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle
Linux中各个目录的作用与内容
2022/06/28 Servers