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鼠标移动图片上实现放大效果
Jun 25 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现购物车全功能
Jan 11 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学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
自我评价的写作规则
2014/01/06 职场文书
员工培训邀请函
2014/02/02 职场文书
幼儿评语大全
2014/04/30 职场文书
社区服务活动小结
2014/07/08 职场文书
地震捐款倡议书
2014/08/29 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
2016中秋节问候语
2015/11/11 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
nginx内存池源码解析
2021/11/20 Servers
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android