效果体验：http://hovertree.com/texiao/jqimg/1/

效果图：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>美女图片浏览特效 - 何问起</title>
  6. <link href="http://hovertree.com/texiao/jqimg/1/css/clearbox.css" rel="stylesheet" type="text/css" />
  7. <script src="http://hovertree.com/texiao/jqimg/1/js/clearbox.js" type="text/javascript"></script>
  8. <script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
  9. </head>
  10. <body>
  11.  
  12. <style type="text/css">
  13. * {
  14. margin: 0;
  15. padding: 0;
  16. list-style-type: none;
  17. }
  18.  
  19. a, img {
  20. border: 0;
  21. }
  22.  
  23. body {
  24. font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
  25. }
  26.  
  27. .playbox {
  28. width: 840px;
  29. margin: 5px auto;
  30. overflow: hidden;
  31. padding: 20px 0px 0px 20px;
  32. border: solid 1px #ddd;
  33. }
  34.  
  35. .playbox a {
  36. height: 360px;
  37. overflow: hidden;
  38. display: block;
  39. float: left;
  40. margin-right: 20px;
  41. margin-bottom: 20px;
  42. position: relative;
  43. text-decoration: none;
  44. }
  45.  
  46. .playbox a img {
  47. max-width: 260px;
  48. _width: expression(this.width > 260 ? "260px" : this.width); /*使ie6支持max-width*/
  49. border: none;
  50. }
  51.  
  52. .txt {
  53. position: absolute;
  54. left: 0;
  55. bottom: 0;
  56. width: 100%;
  57. height: 45px;
  58. line-height: 45px;
  59. text-align: center;
  60. color: #fff;
  61. background: rgba(0,0,0,0.6);
  62. }
  63.  
  64. .txt h3 {
  65. font-weight: normal;
  66. margin: 0px;
  67. }
  68.  
  69. .txt p {
  70. font-size: 14px;
  71. display: block;
  72. line-height: 20px;
  73. -webkit-margin-before: 1em;
  74. -webkit-margin-after: 1em;
  75. -webkit-margin-start: 0px;
  76. -webkit-margin-end: 0px;
  77. -moz-margin-before: 1em;
  78. -moz-margin-after: 1em;
  79. -moz-margin-start: 0px;
  80. -moz-margin-end: 0px;
  81. }
  82. .hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}
  83. </style>
  84.  
  85. <h2 style="margin:0 auto; width:840px; text-align:center; margin-top:10px;">点击美女，相册播放</h2>
  86. <div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/flurt6nt.htm" target="_blank">原文</a> <a href="http://hovertree.com/texiao/" target="_blank">特效库</a>
  87. <a href="http://hovertree.com/" target="_blank">首页</a>
  88. </div>
  89. <div class="playbox">
  90. <a href="http://hovertree.com/texiao/jqimg/1/images/1.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/1.jpg" /><div class="txt"><h3>性感美女</h3><p>送福利了，拿走不懈！</p></div></a>
  91. <a href="http://hovertree.com/texiao/jqimg/1/images/2.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/2.jpg" /><div class="txt"><h3>性感美女</h3><p>更多请访问：hovertree.com/texiao/ </p></div></a>
  92. <a href="http://hovertree.com/texiao/jqimg/1/images/3.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/3.jpg" /><div class="txt"><h3>性感美女</h3><p>你过来，我保证不会打你的！</p></div></a>
  93. <a href="http://hovertree.com/texiao/jqimg/1/images/4.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/4.jpg" /><div class="txt"><h3>性感美女</h3><p>不需要遮罩层的话，可以删除</p></div></a>
  94. <a href="http://hovertree.com/texiao/jqimg/1/images/5.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/5.jpg" /><div class="txt"><h3>性感美女</h3><p>不需要遮罩层的话，可以删除</p></div></a>
  95. <a href="http://hovertree.com/texiao/jqimg/1/images/6.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/6.jpg" /><div class="txt"><h3>性感美女</h3><p>何问起，其实是一位美女。</p></div></a>
  96. </div>
  97.  
  98. <script type="text/javascript">
  99. // 不是必要的代码
  100. //从底部上升的遮罩效果开始
  101. $(".playbox a").hover(function(){
  102. $(this).find(".txt").stop().animate({height:"360px"},200);
  103. $(this).find(".txt h3").stop().animate({paddingTop:"60px"},200);
  104. },function(){
  105. $(this).find(".txt").stop().animate({height:"45px"},200);
  106. $(this).find(".txt h3").stop().animate({paddingTop:"0px"},200);
  107. })
  108. //从底部上升的遮罩效果结 何问起
  109. </script>
  110.  
  111. </body>
  112. </html>

