| 标题 | jQuery实现的感应鼠标悬停图片色彩渐显效果 |
| 内容 | 这篇文章主要介绍了jQuery实现的感应鼠标悬停图片色彩渐显效果,涉及jQuery中hover、find、css等方法的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果。分享给大家供大家参考。具体实现方法如下： 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <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> <li> <a href="#"><span><img src="/html/txdm_2/images/20100904/336240.jpg"></span></a> <h2><a href="#">Sunflowa Media</a></h2> </li> </ul> </body> </html> 希望本文所述对大家的jQuery程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。