Laman

Pages

Laman

Oct 17, 2010

Tạo hiệu ứng đổi dạng rê chuột bằng công cụ Mootools

Công cụ Mootools có nhiều ứng dụng thú vị cho việc thiết kế web. Ở đây xin giới thiệu cách thêm hiệu ứng đẹp mắt cho một danh mục tin tức khi rê chuột có sự đổi dạng và khiến cho cả vùng chọn có thể kích chuột được. Mục đích của hiệu ứng này là giúp cho một danh mục tin tức không động trở nên động và đẹp hơn.

Xem Demo.

Việc đầu tiên là thiết lập CSS và 2 file js tạo hiệu ứng rồi đặt vào phần đầu của trang HTML, giữa 2 thẻ <head>, </head>.
<style type="text/css">
/*<![CDATA[*/
#posts {
padding: 0;
margin: 0;
}
#posts li {
width: 600px;
border: 1px solid #eee;
background-color: #F9F9F9;
background-image: none;
float: left;
clear: both;
list-style: none;
margin: 0 0 5px 0;
padding: 5px;
}
#posts a {
text-decoration: none;
color: #999;
font-size: 0.85em;
}
#posts img {
display: block;
float: left;
border: 1px #ccc solid;
background: white;
padding: 3px;
margin: 0 10px 0 0;
}
#posts h1 {
padding: 5px 0 0 0;
margin: 0;
color: #CC0033;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
}
#posts p {
margin: 0;
padding: 0 0 10px 0;
}
/*]]>*/
</style>

<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/clickMe.js" type="text/javascript"></script>

Bạn nên tải về file mootools-1.2.1-core-yc.js và file clickMe.js rồi upload lên webhost của bạn để lấy URL, sau đó đặt vào phần scr.

Kế đến là thiết lập HTML như bên dưới rồi đặt vào phần thân của trang HTML, giữa 2 thẻ <body>, </body>.
<ul id="posts">
<li>
<img src="/images/image1.jpg" alt="" />
<h1>This is the title of the first news</h1>
<p>And this is the summary of the first news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
<li>
<img src="/images/image2.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the second news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
<li>
<img src="/images/image3.jpg" alt="" />
<h1>This is the title of the third news</h1>
<p>And this is the summary of the third news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
<li>
<img src="/images/image4.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the fourth news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
</ul>

Bạn nên chỉnh sửa URL ảnh đại diện, tiêu đề tin và nội dung tóm tắt của mỗi tin cho phù hợp với trang web của bạn.

No comments:

Post a Comment

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D