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 学习 - 提高篇
Feb 02 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
jQuery实现计算器功能
Oct 19 jQuery
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
关于页面优化和伪静态
2009/10/11 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
使用python实现ANN
2017/12/20 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python获取栅格点和面值的实现
2020/03/10 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
有模特经验的简历自我评价
2013/09/19 职场文书
社会调查研究计划书
2014/05/01 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
自我工作评价范文
2015/03/06 职场文书
六年级数学教学反思
2016/02/16 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书