Posted in Javascript onMarch 03, 2015
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>超个性的感应鼠标悬停图片色彩渐显效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/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: 336px; /*--Width of image--*/ height: 240px; /*--Height of image--*/ border-bottom: 1px solid #ccc; cursor: pointer; } ul.gallery li span { /*--Used to crop image--*/ width: 336px; height: 240px; 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%; } </style> <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> <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 - 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> </head> <body> 预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br> <!--把下面代码加到<body>与</body>之间--> <ul class="gallery"> <li> <a href="#" class="thumb"><span><img src="/html/txdm_2/images/20100904/336240.jpg" alt=""></span></a> <h2><a href="#">Sunflowa Media</a></h2> </li> </ul> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。
jQuery实现的感应鼠标悬停图片色彩渐显效果
- Author -
代码家园声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@