jQuery实现渐变弹出层和弹出菜单的方法


Posted in Javascript onFebruary 20, 2015

本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法。分享给大家供大家参考。具体实现方法如下:

<!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="/images/jquery.js"></script>

<style>

/* 渐变弹出层 */

body{font-size:9pt;}

#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;}

.raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}

#UpLayer span{border:#fff 1px solid; width:80px; padding:0 5px; line-height:20px; display:block;}

#UpLayer ul{display:none;position:absolute;border:#ccc 1px solid;width:80px; padding:5px; line-height:20px; background:#f1f1f1; margin:-1px 0 0 0;}

#UpLayer ul li{ border-bottom:#ccc 1px dashed;}

</style>

</head>

<body>

<script type="text/javascript">

// 渐变弹出层

$(document).ready(function(){

 var speed = 600;//动画速度

 $("#race a").click(function(event){//绑定事件处理

  event.stopPropagation();

  var offset = $(event.target).offset();//取消事件冒泡

  $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//设置弹出层位置

  $("#racePop").show(speed);//动画显示

 });

 $(document).click(function(event) { $("#racePop").hide(speed) });//单击空白区域隐藏

 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自身隐藏

 var objStr = "#UpLayer";

 $(objStr).mouseover(function(){$(objStr + " ul").show();});

 $(objStr).mouseout(function(){$(objStr + " ul").hide();});

});

</script>

<!-- 渐变弹出层 -->

<div id="race"><a href="#">点击</a></div>

<div id="racePop" class="raceShow">这里是弹出层效果</div>

<div id="UpLayer">

 <span><a href="javascript:void(0)">弹出层</a></span>

    <ul>

        <li><a href="http://www.baidu.com">百度搜索</a></li>

        <li><a href="https://3water.com">三水点靠木</a></li>

        <li><a href="http://sc.3water.com">素材之家</a></li>

        <li><a href="http://www.sina.com.cn/">新浪首页</a></li>

    </ul> 

</div>

</body>

</html>

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

Javascript 相关文章推荐
农历与西历对照
Sep 06 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
jquery 表单下所有元素的隐藏
Jul 25 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
react redux入门示例
Apr 19 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
详解vue 组件
Jun 11 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 #Javascript
jQuery常用数据处理方法小结
Feb 20 #Javascript
jQuery数据缓存用法分析
Feb 20 #Javascript
jQuery性能优化技巧分析
Feb 20 #Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 #Javascript
jQuery源码解读之addClass()方法分析
Feb 20 #Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 #Javascript
You might like
牡丹941资料
2021/03/01 无线电
PHP版自动生成文章摘要
2008/07/23 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
python实现多线程采集的2个代码例子
2014/07/07 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
利用Python优雅的登录校园网
2020/10/21 Python
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
个人自我评价范文
2014/02/05 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
英文邀请函
2015/02/02 职场文书
乒乓球比赛通知
2015/04/27 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
浅谈Redis中的RDB快照
2021/06/29 Redis