MENU 
Sản phẩm-chipkool.tk.png)
Trang chủ
Nổi bậc
Tiện ích-chipkool.tk.png)
Tài khoản
Tác vụ
YOUTUBE
NHẠC
Trang chủ
Tạo hiệu ứng đổi dạng rê chuột bằng công cụ Mootools
Chủ Nhật, 17 tháng 10, 2010
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>
/*<![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 »</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 »</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 »</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 »</a>
</li>
</ul>
<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 »</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 »</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 »</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 »</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.
Tăng cỡ chữ
Mặc định
Giảm cỡ chữ
Lên trên
Tổng số Bình luận [ 0]
Đăng nhận xét