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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
微信小程序如何访问公众号文章
Jul 08 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
php文件上传表单摘自drupal的代码
2011/02/15 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python3中列表list合并的四种方法
2019/04/19 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
护士自荐信怎么写
2013/10/18 职场文书
毕业生怎样写好自荐信
2013/11/11 职场文书
工作交流会欢迎词
2014/01/12 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
学校少先队工作总结
2015/08/12 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS