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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
javascript中的隐式调用
Feb 10 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
微信小程序调用后台service教程详解
Nov 06 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
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
js onload处理html页面加载之后的事件
2013/10/30 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
axios post提交formdata的实例
2018/03/16 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
python函数装饰器用法实例详解
2015/06/04 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
Python截图并保存的具体实例
2021/01/14 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
年度考核评语
2014/01/19 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
乌镇导游词
2015/02/02 职场文书
教师学期末个人总结
2015/02/13 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书