我们先来看看核心代码
代码如下 | 复制代码 |
$(document).ready(function(){ $(".top div a").hover(function(){ $("img",this).stop().animate({top:"-56px"},{queue:false,duration:200}); },function(){ $("img",this).stop().animate({top:"0px"},{queue:false,duration:200}); }); $(".bottom div a").hover(function(){ $("img",this).stop().animate({left:"-122px"},{queue:false,duration:200}); },function(){ $("img",this).stop().animate({left:"0px"},{queue:false,duration:200}); }); }) |
具体的实例演示代码
代码如下 | 复制代码 |
<style type="text/css"> body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff} body,div,p,span,a,ul,li,b,form,input,h2,h3,img{margin:0;padding:0} ul,li{list-style-type: none} img{border:none;} .top{width:500px;margin:20px auto} <div class="top"> <div class="bottom"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |