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中each循环的简单回滚操作
May 05 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery实现雪花飘落效果
Aug 02 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文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
使用python绘制二维图形示例
2019/11/22 Python
python实现坦克大战
2020/04/24 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
AOP的定义以及作用
2013/09/08 面试题
银行实习生的自我评价
2013/12/09 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
优秀教师演讲稿
2014/05/06 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
暑假安全保证书
2015/02/28 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS