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的parseInt 取整使用
May 09 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 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
PHP学习之字符串比较和查找
2011/04/17 PHP
php学习笔记之 函数声明
2011/06/09 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
详解php中反射的应用
2016/03/15 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
vue组件生命周期详解
2017/11/07 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
flask入门之表单的实现
2018/07/18 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
租房安全协议书
2014/08/20 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python