JavaScriptBank.com
07-01-2011, 09:51
Đây là một hiệu ứng JavaScript chuyển ảnh (http://www.*******************/=JavaScript chuyển ảnh) cực kì tuyệt vời dùng thư viện jQuery để trình diễn các hoạt hóa. Và bạn vẫn ... chi tiết (http://www.*******************/awesome-javascript-image-rotator-with-jquery.html/vi//) tại ******************* - 2.000+ free JavaScript codes (http://www.*******************/)
http://www.*******************/javascript.images/framework/awesome-javascript-image-rotator-with-jquery.jpg (http://www.*******************/javascript/framework/jquery/awesome-javascript-image-rotator-with-jquery/preview/vi/)
Demo: JavaScript Khung trưng bày ảnh tuyệt đẹp với jQuery (http://www.*******************/awesome-javascript-image-rotator-with-jquery.html/vi/)
| JavaScript Awesome JavaScript Image Rotator with jQuery (http://www.*******************/awesome-javascript-image-rotator-with-jquery.html)
Cách cài đặt
Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS
<style type="text/css">
body {
margin: 0; padding: 0;
font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
fieldset h1 {
font: 3em normal Georgia, "Times New Roman", Times, serif;
color: #fff;
text-align: center;
background: url(h1_bg.gif) no-repeat;
text-indent: -99999px;
margin: 100px 0 10px;
}
.container {
overflow: hidden;
width: 900px;
margin: 0 auto;
}
#main {
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
}
fieldset a {color: #fff;}
/*--Main Image Preview--*/
.main_image {
width: 598px; height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image p {
font-size: 1.2em;
padding: 10px; margin: 0;
line-height: 1.6em;
}
.block small {
padding: 0 0 0 20px;
background: url(icon_calendar.gif) no-repeat 0 center;
font-size: 1em;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
}
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse {
background: url(btn_collapse.gif) no-repeat left top;
height: 27px; width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px; right: 20px;
}
.main_image a.show {background-position: left bottom;}
.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0; padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0; padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}
.image_thumb ul li p{display: none;}
</style>
Bước 2: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
//Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
});//Close Function
</script>
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<div id="main" class="container">
<div class="main_image">
<img src="banner5.jpg" alt="Puzzled Putter">
<div style="display: block;" class="desc">
<a href="#" class="collapse">Close Me!</a>
<div style="opacity: 0.85; margin-bottom: 0px; display: block;" class="block">
<h2>Puzzled Putter</h2>
<small>04/14/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</div>
</div>
<div class="image_thumb">
<ul>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow"></a>
<div class="block">
<h2>Slowing Down</h2>
<small>04/10/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn Jones</a> </p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight"></a>
<div class="block">
<h2>Organized Food Fight</h2>
<small>04/11/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.</p>
<p>Autem conventio nimis
quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.
Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/orfofi.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species"></a>
<div class="block">
<h2>Endangered Species</h2>
<small>04/12/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution"></a>
<div class="block">
<h2>Evolution</h2>
<small>04/13/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="active hover">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter"></a>
<div class="block">
<h2>Puzzled Putter</h2>
<small>04/14/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit"></a>
<div class="block">
<h2>Secret Habit</h2>
<small>04/15/09</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.<br><a href="http://store.glennz.com/secrethabit1.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
</ul>
</div>
</div>
Đoạn mã tương tự
- 20 bộ icon mạng xã hội tuyệt đẹp - p3 (http://www.*******************/best-beautiful-social-media-icons-sets-p3.html/vi/)
- 25 giao diện WordPress tuyệt đẹp dành cho Giáng sinh (http://www.*******************/25-awesome-christmas-worpress-themes-2010.html/vi/)
- 50+ giao diện WordPress tuyệt đẹp và sexy dành cho các blogger nữ (http://www.*******************/50-super-nice-sexy-wordpress-themes-female-bloggers.html/vi/)
Một vài nhãn tương tự: JavaScript chuyển ảnh (http://www.*******************/vi+tag=JavaScript chuyển ảnh), khung trưng bày ảnh (http://www.*******************/vi+tag=khung trưng bày ảnh), trình diễn ảnh chuyển động (http://www.*******************/vi+tag=trình diễn ảnh chuyển động), phòng trưng bày ảnh (http://www.*******************/vi+tag=phòng trưng bày ảnh)
Bạn có thể xem thêm nhiều JavaScript khác về Framework (http://www.*******************/javascript/framework/vi/) và jQuery (http://www.*******************/javascript/framework/jquery/vi/)
Tạo menu luôn ở đầu trang (http://www.*******************/vi=menu luôn ở đầu trang) - Tạo trình đơn động (http://www.*******************/javascript/menu/vi/) - Cách loại bỏ dấu tiếng Việt với JavaScript (http://www.*******************/forum/cach-loai-bo-dau-tieng-viet-t114.html)
http://www.*******************/javascript.images/framework/awesome-javascript-image-rotator-with-jquery.jpg (http://www.*******************/javascript/framework/jquery/awesome-javascript-image-rotator-with-jquery/preview/vi/)
Demo: JavaScript Khung trưng bày ảnh tuyệt đẹp với jQuery (http://www.*******************/awesome-javascript-image-rotator-with-jquery.html/vi/)
| JavaScript Awesome JavaScript Image Rotator with jQuery (http://www.*******************/awesome-javascript-image-rotator-with-jquery.html)
Cách cài đặt
Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS
<style type="text/css">
body {
margin: 0; padding: 0;
font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
fieldset h1 {
font: 3em normal Georgia, "Times New Roman", Times, serif;
color: #fff;
text-align: center;
background: url(h1_bg.gif) no-repeat;
text-indent: -99999px;
margin: 100px 0 10px;
}
.container {
overflow: hidden;
width: 900px;
margin: 0 auto;
}
#main {
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
}
fieldset a {color: #fff;}
/*--Main Image Preview--*/
.main_image {
width: 598px; height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image p {
font-size: 1.2em;
padding: 10px; margin: 0;
line-height: 1.6em;
}
.block small {
padding: 0 0 0 20px;
background: url(icon_calendar.gif) no-repeat 0 center;
font-size: 1em;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
}
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse {
background: url(btn_collapse.gif) no-repeat left top;
height: 27px; width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px; right: 20px;
}
.main_image a.show {background-position: left bottom;}
.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0; padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0; padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}
.image_thumb ul li p{display: none;}
</style>
Bước 2: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
//Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
});//Close Function
</script>
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<div id="main" class="container">
<div class="main_image">
<img src="banner5.jpg" alt="Puzzled Putter">
<div style="display: block;" class="desc">
<a href="#" class="collapse">Close Me!</a>
<div style="opacity: 0.85; margin-bottom: 0px; display: block;" class="block">
<h2>Puzzled Putter</h2>
<small>04/14/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</div>
</div>
<div class="image_thumb">
<ul>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow"></a>
<div class="block">
<h2>Slowing Down</h2>
<small>04/10/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn Jones</a> </p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight"></a>
<div class="block">
<h2>Organized Food Fight</h2>
<small>04/11/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.</p>
<p>Autem conventio nimis
quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.
Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/orfofi.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species"></a>
<div class="block">
<h2>Endangered Species</h2>
<small>04/12/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution"></a>
<div class="block">
<h2>Evolution</h2>
<small>04/13/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="active hover">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter"></a>
<div class="block">
<h2>Puzzled Putter</h2>
<small>04/14/09</small>
<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
<li class="">
<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit"></a>
<div class="block">
<h2>Secret Habit</h2>
<small>04/15/09</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.<br><a href="http://store.glennz.com/secrethabit1.html" target="_blank">Artwork By Glenn Jones</a></p>
</div>
</li>
</ul>
</div>
</div>
Đoạn mã tương tự
- 20 bộ icon mạng xã hội tuyệt đẹp - p3 (http://www.*******************/best-beautiful-social-media-icons-sets-p3.html/vi/)
- 25 giao diện WordPress tuyệt đẹp dành cho Giáng sinh (http://www.*******************/25-awesome-christmas-worpress-themes-2010.html/vi/)
- 50+ giao diện WordPress tuyệt đẹp và sexy dành cho các blogger nữ (http://www.*******************/50-super-nice-sexy-wordpress-themes-female-bloggers.html/vi/)
Một vài nhãn tương tự: JavaScript chuyển ảnh (http://www.*******************/vi+tag=JavaScript chuyển ảnh), khung trưng bày ảnh (http://www.*******************/vi+tag=khung trưng bày ảnh), trình diễn ảnh chuyển động (http://www.*******************/vi+tag=trình diễn ảnh chuyển động), phòng trưng bày ảnh (http://www.*******************/vi+tag=phòng trưng bày ảnh)
Bạn có thể xem thêm nhiều JavaScript khác về Framework (http://www.*******************/javascript/framework/vi/) và jQuery (http://www.*******************/javascript/framework/jquery/vi/)
Tạo menu luôn ở đầu trang (http://www.*******************/vi=menu luôn ở đầu trang) - Tạo trình đơn động (http://www.*******************/javascript/menu/vi/) - Cách loại bỏ dấu tiếng Việt với JavaScript (http://www.*******************/forum/cach-loai-bo-dau-tieng-viet-t114.html)