Welcome, Old Sport!

色彩悬停渐入效果的 CSS & jQuery

by ilikecss ON 2010/08/13 5656

单一的图片已经不能吸引更多浏览者的眼球,我们要的是浏览图片时给客户带来的深刻印象,另一方面也能显示出您的态度和专业。下面就介绍这款通过 CSS & jQuery 来实现的色彩渐入的效果。

Step1. 创建HTML

<ul class="gallery">
    <li>
    <a href="#" class="thumb"><span><img src="images/sample_thumb.gif" alt="" /></span></a>
    <h2><a href="#">Sunflowa Media</a></h2>
    </li>
    <li>
    <a href="#" class="thumb"><span><img src="images/sample2_thumb.gif" alt="" /></span></a>
    <h2><a href="#">Sunflowa Media</a></h2>
    </li>
    <li>
    <a href="#" class="thumb"><span><img src="images/sample3_thumb.gif" alt="" /></span></a>
    <h2><a href="#">Sunflowa Media</a></h2>
    </li>
</ul>

标签里插入的是图片,图片是这款效果的关键,要特殊处理。

要像这样处理,把一张图片的色度调到灰色( Ctrl + U ),后两张结合起来,你喜欢从彩色到灰色就换一下位置。

Step2. 创建CSS

ul.gallery {
width: 750px; /*--Adjust width according to your scenario--*/
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px 0 10px 25px;
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: 215px; /*--Width of image--*/
height: 170px; /*--Height of image--*/
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
width: 215px;
height: 170px;
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-weight: normal;
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;
font-size: 140%;
}

Step3. 插入jQuery和脚本包

$(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 - Set position to bottom
		$(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().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 type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

PS:
这款效果在IE6测试下显示会比较慢。
*制作当中为了美观,边框我使用了CSS3圆角效果,所以IE下无法支持,如果您实在需要的话,请自行制作图片。

3条评论
  1. #1

    和意未来说道:

    貌似在哪里看过这个效果

    • 是吗,很多效果都差不多的,我只是把一些代码稍微简洁了下,这样更容易掌握。谢谢你的留言。

  2. I’d have to permit with you on this. Which is not something I usually do! I enjoy reading a post that will make people think. Also, thanks for allowing me to speak my mind!




TOP