jQuery的animate函数实现图文切换动画效果


Posted in Javascript onMay 03, 2015

在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片的文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程。

<div class="wrap"> 
  <img src="images/s1.jpg" alt="photo" /> 
  <div class="cover"> 
    <h3>强震摧毁加勒比海小国海地</h3> 
    <p>今年,战争、经济动荡和自然灾害席卷全球,制造了无数的伤痛;但是,在痛苦的同时仍有明亮的瞬间存在。</p> 
    <p><a href="#">查看详情</a></p> 
  </div> 
</div>

我们用一个DIV.wrap放置一张图片,以及一个需要覆盖的div.cover,cover里面放置图片的介绍信息,支持任意标准的html内容。然后将上述代码复制多个,排列成一组图片。

CSS

我们需要用CSS将.wrap排成行,并且要将.cover覆盖层隐藏一部分,当鼠标滑上去是通过调用jquery才显示出来。

.wrap{position:relative; float:left; width: 200px; height:200px; margin:5px; 
background:#e8f5fe; overflow:hidden;} 
.wrap img{position:absolute; top:0; left:0} 
.wrap h3{line-height:30px; font-size:14px; color:#fff} 
.wrap p{line-height:20px} 
.cover{position:absolute; background:#000; height:120px; width:100%; 
padding:3px; top:170px; }

值得注意的是,隐藏.cover一部分使用了position:absolute绝对定位,将覆盖层.cover只显示标题部分,只需设置top:170px,因为这个.wrap的高度是200px,而标题h3的高度为30px,相减得之。

jQuery

首先我将覆盖层的透明度设置为0.8,然后当鼠标滑上图片时,使用hover函数来调用animate动画。

$(function(){ 
  $(".cover").css("opacity",.8); 
  $(".wrap").hover(function(){ 
    $(".cover", this).stop().animate({top:"80px"},{queue:false,duration:160}); 
  },function(){ 
    $(".cover", this).stop().animate({top:"170px"},{queue:false,duration:160}); 
  }); 
});

animate函数是jQuery用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

以上所述就是本文的全部内容了,希望大家能够喜欢、

Javascript 相关文章推荐
js获得地址栏?问号后参数的方法
Aug 08 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
async/await地狱该如何避免详解
May 10 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
php+ajax+jquery实现点击加载更多内容
May 03 #Javascript
jquery插件hiAlert实现网页对话框美化
May 03 #Javascript
javascript结合canvas实现图片旋转效果
May 03 #Javascript
浅谈javascript语法和定时函数
May 03 #Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 #Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 #Javascript
jQuery中 attr() 方法使用小结
May 03 #Javascript
You might like
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python控制台英汉汉英电子词典
2020/04/23 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python切片索引用法示例
2018/05/15 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python flask搭建web应用教程
2019/11/19 Python
职工运动会邀请函
2014/02/02 职场文书
社会学专业求职信
2014/02/24 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技