jq实现酷炫的鼠标经过图片翻滚效果


Posted in Javascript onMarch 12, 2014

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

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下来看下效果呗!
Javascript 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
jquery、js操作checkbox全选反选
Mar 12 #Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 #Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 #Javascript
判断一个对象是否为jquery对象的方法
Mar 12 #Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 #Javascript
Jquery实现自定义弹窗示例
Mar 12 #Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 #Javascript
You might like
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
python赋值操作方法分享
2013/03/23 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
python一键升级所有pip package的方法
2017/01/16 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python各种扩展名区别点整理
2020/02/27 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
应用心理学专业求职信
2014/08/04 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
生活小常识广播稿
2014/09/16 职场文书
确保工程质量承诺书
2015/04/29 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android