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 相关文章推荐
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
Node 自动化部署的方法
Oct 17 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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
PHP 选项及相关信息函数库
2006/12/04 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python实现将xml导入至excel
2015/11/20 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
python实现列表的排序方法分享
2019/07/01 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
电子装配专业毕业生求职信
2014/04/23 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
面试通知邮件
2015/04/20 职场文书
慈善募捐倡议书
2015/04/27 职场文书
如何正确理解python装饰器
2021/06/15 Python
Java实现多文件上传功能
2021/06/30 Java/Android
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS