• 图片 11
  • 图片 22
  • 图片 33
  • 图片 44
  • 图片 55
  • 图片 66
  • 图片 77
  • 图片 88

css代码: 复制代码 代码如下: *{
margin:0; padding:0;} .list{ width:640px; margin:100px auto; border:1px
solid #ddd; overflow:hidden;} .list li{ float:left; width:150px;
height:80px; overflow:hidden; list-style:none; margin:5px;
display:inline; position:relative;} .list li img{ float:left;
width:150px; height:80px; border:none;} .list li a{ position:absolute;
left:0; top:0; width:150px; height:0; background:#999; margin-top:40px;
display:inline; text-align:center; line-height:80px; overflow:hidden;
color:#fff; text-decoration:none;} jq代码: 复制代码 代码如下: $ { $.hover.children;
$.stop().animate({ ‘marginTop’: 40, ‘height’: 0 }, 200, function
.siblings.animate({ ‘height’: 80, ‘marginTop’: 0 }, 200); }); },
function .children; $.stop().animate({ ‘height’: 0, ‘marginTop’: 40 },
200, function .siblings.animate({ ‘marginTop’: 0, ‘height’: 80 }, 200);
}); }); }); 是不是很简单的几句jq代码?亲,不妨copy下来看下效果呗!

短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果!
html结构: 复制代码 代码如下:

相关文章

网站地图xml地图