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 div高度自适应
Apr 28 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
jquery禁用右键示例
Apr 28 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
vue实现点击关注后及时更新列表功能
Jun 26 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/10/09 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
python实时监控cpu小工具
2018/06/21 Python
python中的json总结
2018/10/11 Python
python 自动重连wifi windows的方法
2018/12/18 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
django的ORM模型的实现原理
2019/03/04 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
学生自我鉴定模板
2013/12/30 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
《石榴》教学反思
2014/03/02 职场文书
大学三年计划书范文
2014/04/30 职场文书
新学期开学演讲稿
2014/05/24 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android