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利用Array.splice实现Array的insert/remove
Jan 13 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
js数组去重的hash方法
Dec 22 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP Mysql编程之高级技巧
2008/08/27 PHP
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
jquery与js实现全选功能的区别
2017/06/11 jQuery
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
Vue中引入样式文件的方法
2017/08/18 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
Django添加favicon.ico图标的示例代码
2018/08/07 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
中专生职业生涯规划书范文
2014/01/10 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
领导班子对照检查材料
2014/09/22 职场文书
保研导师推荐信
2015/03/25 职场文书
物流业务员岗位职责
2015/04/03 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server