源码下载：http://hovertree.com/h/bjaf/ljn1fwka.htm

转自：http://hovertree.com/h/bjaf/flurt6nt.htm

特效库：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery点击图片弹出放大特效下载的更多相关文章

  1. jQuery点击图片弹出放大可拖动图片查看

    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...

  2. jQuery点击图片弹出大图遮罩层

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...

  3. jquery 点击图片弹出遮罩层查看大图

    <div class="photobox"> <ul> <li data-date="'+data[i].id+'"> &l ...

  4. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  5. jQuery效果之封装一个文章图片弹出放大效果

    首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部, ...

  6. 前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)

    <img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> & ...

  7. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. HTML+js+css实现点击图片弹出上传文件窗口的两种思路

    第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfil ...

  9. 点击图片弹出input type=file选择器

    <label for="UploadCoverPhoto" class="cursor-pointer"> <img class=" ...

随机推荐

  1. [ASP.NET MVC 小牛之路]16 - Model 验证

    上一篇博文 [ASP.NET MVC 小牛之路]15 - Model Binding 中讲了MVC在Model Binding过程中如何根据用户提交HTTP请求数据创建Model对象.在实际的项目中, ...

  2. C语言 · 图形显示

    问题描述 编写一个程序,首先输入一个整数,例如5,然后在屏幕上显示如下的图形(5表示行数): * * * * * * * * * * * * * * *     #include "stdi ...

  3. Git命令汇总

    1. 工作区和版本库 说明: 工作区(Working Directory)就是创建仓库的文件夹 版本库(Repository)就是工作区的隐藏目录.git,版本库中有暂存区(stage/index)和 ...

  4. thinkPHP入门

    什么是框架 框架就是一定结构的代码,框架提供一个开发web程序的基础架构以及常用的功能 代码,PHP框架的web程序开发拜倒了流水线上. php框架就是一定要按别人规定好的架构编写. php开发框架有 ...

  5. uwp如何建立任何形状的头像，如圆形，方形，六边形等

    最近掌上英雄联盟更新了新的界面,其中“我”界面的更新比较大,我目前还在加紧跟进.在做这个界面的时候,这个头像我想了一下,其实挺好解决的.先上个原图 这个头像一开始我也完全找不到头绪,然后我把头像放大了 ...

  6. 使用未付费的账号真机调试 iOS 程序，过几天后程序一打开就会闪退

    使用未付费的苹果开发者账号真机调试 iOS 程序,过几天后程序一打开就会闪退.   解决办法: 删除 Provisioning Profile,重新配置一次. 终极解决办法:花钱购买苹果开发者账号. ...

  7. MVC在添加控制器的时候发现没有添加的选项了？肿么办？

    异常汇总:http://www.cnblogs.com/dunitian/p/4523006.html#efmvc 因为马上要出去,先上几个关键图简单说一下,有什么不清楚的可以直接留言 nuget包 ...

  8. 扩：new and override

    昨天有个网友问我继承里面的new和override关键词有啥区别,呃,我们来看个例子就知道了 new ==>隐藏父类同名方法  override==>覆盖 定义一个父类: public c ...

  9. Android搜索框效果

    转载:http://blog.csdn.net/walker02/article/details/7917392 需求:项目中的有关搜索的地方,加上清空文字的功能,目的是为了增加用户体验,使用户删除文 ...

  10. Rust初步（二）：使用Visual Studio Code编写Rust程序（猜猜看游戏）

    我是照着下面这篇帮助文档,完成了第一个完整的Rust程序: 猜猜看 游戏 http://kaisery.gitbooks.io/rust-book-chinese/content/content/3. ...