船长 发表于 2009-02-26 11:10 | 分类：jQuery | 阅读数：1,929 次
jQuery鼠标悬浮动画效果，当鼠标悬浮的时候产生动画效果来展示特定信息，使用方便简单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html><head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>web集结号</title> <script type="text/javascript" src="http://www.songlecn.com/wp-content/files/jquery-1.2.6.pack.js"></script> <script type="text/javascript"> $(function() { $('ul.hover_block li').hover(function(){ $(this).find('img').animate({top:'182px'},{queue:false,duration:500}); }, function(){ $(this).find('img').animate({top:'0px'},{queue:false,duration:500}); }); $('ul.hover_block2 li').hover(function(){ $(this).find('img').animate({left:'300px'},{queue:false,duration:500}); }, function(){ $(this).find('img').animate({left:'0px'},{queue:false,duration:500}); }); }); </script> <style media="screen"> body { background: #666; } ul.hover_block { display: block; overflow: hidden; height: 1%; padding-bottom: 15px; } ul.hover_block li, ul.hover_block2 li { list-style:none; float:left; background: #fff; padding: 10px; width:300px; position: relative; margin-right: 20px; } ul.hover_block li a, ul.hover_block2 li a { display: block; position: relative; overflow: hidden; height: 150px; width: 268px; padding: 16px; color: #000; font: 1.6em/1.3 Helvetica, Arial, sans-serif; } ul.hover_block li a, ul.hover_block2 li a { text-decoration: none; } ul.hover_block li img, ul.hover_block2 li img { position: absolute; top: 0; left: 0; border: 0; } </style> </head><body> <div style="color:red">*图片加载完成后，刷新页面即可看到效果</div> <ul class="hover_block"> <li><a href="#"><img style="top: 0px;" src="http://www.songlecn.com/wp-content/supload/2009/02/26/incg_hover.gif" alt="hello"> 这里是显示文字，欢迎光临web集结号，www.songlecn.com</a></li> <li><a href="#"><img style="top: 0px;" src="http://www.songlecn.com/wp-content/supload/2009/02/26/incg_hover2.gif" alt="hello"> 这里是显示文字，欢迎光临web集结号，www.songlecn.com</a></li> </ul> <ul class="hover_block2"> <li><a href="#"><img style="left: 0px;" src="http://www.songlecn.com/wp-content/supload/2009/02/26/incg_hover.gif" alt="hello"> 这里是显示文字，欢迎光临web集结号，www.songlecn.com</a></li> <li><a href="#"><img style="left: 0px;" src="http://www.songlecn.com/wp-content/supload/2009/02/26/incg_hover2.gif" alt="hello"> 这里是显示文字，欢迎光临web集结号，www.songlecn.com</a></li> </ul> </body></html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
