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 相关文章推荐
JavaScript 事件对象的实现
Jul 13 Javascript
用cssText批量修改样式
Aug 29 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
Javascript实现打鼓效果
Jan 29 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
Oracle 常见问题解答
2006/10/09 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
js实现常用排序算法
2016/08/09 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
HTML的select控件美化
2017/03/27 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
puppeteer库入门初探
2019/01/09 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python文件操作的简单方法总结
2019/11/07 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
上班早退检讨书
2014/01/09 职场文书
冬季施工防火方案
2014/05/17 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
中秋节主题班会
2015/08/14 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
vue实现Toast组件轻提示
2022/04/10 Vue.js