Jquery实现如何实现DIV由下向上展开的效果,鼠标浮动时div由下向上缓慢展开。
2017-05-29 02:48
886 查看
鼠标浮动时div由下向上缓慢展开效果
1:演示效果鼠标浮动前:
鼠标浮动后:(div由下向上展开):
2:代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</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 type="text/javascript" src="jquery-1.8.3.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>
原理:
1 >首先红色div是通过position:absolute绝对定位的,且通过相对与底部定位,如bottom:0px。
2 >底部定位固定,高度变高的时候就向上扩展了。
3 >使用jQuery的$().animate()动画方法,控制红色div高度变化。
相关文章推荐
- jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
- jquery 在指定位置弹出div框并实现DIV由下向上展开的效果
- jquery 在指定位置弹出div框并实现从下向上展开效果
- jQuery实现DIV层的收缩展开效果
- jquery实现鼠标点击后展开列表内容的导航栏效果
- jQuery实现鼠标悬停3d菜单展开动画效果
- 如何用js实现鼠标向上滚动时浮动导航
- jquery实现隔行变色,点击换色,鼠标悬浮当前行变色效果,div+css 细表格样式
- JQuery实现DIV展开折叠类似Outlook效果
- Jquery结合div+css实现文字间断停顿向上滚动效果
- jQuery实现的浮动层div浏览器居中显示效果
- Jquery实现由下向上展开的效果
- Jquery实现由下向上展开的效果
- jquery实现鼠标点击后展开列表内容的导航栏效果
- jQuery如何实现滑入滑出效果(跟随鼠标滑入滑出蒙板)
- jQuery实现div浮动层跟随页面滚动效果
- jQuery实现鼠标悬浮在div上时候动态浮动另外一个div层盖住第一个div层
- Jquery实现由下向上展开效果的例子
- jQuery实现div浮动层跟随页面滚动效果
- jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果