ძალიან ეფექტური და გამოსადეგი კონტენტია ჩემი აზრით და გამოდგება გრაფიკული გამოსახულებებისთვის. ნამუშევრების პორთფოლიოსთვის და ა.შ. დასაყენელბლად ძალან ადვილია უბრალოდ უნდა მიყვეთ ინსტრუქციას.... ეს არის კოდი რომლითაც მოიცემა კონტენტი.. Code <ul class="gallery"> <li> <a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a> <h2><a href="#">Image Name</a></h2> </li> </ul> ჩამატება ხდება მხოლოდ <li> და </li> ტეგებით და მათ შორის მდებარე კოდით.. Code <ul class="gallery"> <!-- პირველი --> <li> <a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a> <h2><a href="#">Image Name</a></h2> </li> <!-- მეორე --> <li> <a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a> <h2><a href="#">Image Name</a></h2> </li> </ul> რაც შეეხება გამოსახულებას ის აუცილებლად უნდა იყოს <span> და </span> ტეგებს შორის რადგან სურათი შედგება ორი სექციისაგან მითითებამდე ორიგინალი და მითითების შემდეგ შავ-თეთრი და ეს ტეგები მალავენ მეორე სექციას. სურათის მაგალითი: Styling – CSS მოცემული კოდი ჩააკოპირეთ თქვენს CSS ში ან შეგიძლიათ ჩასვათ პირდაპირ HTML-ში <style> და </style> ტეგების გამოყენებით. Code ul.gallery { width: 708px; /*--Adjust width according to your scenario--*/ list-style: none; margin: 0; padding: 0; } ul.gallery li { float: left; margin: 10px; padding: 0; text-align: center; border: 1px solid #ccc; -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/ -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/ -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/ display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/ } ul.gallery li a.thumb { width: 204px; /*--Width of image--*/ height: 182px; /*--Height of image--*/ padding: 5px; border-bottom: 1px solid #ccc; cursor: pointer; } ul.gallery li span { /*--Used to crop image--*/ width: 204px; height: 182px; overflow: hidden; display: block; } ul.gallery li a.thumb:hover { background: #333; /*--Hover effect for browser with js turned off--*/ } ul.gallery li h2 { font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 0; padding: 10px; background: #f0f0f0; border-top: 1px solid #fff; /*--Subtle bevel effect--*/ } ul.gallery li a {text-decoration: none; color: #777; display: block;} jQuery ალბათ ყველამ კარგად იცით რამხელა შესაძლებლობები აქვს jQuery-ის და გამოიყენება ბევრ ეფექტებსა თუ მოქმედებებში... ეკოდი ჩასვით <head> და </head> ტეგებს შორის: Code <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> ხოლო ეს სკრიპტი შეიცავს მონაცემებს რომელიც პასუხს აგებს jQuery-ს მუშაობაზე (შეგიძლიათ თქვენი სურვილისამებრ შეცვალოთ). სასურველია ჩასვათ წინა კოდის შემდეგ: Code <script type="text/javascript">
$(document).ready(function() { $("ul.gallery li").hover(function() { //On hover... var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver' //Set a background image(thumbOver) on the <a> tag $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'}); //Animate the image to 0 opacity (fade it out) $(this).find("span").stop().animate({opacity: 0}, 300); } , function() { //on hover out... //Animate the image back to 100% opacity (fade it back in) $(this).find("span").stop().animate({opacity: 1}, 300); });
});
</script> სულ ესააა. იმედია გაიგეთ. შეგიძლიათ ნახოთ დემო და მისი Source-ს მიცედვით გააკეთოთ.
|