短短的十多行代码就实现了一个酷炫的图片翻滚代码，要实现这个效果并不难，只要思路对了，一切都好办，不多说了，直接上代码看效果！
html结构：
复制代码 代码如下:
<ul class="list">
<li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li>
<li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li>
<li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li>
<li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li>
<li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li>
<li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li>
<li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li>
<li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li>
</ul>
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代码（注意要引入jq库）：
复制代码 代码如下:
$(function () {
$('.list li').hover(function () {
$(this).children('a,img').stop();
$(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {
$(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);
});
}, function () {
$(this).children('a,img').stop();
$(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
$(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);
});
});
});
是不是很简单的几句jq代码？亲，不妨copy下来看下效果呗！
您可能感兴趣的文章:
- 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
- js实现图片显示局部，鼠标经过显示全部的效果
- Javascript实现的鼠标经过时播放声音
- 鼠标经过导航菜单时颜色改变效果
- javascript学习笔记（二） 鼠标经过时，改变div块的背景色的代码
- javascript中onmouse事件在div中失效问题的解决方法
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
- 鼠标经过显示二级菜单js特效
- CSS鼠标响应事件经过、移动、点击示例介绍
- jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
- jquery给图片添加鼠标经过时的边框效果
- jquery简单实现鼠标经过导航条改变背景图
- 鼠标经过tr时,改变tr当前背景颜色
- Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
- jQuery 鼠标经过(hover)事件的延时处理示例
- 使用mouse事件实现简单的鼠标经过特效
