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


Posted in Javascript onApril 22, 2015

点击图片,图片拉伸放大显示,效果非常棒!

使用方法:

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;
  });
   
});
 
});

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

Javascript 相关文章推荐
Jquery实现遮罩层的方法
Jun 08 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 #Javascript
javascript解三阶幻方(九宫格)
Apr 22 #Javascript
javascript递归回溯法解八皇后问题
Apr 22 #Javascript
使用C++为node.js写扩展模块
Apr 22 #Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 #Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 #Javascript
jscript读写二进制文件的方法
Apr 22 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python中PIL安装简单教程
2016/04/21 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python调用摄像头显示图像的实例
2018/08/03 Python
python爬虫增加访问量的方法
2019/08/22 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python如何生成xml文件
2020/06/04 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Ajax的工作原理
2015/12/04 面试题
车工岗位职责
2013/11/26 职场文书
语文课外活动总结
2014/08/27 职场文书
员工工作及收入证明
2014/10/28 职场文书
公司员工奖惩制度
2015/08/04 职场文书
Python+Appium新手教程
2021/04/17 Python
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Redis实战高并发之扣减库存项目
2022/04/14 Redis