<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style type="text/css"> *{ margin:0; padding:0;} body{ background:#d5dee7;} a{ color:#c8dce5;} h3{ margin:10px 10px 0 10px; color:#fff; font-weight:bold; font:18pt Arial, sans-serif; letter-spacing:-1px;} .boxgrid{ position:relative; float:left; width:325px; height:260px; overflow:hidden; margin:10px; border:solid 2px #8399af; background:#161613;} .boxgrid img{ position:absolute; top:0; left:0; border:0;} .boxgrid p{ padding:0 10px; color:#afafaf; font-weight:bold; font:10pt "Lucida Grande", Arial, sans-serif;} .boxcaption{ position:absolute; float:left; width:100%; height:100px; background:#000; opacity:.8; /* For IE 5-7 */filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";} .captionfull .boxcaption{ top:260px; left:0;} .caption .boxcaption{ top:220px; left:0;} </style> <div class="boxgrid captionfull"> <img src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" /> <div class="cover boxcaption"> <h3>hi~</h3> </div> </div> <div class="boxgrid caption"> <img src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" /> <div class="cover boxcaption"> <h3>hi~</h3> </div> </div> <div class="boxgrid slideright"> <img class="cover" src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" /> <h3>hi~</h3> </div> <div class="boxgrid thecombo"> <img class="cover" src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" /> <h3>Florian Nicolle</h3> </div> <div class="boxgrid slidedown"> <img class="cover" src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" /> <h3>The Nonsense Society</h3> </div> <div class="boxgrid peek"> <a href="http://feeds2.feedburner.com/buildinternet" target="_blank"><img src="http://pic002.cnblogs.com/images/2012/382256/2012070610163870.jpg" /></a> <a href="http://www.buildinternet.com" target="_blank"><img class="cover" src="http://pic002.cnblogs.com/images/2012/382256/2012070610162172.jpg" /></a> </div> <script src="jquery-1.3.1.js"></script> <script> $(document).ready(function () { $('.boxgrid.captionfull').hover(function () { // stop()停止所有在指定元素上正在运行的动画 // queue: false使此动画不进入动画队列 比如一个top一个left顺序执行就是队列 // duration(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) $(".cover", this).stop().animate({top: '160px'}, {queue: false, duration: 160}); }, function () { $(".cover", this).stop().animate({top: '260px'}, {queue: false, duration: 160}); }); $('.boxgrid.caption').hover(function () { $(".cover", this).stop().animate({top: '160px'}, {queue: false, duration: 160}); }, function () { $(".cover", this).stop().animate({top: '220px'}, {queue: false, duration: 160}); }); $('.boxgrid.slideright').hover(function () { $(".cover", this).stop().animate({left: '325px'}, {queue: false, duration: 300}); }, function () { $(".cover", this).stop().animate({left: '0px'}, {queue: false, duration: 300}); }); $('.boxgrid.thecombo').hover(function () { $(".cover", this).stop().animate({top: '260px', left: '325px'}, {queue: false, duration: 300}); }, function () { $(".cover", this).stop().animate({top: '0px', left: '0px'}, {queue: false, duration: 300}); }); $('.boxgrid.slidedown').hover(function () { $(".cover", this).stop().animate({top: '-260px'}, {queue: false, duration: 300}); }, function () { $(".cover", this).stop().animate({top: '0px'}, {queue: false, duration: 300}); }); $('.boxgrid.peek').hover(function () { $(".cover", this).stop().animate({top: '90px'}, {queue: false, duration: 160}); }, function () { $(".cover", this).stop().animate({top: '0px'}, {queue: false, duration: 160}); }); }); </script> </body> </html>