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 相关文章推荐
ExtJS 入门
Oct 29 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
浅析JS抽象工厂模式
Dec 14 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
详解Vue router路由
Nov 20 Vue.js
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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP培训要多少钱
2017/06/06 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
如何提高数据访问速度
2016/12/26 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Python count函数使用方法实例解析
2020/03/23 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
Java基础面试题
2012/11/02 面试题
中式面点餐厅创业计划书
2014/01/29 职场文书
职工运动会感言
2014/02/07 职场文书
幼儿教师求职信
2014/05/24 职场文书
工地标语大全
2014/06/18 职场文书
运动员获奖感言
2014/08/15 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
学生安全责任协议书
2016/03/22 职场文书
写好求职信的技巧解密
2019/05/14 职场文书