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 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jquery轮播图插件使用方法详解
Jul 31 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之变量、常量学习笔记
2008/03/27 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
python3编码问题汇总
2016/09/06 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
django的ORM模型的实现原理
2019/03/04 Python
python如何读取bin文件并下发串口
2019/07/05 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
计算机应用与科学个人的自我评价
2013/11/15 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
会员活动策划方案
2014/08/19 职场文书
规范化管理年活动总结
2014/08/29 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
迎新生标语大全
2014/10/06 职场文书
责任书格式
2015/01/29 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang