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 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
JS求平均值的小例子
Nov 29 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
详解适配器在JavaScript中的体现
Sep 28 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
Vue.js仿Select下拉框效果
Feb 18 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
python实现证件照换底功能
2019/08/20 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
《有趣的发现》教学反思
2014/04/15 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
CentOS安装Nginx并部署vue
2022/04/12 Servers