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/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP Cookie的使用教程详解
2013/06/03 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python实现爬虫下载美女图片
2015/07/14 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
个人求职信范文分享
2013/12/13 职场文书
工程材料采购方案
2014/05/18 职场文书
机械操作工岗位职责
2014/08/08 职场文书
党员个人党性分析材料
2014/12/18 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js