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对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 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中利用XML技术构造远程服务(上)
2006/10/09 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP时间函数使用详解
2019/03/21 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
javascript 验证日期的函数
2010/03/18 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python扩展内置类型详解
2018/03/26 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
商场租赁意向书
2014/07/30 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis