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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
npm的lock机制解析
Jun 20 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
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不用递归实现无限分级的例子分享
2014/04/18 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python绘制动态水球图过程详解
2020/06/03 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
python3 kubernetes api的使用示例
2021/01/12 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
演讲稿怎么写才完美
2014/01/02 职场文书
秋季运动会活动方案
2014/02/05 职场文书
车队司机自我鉴定
2014/03/02 职场文书
聘用意向书
2014/07/29 职场文书
部队个人年终总结
2015/03/02 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js