Hướng dẫn cách làm - Hình ảnh minh họa - Phim hướng dẫn code js đẹp

Hôm nay, 11/12/2016 - 09:08

Múi giờ UTC + 7 Giờ



Nội quy chuyên mục


Thành viên đăng quảng cáo trong chuyên mục này sẽ bị xóa toàn bộ bài viết và cấm vĩnh viễn tham gia Diễn đàn.

* Xem qui định đăng bài viết tại đây: viewtopic.php?f=2&t=318247



Tạo chủ đề mới Gửi bài trả lời
 Tiêu đề bài viết: code js đẹp
Gửi bàiĐã gửi: 01/10/2013 - 20:24 
duyquang123

Ngoại tuyến

Thành viên mới

Thành viên mới

Ngày tham gia: 23/09/2013 - 00:03
Bài viết: 1
Đã cảm ơn: 0 lần
Được cảm ơn: 0 lần
Mã:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>Test Page</title>

     <style type="text/css">
        * { margin: 0; padding: 0;}
        a img {
            border: none;
        }
        #wrapper {
            width: 800px;
            margin: 20px auto;
        }
               
        ul.photos {
           list-style: none;
        }
        ul.photos li {
           float: left;
           margin: 10px; padding: 0;
           text-align: center;
           border: 1px solid #a4a4a4;
           display: inline;
        }
        ul.photos li a.image {
           width: 100px;
           height: 40px;
           cursor: pointer;
        }
        ul.photos li span {
           width: 100px;
           height: 40px;
           overflow: hidden;
           display: block;
        }
       
        ul.photos li h2 {
           font-size: 1em;
           font-weight: normal;
           margin: 0; padding: 10px;
           background: #ececec;
        }
        ul.photos li a {text-decoration: none; color: #3a3a3a; display: block;}
             </style>

     <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

     <script type="text/javascript">
        $(document).ready(function() {
            $("ul.photos li").hover(function() {

      var imageOver = $(this).find("img").attr("src"); //Get image url and assign it to 'imageOver'

      //Set a background image(imageOver) on the <a> tag - Set position to bottom
      $(this).find("a.image").css({'background' : 'url(' + imageOver + ') no-repeat center bottom'});

      //Animate the image to 0 opacity (fade it out)
      $(this).find("span").stop().fadeTo('normal', 0 , function() {
         $(this).hide() //Hide the image after fade
      });
   } , function() { //on hover out...
      //Fade the image to full opacity
      $(this).find("span").stop().fadeTo('normal', 1).show();
   });

        });
     </script>
</head>

<body>
   <div id="wrapper">
        <ul class="photos">
           <li>
              <a href="#" class="image"><span><img src="images/search.jpg" alt="" /></span></a>
              <h2><a href="#">Image Name</a></h2>
           </li>
           
            <li>
              <a href="#" class="image"><span><img src="images/image-2.jpg" alt="" /></span></a>
              <h2><a href="#">Image Name</a></h2>
           </li>
           
            <li>
              <a href="#" class="image"><span><img src="images/image-3.jpg" alt="" /></span></a>
              <h2><a href="#">Image Name</a></h2>
           </li>
           
            <li>
              <a href="#" class="image"><span><img src="images/image-4.jpg" alt="" /></span></a>
              <h2><a href="#">Image Name</a></h2>
           </li>
        </ul>
   
    </div><!--End #wrapper-->

</body>

</html>


Đầu trang
 Xem thông tin cá nhân  
 
Hiển thị những bài viết cách đây:  Sắp xếp theo  
Tạo chủ đề mới Gửi bài trả lời
 Bạn đang xem trang 1 / 1 trang [ 1 bài viết ] 

Các chủ đề liên quan


Múi giờ UTC + 7 Giờ


Bạn không thể tạo chủ đề mới trong chuyên mục này.
Bạn không thể trả lời bài viết trong chuyên mục này.
Bạn không thể sửa những bài viết của mình trong chuyên mục này.
Bạn không thể xoá những bài viết của mình trong chuyên mục này.
Bạn không thể gửi tập tin đính kèm trong chuyên mục này.

Chuyển đến: