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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
Angular2入门--架构总览
Mar 29 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
原生js实现trigger方法示例代码
May 22 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函数
2006/12/06 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
师范生个人推荐信
2013/11/29 职场文书
家长会标语
2014/06/24 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书