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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
js数组操作学习总结
Nov 04 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 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
Zerg剧情介绍
2020/03/14 星际争霸
一个简单实现多条件查询的例子
2006/10/09 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python模拟用户登录验证
2017/09/11 Python
基于python图像处理API的使用示例
2020/04/03 Python
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
新大陆软件面试题
2016/11/24 面试题
海南地接欢迎词
2014/01/14 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
公路施工安全责任书
2015/05/08 职场文书
浅谈python中的多态
2021/06/15 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python