Jquery 点击动画显示层代码
2014-01-29 15:47
627 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery 点击动画显示层代码</title> <script type="text/javascript" src="http://192.168.200.77/guie/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //动画速度 var speed = 500; //绑定事件处理 $("#btnShow").click(function(event) { //取消事件冒泡 event.stopPropagation(); //设置弹出层位置 var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //动画显示 $("#divPop").show(speed); }); //单击空白区域隐藏弹出层 $(document).click(function(event) { $("#divPop").hide(speed) }); //单击弹出层则自身隐藏 $("#divPop").click(function(event) { $("#divPop").hide(speed) }); }); </script> </head> <body> <div> <button id="btnShow">显示提示文字</button> </div> <!-- 弹出层 --> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;width: 300px; height: 100px;"> <div style="text-align: center;">弹出层</div> </div> </body> </html>
相关文章推荐
- Jquery写的点击显示隐藏的div的代码
- jQuery实现点击小图显示大图代码分享
- Jquery如何实现点击时高亮显示代码
- jQuery——1、图片动画效果+2、点击切换div显示其内容
- jQuery点击收缩展开滑动显示内容竖直手风琴代码
- Jquery 点击按钮显示和隐藏层的代码
- jQuery实现点击小图显示大图代码分享
- Jquery 点击按钮显示和隐藏层的代码
- Jquery如何实现点击时高亮显示代码
- Jquery 点击时高亮显示代码
- JQuery显示和隐藏和动画代码
- jQuery效果-隐藏、显示、切换、滑动、淡入淡出以及动画。
- 使用JS或jQuery模拟鼠标点击a标签事件代码
- jquery实现可点击伸缩与展开的菜单效果代码
- js框架jquery瀑布流图片墙效果代码下载,点击相册图片展示大图
- 基于jQuery替换table中的内容并显示进度条的代码
- jQuery之动画基础隐藏和显示
- jquery中显示与隐藏元素代码
- jQuery编辑器KindEditor4.1.4代码高亮显示设置
- jQuery中ztree 点击文本框弹出下拉框的实例代码