jQuery图片特效插件Revealing实现拉伸放大

点击图片，图片拉伸放大显示，效果非常棒！

使用方法：

1、head区域引用文件 jquery.js，photorevealer.js，datouwang.css

2、在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码

3、图片个数可以自由增减，增加或者删除<td></td>即可

4、如果图片信息更多，需要更大的空间，可修改photorevealer.js中第36行的数字

核心代码：

$(document).ready(function(){

$('.photo_slider').each(function(){

  var $this = $(this).addClass('photo-area');
  var $img = $this.find('img');
  var $info = $this.find('.info_area');

  var opts = {};

  $img.load(function(){
    opts.imgw = $img.width();
    opts.imgh = $img.height();
  });

  opts.orgw = $this.width();
  opts.orgh = $this.height();

  $img.css ({
    marginLeft: "-150px",
    marginTop: "-150px"
  });

  var $wrap = $('<div class="photo_slider_img">').append($img).prependTo($this);

  var $open = $('<a href="#" class="more_info">More Info ></a>').appendTo($this);

  var $close = $('<a class="close">Close</a>').appendTo($info);

  opts.wrapw = $wrap.width();
  opts.wraph = $wrap.height();

  $open.click(function(){
    $this.animate({
      width: opts.imgw,
      height: (opts.imgh+30),
      borderWidth: "10"
    }, 600 );

    $open.fadeOut();

    $wrap.animate({
      width: opts.imgw,
      height: opts.imgh
    }, 600 );

    $(".info_area",$this).fadeIn();

    $img.animate({
      marginTop: "0px",
      marginLeft: "0px"
    }, 600 );

    return false;
  });

  $close.click(function(){
    $this.animate({
      width: opts.orgw,
      height: opts.orgh,
      borderWidth: "1"
     }, 600 );

    $open.fadeIn();

    $wrap.animate({
      width: opts.wrapw,
      height: opts.wraph
       }, 600 );

      $img.animate({
        marginTop: "-150px",
        marginLeft: "-150px"
      }, 600 );

    $(".info_area",$this).fadeOut();
    return false;
  });

});

});

以上所述就是本文的全部代码了，希望大家能够喜欢。

赞 (0)

相关推荐

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

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

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

  • 基于jquery的放大镜效果

    核心代码: 复制代码 代码如下: $(function(){ var mouseX = 0; //鼠标移动的位置X var mouseY = 0; //鼠标移动的位置Y var maxLeft = 0; //最右边 var maxTop = 0; //最下边 var markLeft = 0; //放大镜移动的左部距离 var markTop = 0; //放大镜移动的顶部距离 var perX = 0; //移动的X百分比 var perY = 0; //移动的Y百分比 var bigLeft

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果.  3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ［"区域":是宽*高,也就是面积:] ［"放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数］ 一.怎么能放大或者缩小图片的局部?

  • Jquery实现图片放大镜效果的思路及代码(自写)

    Jquery实现图片放大镜效果的思路及代码(自写)

    网上一大堆限制多,文档也难看懂,而且麻烦~自己写了个.大笑 算法: 第一步: 放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度,求出鼠标在容器中移动的百分比 第二部: 得到百分比之后 x=-(x百分比*图片的宽度-显示容器的宽度/2); y=-(y百分比*图片的高度-显示容器的高度/2); 两个参数,x和y,就是大图的位置了,后面加了个显示容器的大小/2 是为了保证图片显示在中间. 效果图:  代码: 复制代码 代码如下: <!DOCTYPE HTML> <html>

  • jquery插件珍藏(图片局部放大/信息提示框)

    jquery插件珍藏(图片局部放大/信息提示框)

    1.图片局部放大 jQZoom Evolution (演示 | 下载) 2.信息提示框

  • 用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 chili图片远处放大插件

    为了让本地图片.远程图片.过小的图片都适应此插件,有很多细节问题要处理. 首先定义结构: <div class="imgMagnifierWrap"> <div class="overlay"><!--覆盖层,鼠标的感应区域,位于小图上最方--></div> <div class="tipboxHover"><!--小图上方的悬停提示方框--></div> <

  • 来自国外的14个图片放大编辑的jQuery插件整理

    来自国外的14个图片放大编辑的jQuery插件整理

    基于Web的在线应用已经是一个逐步成熟的趋势,Web应用的丰富多样化,都是基于JavaScript框架完成的,其中 jQuery 框架被越来越多的Web开发者青睐,它可以让你"少写,多做"轻松完成复杂效果,这里就是基于jQuery 的14个图片放大编辑插件. 1,jQuery gzoom plugin 2,Hover Zoom 3,AnythingZoomer jQuery Plugin 4,JQZoom 5,jQuery Cycle plugin 6,crop, labelOver

  • 图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi

  • 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插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • 基于jQuery插件jqzoom实现的图片放大镜效果示例

    基于jQuery插件jqzoom实现的图片放大镜效果示例

    本文实例讲述了基于jQuery插件jqzoom实现的图片放大镜效果.分享给大家供大家参考,具体如下: jqzoom插件实现图片放大镜效果. 图1.1jqzoom插件实现图片放大镜效果 1.引入jqurty和jqzoom插件 <script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script> <script src="/js/common/jquer

  • 关于Jqzoom的使用心得 jquery放大镜效果插件

    下面是完整的代码 jqzoom打包下载地址 复制代码 代码如下: <html> <head> <title>JQzoom Demo</title> <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../js/jqzoom.pack.1.0.1.js"

  • 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

随机推荐