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 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
详解在Python程序中自定义异常的方法
2015/10/16 Python
简析Python的闭包和装饰器
2016/02/26 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python利用platform模块获取系统信息
2020/10/09 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
公司财务工作总结的自我评价
2013/11/23 职场文书
大学社团活动策划书
2014/01/26 职场文书
总会计师岗位职责
2014/02/19 职场文书
大学生暑期实践感言
2014/02/26 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android