code js đẹp

Thảo luận các vấn đề vể cài đặt và sử dụng Joomla! và các thành phần mở rộng của Joomla!
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: Nội quy đăng bài viết
Đăng trả lời
duyquang123
Thành viên mới
Thành viên mới
Bài viết: 1
Ngày tham gia: 23/09/2013 - 00:03

code js đẹp

Gửi bài gửi bởi duyquang123 » 01/10/2013 - 20:24

Mã: Chọn tất cả

<!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>

Đăng trả lời
  • Các chủ đề liên quan
    Trả lời
    Xem
    Bài viết mới nhất

Quay về

Quảng cáo trên trang Web BuaXua.VN