jq实现酷炫的鼠标经过图片翻滚
学习啦在线学习网 学习前端的同学你们知道j怎么通过jq实现酷炫的鼠标经过图片翻滚效果吗?不知道的话跟着学习啦小编一起来学习jq实现酷炫的鼠标经过图片翻滚效果。
jq实现酷炫的鼠标经过图片翻滚效果的方法
代码如下:
<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下来看下效果呗!
猜你喜欢:
3.请求ajax失败或者不执行怎么办开发中会经常用到jquery中的ajax...
4.id调用js方法
5.鼠标事件属性详解
jq实现酷炫的鼠标经过图片翻滚
下一篇:win7鼠标不听使唤怎么解决