jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】


Posted in jQuery onApril 26, 2018

本文实例讲述了jQuery实现DIV响应鼠标滑过由下向上展开效果。分享给大家供大家参考,具体如下:

鼠标浮动时div由下向上缓慢展开效果

1. 演示效果(鼠标浮动时div由下向上展开,浮动后div由上向下折叠恢复原样)

jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】

2. 代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com jQuery响应鼠标实现div由下向上展开</title>
<style type="text/css">
  .big{position:relative; width:234px; height:300px; background:#ccc}
  .show{position:absolute; display:none; bottom:0px;display:block; width:100%; height:auto; background:#f66 }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
 {
  $(".big").hover(function () {
    $(".show").stop(true,true).animate({height:"70px"});
  }, function () {
    $(".show").stop(true,true).animate({height:"0px"});
  });
});
</script>
</head>
<body>
  <!--灰色的div-->
  <div class="big">
    <!--红色的div-->
    <div class="show"></div>
  </div>
</body>
</html>

原理:

① 首先红色div是通过position:absolute绝对定位的,且通过相对与底部定位,如bottom:0px
② 底部定位固定,高度变高的时候就向上扩展了。
③ 使用jQuery的$().animate()动画方法,控制红色div高度变化。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery中的deferred使用方法
Mar 27 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
jQuery length 和 size()区别总结
Apr 26 #jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
You might like
discuz7 phpMysql操作类
2009/06/21 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
python之wxPython菜单使用详解
2014/09/28 Python
python分割文件的常用方法
2014/11/01 Python
详解Python中的文件操作
2016/08/28 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
Yahoo-PHP面试题1
2016/07/20 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
森林防火工作方案
2014/02/14 职场文书
小学语文国培感言
2014/03/04 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
房屋所有权证明
2014/10/20 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
Spring Boot实现文件上传下载
2022/08/14 Java/Android