来自 金沙js77888 2019-08-01 09:56 的文章
当前位置: 金沙js77888 > 金沙js77888 > 正文

(鼠标浮动时div由下向上展开

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

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

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

图片 1

2. 代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net 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://www.hnwbyl.com/uploads/allimg/190801/095AJc8-1.jpg"></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动画与特效用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

  • jquery控制页面的展开和隐藏实现方法(推荐)
  • 基于jQuery实现下拉收缩(展开与折叠)特效
  • jQuery实现DIV层收缩展开的方法
  • jquery实现可点击伸缩与展开的菜单效果代码
  • jquery实现点击查看更多内容控制段落文字展开折叠效果
  • jQuery实现文本展开收缩特效
  • jQuery实现表格展开与折叠的方法
  • jquery实现先淡出再折叠收起的动画效果
  • jQuery使用slideUp方法实现控制元素缓慢收起
  • jQuery实现的页面详情展开收起功能示例

本文由金沙js77888发布于金沙js77888,转载请注明出处:(鼠标浮动时div由下向上展开

关键词: js4399金沙线路