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实现前端分页功能
Mar 23 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 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
逐步提升php框架的性能
2008/01/10 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
js 走马灯简单实例
2013/11/21 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
javascript版2048小游戏
2015/03/18 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
文秘档案管理岗位职责
2014/03/06 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
户外拓展训练感想
2015/08/07 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL