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 19 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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连mysql和oracle数据库性能比较
2006/10/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Python基于template实现字符串替换
2020/11/27 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
党员公开承诺书和承诺事项
2014/03/25 职场文书
培训讲师岗位职责
2014/04/13 职场文书
网络优化专员求职信
2014/05/04 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
聘任书格式及范文
2015/09/21 职场文书
市场营销计划书
2019/04/24 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
python开发飞机大战游戏
2021/07/15 Python
如何利用React实现图片识别App
2022/02/18 Javascript
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技