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 相关文章推荐
javascript最常用与实用的创建类的代码
Aug 12 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
js 轮播效果实例分享
Dec 28 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
php文件缓存类汇总
2014/11/21 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
javascript date格式化示例
2013/09/25 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
codeMirror插件使用讲解
2017/01/16 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
使用python进行拆分大文件的方法
2018/12/10 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
什么是serialVersionUID
2016/03/04 面试题
环保专项行动方案
2014/05/12 职场文书
医学专业自荐信
2014/06/14 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
健康状况证明模板
2014/10/23 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
热爱劳动主题班会
2015/08/14 职场文书