Code666 (代码贴、代码片段)

[JavaScript] [jQuery] 超实用的图片列表布局切换效果 →→→→→进入此内容的聊天室

来自 , 2021-03-13, 写在 JavaScript, 查看 159 次.
URL http://www.code666.cn/view/fcdf698a
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>jQuery 超实用的图片列表布局切换效果</title>
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312">
  6. <style type="text/css">
  7. body {
  8.     font-size: 12px;
  9. }
  10. p.switch {
  11.     width: 122px;
  12.     height: 26px;
  13.     margin-bottom: 15px;
  14.     background: url(/jscss/demoimg/201008/switch_bg.gif) no-repeat;
  15. }
  16. a.switch_thumb {
  17.     width: 34px;
  18.     height: 26px;
  19.     line-height: 26px;
  20.     padding: 0;
  21.     margin: 0 0 0 80px;
  22.     display: block;
  23.     background: url(/jscss/demoimg/201008/switch_btn.gif) no-repeat;
  24.     outline: none;
  25.     text-indent: -9999px;
  26. }
  27. a.swap {
  28.     background-position: left bottom;
  29. }
  30. a:hover.switch_thumb {
  31.     filter:alpha(opacity=75);
  32.     opacity:.75;
  33.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  34. }
  35. ul.display {
  36.     width: 744px;
  37.     background: #222 none repeat scroll 0 0;
  38.     border-right: 1px solid #333;
  39.     border-top: 1px solid #333;
  40.     margin: 0;
  41.     padding: 0;
  42.     overflow: hidden;
  43.     clear: both;
  44. }
  45. ul.display li {
  46.     width: 742px;
  47.     float: left;
  48.     margin: 0;
  49.     padding: 10px 0;
  50.     border: 1px solid;
  51.     border-color: #111 #111 #333 #333;
  52. }
  53. ul.display li a {
  54.     color: #DDD;
  55.     text-decoration: none;
  56.     font-size: 140%;
  57. }
  58. ul.display li .content_block {
  59.     padding: 0 10px;
  60. }
  61. ul.display li .content_block h4 {
  62.     margin: 0;
  63.     padding: 5px;
  64. }
  65. ul.display li .content_block p {
  66.     margin: 0;
  67.     padding: 5px 5px 5px 241px;
  68.     color: #CCC;
  69. }
  70. ul.display li .content_block a img{
  71.     border: 5px solid #ccc;
  72.     background: #fff;
  73.     margin: 0 15px 0 0;
  74.     float: left;
  75. }
  76. ul.thumb_view li {
  77.     width: 246px;
  78. }
  79. ul.thumb_view li h4 {
  80.     display: inline;
  81. }
  82. ul.thumb_view li p {
  83.     display: none;
  84. }
  85. ul.thumb_view li .content_block a img {
  86.     margin: 0 0 10px;
  87. }
  88. </style>
  89. <script type="text/javascript" src="/ajaxjs/jquery-1.4.2.min.js"></script>
  90. <script type="text/javascript">
  91. $(document).ready(function(){
  92.     $("a.switch_thumb").toggle(function(){
  93.         $(this).addClass("swap");
  94.         $("ul.display").fadeOut("fast", function() {
  95.             $(this).fadeIn("fast").addClass("thumb_view");
  96.         });
  97.     }, function () {
  98.         $(this).removeClass("swap");
  99.         $("ul.display").fadeOut("fast", function() {
  100.             $(this).fadeIn("fast").removeClass("thumb_view");
  101.         });
  102.     });
  103. });
  104. </script>
  105. </head>
  106. <body>
  107. <ul class="display">
  108.         <li>
  109.                 <div class="content_block">
  110.                         <a href="#"><img src="/jscss/demoimg/201008/sample1.gif" alt="Sample"></a>
  111.                         <h4><a href="#">Sunflowa Media</a></h4>
  112.                         <p>Hey, I'm Airos Chou.</p>
  113.                         <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
  114.                 </div>
  115.         </li>
  116.         <li>
  117.                 <div class="content_block">
  118.                         <a href="#"><img src="/jscss/demoimg/201008/sample2.gif" alt="Sample"></a>
  119.                         <h4><a href="#">Sunflowa Media</a></h4>
  120.                         <p>Hey, I'm Airos Chou.</p>
  121.                         <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
  122.                 </div>
  123.         </li>
  124.         <li>
  125.                 <div class="content_block">
  126.                         <a href="#"><img src="/jscss/demoimg/201008/sample3.gif" alt="Sample"></a>
  127.                         <h4><a href="#">Sunflowa Media</a></h4>
  128.                         <p>Hey, I'm Airos Chou.</p>
  129.                         <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
  130.                 </div>
  131.         </li>
  132. </ul>
  133. </body>
  134. </html>
  135. //javascript/1044

回复 "[jQuery] 超实用的图片列表布局切换效果"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666