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 相关文章推荐
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
Jquery ajax基础教程
Nov 20 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
jQuery实现获取多选框的值示例
Feb 07 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
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
这段js代码得节约你多少时间
2011/12/20 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
js格式化时间小结
2014/11/03 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python多线程爬虫简单示例
2016/03/04 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python hashlib模块实例使用详解
2019/12/24 Python
python3代码中实现加法重载的实例
2020/12/03 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
小学生倡议书范文
2014/05/13 职场文书
作风转变年心得体会
2014/10/22 职场文书
三方协议书
2015/01/27 职场文书
情人节单身感言
2015/08/03 职场文书
Redis 常见使用场景
2021/08/30 Redis