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

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

$.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);

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 基于Jquery插件开发之图片放大镜效果(仿淘宝)

    基于Jquery插件开发之图片放大镜效果(仿淘宝)

    需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p

  • jQuery当鼠标悬停时放大图片的效果实例

    jQuery当鼠标悬停时放大图片的效果实例

    这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7">  <LI sizcach

  • jQuery插件zoom实现图片全屏放大弹出层特效

    jQuery插件zoom实现图片全屏放大弹出层特效

    1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo

  • 用JQuery模仿淘宝的图片放大镜显示效果

    用JQuery模仿淘宝的图片放大镜显示效果

    如图 今天我做的是利用JQuery模拟这个效果 源码如下 复制代码 代码如下: <head> <script type="text/javascript" src="Js/jquery-1.4.1.js"></script> <script type="text/javascript"> //假设data是从数据库取到的数据 var data = {"images/1_small.jpg&

  • jQuery实现的鼠标滑过弹出放大图片特效

    jQuery实现的鼠标滑过弹出放大图片特效

    本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等, 我们先来看个演示图 下面是代码实例: <link rel="stylesheet" href="../css/common.css" type="text/css" /> <script type="text/javascript" src="../

  • 基于jquery实现一张图片点击鼠标放大再点缩小

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.8.3.min.js"></script> <sc

  • jQuery实现等比例缩放大图片让大图片自适应页面布局

    在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

  • jquery图片放大镜功能的实例代码

    jquery图片放大镜功能的实例代码

    复制代码 代码如下: /*放大镜*/ .ZoomMain {margin:100px;width:395px;height:460px;float:left;position:relative;} .ZoomMain .zoom {height:393px;width:393px;position:relative;border: 1px solid #dcdddd;} .ZoomMain .zoom .move{position:absolute;left:0; top:0;display:n

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

    首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部,如下: ;(function($,window,document,undefined){ $.fn.popImg = function() { //your code goes here } })(jQuery,window,document); 那么接下来我们就在里面实现点击文章图片弹出该图片并放

  • js实现点击图片在屏幕中间弹出放大效果

    js实现点击图片在屏幕中间弹出放大效果 效果图 点击图片后 关键代码 html <div> <img height="100" width="100" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" class="pic"/> <img height="100" wid

  • 使用jQuery实现页面定时弹出广告效果

    使用jQuery实现页面定时弹出广告效果

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show()) 第六步:清除显示广告图片的定时操作 第七步:设置定时操作(隐藏广告图片的函数) 第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide()) 第九步:清除隐藏广告图片的定时操作 <script

  • jQuery实现为图片添加镜头放大效果的方法

    jQuery实现为图片添加镜头放大效果的方法

    本文实例讲述了jQuery实现为图片添加镜头放大效果的方法.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: $(function () { $("#img_01").imageLens(); $("#img_02").imageLens({ lensSize: 200 }); $("#img_03").imageLens({ imageSrc: "images/sample01.jpg" }); $(&

  • jQuery实现的自定义弹出层效果实例详解

    jQuery实现的自定义弹出层效果实例详解

    本文实例讲述了jQuery实现的自定义弹出层效果.分享给大家供大家参考,具体如下: dialog.css: #DialogBySHFLayer { width:100%; height:100%; left:0; top:0; position:fixed; z-index:500; background-color:#333333; filter:alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; } /*弹出的提示框*/ #DialogByS

  • jquery实现点击弹出层效果的简单实例

    jquery实现点击弹出层效果的简单实例

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定

  • jQuery鼠标移动图片上实现放大效果

    首先界面上要有图片,下面是图片 <img id="big-circle" src="images/pic2.jpg" alt=""/>其次在script代码段中加入如下代码,进行适量修改即可 $(document).ready(function () { var x = 10; var y = 20; $("#big-circle").mouseover(function (e) { var tooTip = &q

  • jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示       源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以

  • jquery win 7透明弹出层效果的简单代码

    复制代码 代码如下: $("#firefoxicon").click(function() {       $("#window1").chinaz({             windowtitle:          "firefox",             windowpositiontop:    "center",             windowpositionleft:   "center&qu

  • jquery实现可自动判断位置的弹出层效果代码

    jquery实现可自动判断位置的弹出层效果代码

    本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

随机推荐