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模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
vue项目多环境配置(.env)的实现
Jul 21 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 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
Python实现感知机(PLA)算法
2017/12/20 Python
python文件写入write()的操作
2019/05/14 Python
python实现桌面托盘气泡提示
2019/07/29 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Python bytes string相互转换过程解析
2020/03/05 Python
自荐信如何“自荐”
2013/10/24 职场文书
教师实习的自我鉴定
2013/10/26 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
白岩松演讲
2014/05/21 职场文书
部门活动策划方案
2014/08/16 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL