ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > IT职业 > IT图书 > jQuery仿百度图片搜索图片放大效果

jQuery仿百度图片搜索图片放大效果

原创 IT图书 作者：chunzhisu 时间：2014-10-21 11:29:19 0 删除 编辑

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
  2. <html>
  3. <head>
  4. <meta http-equiv=\"charset\" content=\"text/html; charset=utf-8\"></meta>
  5. <title>jQuery仿百度图片搜索图片放大效果-潜水无堵塞排污泵-潜水排污泵</title>
  6. <script id=\"jquery_183\" type=\"text/javascript\" class=\"library\" src=\"/js/jquery-1.7.2.min.js\"></script>
  7. <style>
  8. div, ul{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12. :visited {
  13.     outline-style: none;
  14. }
  15. img{
  16.     border: 0;
  17. }
  18. .main{
  19.     width: 720px;
  20.     margin: 30px auto;
  21.     height: 190px;
  22. }
  23. .imgtag{
  24.     float: left;
  25.     width: 144px;
  26.     height: 90px;
  27.     position: relative;
  28. }
  29. .tag_item{
  30.     width: 144px;
  31.     height: 90px;
  32.     position: absolute;
  33.     top: 0px;
  34.     left: 0px;
  35.     overflow: hidden;
  36. }
  37. .curr{
  38.     z-index: 100;
  39.     box-shadow: 0 0 5px #000;
  40.     background: rgba(37, 37, 37, 0.65);
  41.     background: #666 9;
  42. }
  43. .curr img{
  44.     opacity: 1;
  45.     filter: alpha(opacity = 100);
  46. }
  47. .not_curr{
  48.     opacity: .5;
  49.     filter: alpha(opacity = 45);
  50. }
  51. .taglist{
  52.     height: 21px;
  53.     width: 46px;
  54.     overflow: hidden;
  55.     position: absolute;
  56.     bottom: 0;
  57.     left: 0;
  58.     border-radius: 0 11px 11px 0;
  59.     background: rgba(37,37,37,0.5);
  60. }
  61. .taglist .tags{
  62.     display: block;
  63.     list-style: none;
  64.     color: #f7f7f7;
  65.     font-size: 12px;
  66.     height: 21px;
  67.     width: 300px;
  68. }
  69. .tag{
  70.     display: block;
  71.     float: left;
  72.     height: 21px;
  73.     line-height: 21px;
  74.     text-align: left;
  75.     line-height: 22px    9;
  76. }
  77. .tag a {
  78.     color: #f7f7f7;
  79.     text-decoration: none;
  80.     display: block;
  81.     padding: 0 3px;
  82. }
  83. .tag1{
  84.     width: 65px;
  85. }
  86. .tag1 a {
  87.     padding: 0 10px 0 10px;
  88.     font-weight: bold;
  89. }
  90. .tag2 {
  91.     width: 42px;
  92.     text-align: center;
  93. }
  94. </style>
  95. <script type=\"text/javascript\">
  96. $(function(){
  97.     $(\".tag_item\").each(function(i, target){
  98.         $(target).mouseenter(function(e){
  99.             //stop current animation.
  100.             $(target).stop();
  101.             $(target).find(\".taglist\").stop(false, true);
  102.             $(target).parent().addClass(\"curr\");
  103.             $(\".tag_item\").not($(target)).addClass(\"not_curr\");
  104.             $(target).find(\".taglist\").animate({
  105.                 width: \"248px\"
  106.             }, \"normal\");
  107.             $(target).animate({
  108.                 width: \"192px\",
  109.                 height: \"141px\",
  110.                 top: \"-20px\",
  111.                 left: \"-24px\"
  112.             }, \"normal\");
  113.         });
  114.         $(target).mouseleave(function(e){
  115.             //stop current animation.
  116.             $(target).stop();
  117.             $(target).find(\".taglist\").stop(false, true);
  118.             $(target).parent().removeClass(\"curr\");
  119.             $(\".tag_item\").not(target).removeClass(\"not_curr\");
  120.             $(target).find(\".taglist\").animate({
  121.                 width: \"46px\"
  122.             }, \"normal\");
  123.             $(target).animate({
  124.                 width: \"144px\",
  125.                 height: \"90px\",
  126.                 top: \"0\",
  127.                 left: \"0\"
  128.             }, \"normal\");
  129.         });
  130.     })
  131. });
  132. </script>
  133. </head>
  134. <body>
  135.     <div class=\"main\">
  136.         <div class=\"imgtag\">
  137.             <div class=\"tag_item\">
  138.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E7%BE%8E%E5%A5%B3|%E5%85%A8%E9%83%A8|0|1\">
  139.                 <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147211411710611.jpg?0129\">
  140.                 </a>
  141.                 <div class=\"taglist\" style=\"width: 46px;\">
  142.                     <ul class=\"tags\">
  143.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">美女</a></li>
  144.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">诱惑</a></li>
  145.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">写真</a></li>
  146.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">小清新</a></li>
  147.                     </ul>
  148.                 </div>
  149.             </div>
  150.         </div>    
  151.         <div class=\"imgtag\">
  152.             <div class=\"tag_item\">
  153.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E5%AE%A0%E7%89%A9|%E5%85%A8%E9%83%A8|0|0\">
  154.                 <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147215570262390.jpg?0129\">
  155.                 </a>    
  156.                 <div class=\"taglist\" style=\"width: 46px;\">
  157.                     <ul class=\"tags\">
  158.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">宠物</a></li>
  159.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">萌货</a></li>
  160.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">金毛</a></li>
  161.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">喵星人</a></li>
  162.                     </ul>
  163.                 </div>
  164.             </div>
  165.         </div>
  166.         <div class=\"imgtag\">
  167.             <div class=\"tag_item\">
  168.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E6%97%85%E6%B8%B8|%E5%85%A8%E9%83%A8|0|0\">
  169.                 <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147212365106883.jpg?0129\">
  170.                 </a>
  171.                 <div class=\"taglist\" style=\"width: 46px;\">
  172.                     <ul class=\"tags\">
  173.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">旅游</a></li>
  174.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">九寨沟</a></li>
  175.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">美景</a></li>
  176.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">泰国</a></li>
  177.                     </ul>
  178.                 </div>
  179.             </div>
  180.         </div>
  181.         <div class=\"imgtag\">
  182.             <div class=\"tag_item\">
  183.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E6%91%84%E5%BD%B1|%E5%85%A8%E9%83%A8|0|0\">
  184.                 <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147211804422349.jpg?0129\">
  185.                 </a>
  186.                 <div class=\"taglist\" style=\"width: 46px;\">
  187.                     <ul class=\"tags\">
  188.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">旅游</a></li>
  189.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">九寨沟</a></li>
  190.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">美景</a></li>
  191.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">泰国</a></li>
  192.                     </ul>
  193.                 </div>
  194.             </div>
  195.         </div>
  196.         <div class=\"imgtag\">
  197.             <div class=\"tag_item\">
  198.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E5%A3%81%E7%BA%B8|%E5%85%A8%E9%83%A8|0|1\">
  199.                 <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147210884227232.jpg?0129\">
  200.                 </a>
  201.                 <div class=\"taglist\" style=\"width: 46px;\">
  202.                     <ul class=\"tags\">
  203.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">旅游</a></li>
  204.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">九寨沟</a></li>
  205.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">美景</a></li>
  206.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">泰国</a></li>
  207.                     </ul>
  208.                 </div>    
  209.             </div>
  210.         </div>
  211.         <div class=\"imgtag\">
  212.             <div class=\"tag_item\">
  213.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E6%98%8E%E6%98%9F|%E5%85%A8%E9%83%A8|0|0\">
  214.                 <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147211593418705.jpg?0129\">
  215.                 </a>
  216.                 <div class=\"taglist\" style=\"width: 46px;\">
  217.                     <ul class=\"tags\">
  218.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">旅游</a></li>
  219.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">九寨沟</a></li>
  220.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">美景</a></li>
  221.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">泰国</a></li>
  222.                     </ul>
  223.                 </div>
  224.             </div>    
  225.         </div>
  226.         <div class=\"imgtag\">
  227.             <div class=\"tag_item\">
  228.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E6%B1%BD%E8%BD%A6|%E5%85%A8%E9%83%A8|0|0\">
  229.                 <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147218022833678.jpg?0129\">
  230.                 </a>    
  231.                 <div class=\"taglist\" style=\"width: 46px;\">
  232.                     <ul class=\"tags\">
  233.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">旅游</a></li>
  234.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">九寨沟</a></li>
  235.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">美景</a></li>
  236.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">泰国</a></li>
  237.                     </ul>
  238.                 </div>
  239.             </div>
  240.         </div>
  241.         <div class=\"imgtag\">
  242.             <div class=\"tag_item\">
  243.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E8%AE%BE%E8%AE%A1|%E5%85%A8%E9%83%A8|0|0\">
  244.                 <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147215449569490.jpg?0129\">
  245.                 </a>    
  246.                 <div class=\"taglist\" style=\"width: 46px;\">
  247.                     <ul class=\"tags\">
  248.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">旅游</a></li>
  249.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">九寨沟</a></li>
  250.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">美景</a></li>
  251.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">泰国</a></li>
  252.                     </ul>
  253.                 </div>
  254.             </div>
  255.         </div>
  256.         <div class=\"imgtag\">
  257.             <div class=\"tag_item\">
  258.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E6%90%9E%E7%AC%91|%E5%85%A8%E9%83%A8|0|0\">
  259.                     <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147213742280004.jpg?0129\">
  260.                 </a>    
  261.                 <div class=\"taglist\" style=\"width: 46px;\">
  262.                     <ul class=\"tags\">
  263.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">旅游</a></li>
  264.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">九寨沟</a></li>
  265.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">美景</a></li>
  266.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">泰国</a></li>
  267.                     </ul>
  268.                 </div>
  269.             </div>
  270.         </div>
  271.         <div class=\"imgtag\">
  272.             <div class=\"tag_item\">
  273.                 <a style=\"height:100%; width:100%\" href=\"http://image.baidu.com/i?tn=list&word=liulan#%E5%8A%A8%E6%BC%AB|%E5%85%A8%E9%83%A8|0|0\">
  274.                 <img style=\"width:100%\" src=\"http://127.0.0.1/UploadFiles/2014-07/2/20147214285063157.jpg?0129\">
  275.                 </a>
  276.                 <div class=\"taglist\" style=\"width: 46px;\">
  277.                     <ul class=\"tags\">
  278.                         <li class=\"tag tag1\"><a href=\"javascript:void(0)\">旅游</a></li>
  279.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">九寨沟</a></li>
  280.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">美景</a></li>
  281.                         <li class=\"tag tag2\"><a href=\"javascript:void(0)\">泰国</a></li>
  282.                     </ul>
  283.                 </div>
  284.             </div>        
  285.         </div>
  286.     </div>
  287. </body>
  288. </html>


来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/29737856/viewspace-1305711/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： jQuery+CSS实现的UL表格，带边框提示
下一篇： 标题栏里的文字滚动的特效
请登录后发表评论 登录
全部评论
chunzhisu

注册时间：2014-07-04

  • 博文量
    95
  • 访问量
    122213

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593