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 面向对象 继承
May 13 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
js中new一个对象的过程
Feb 20 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
Vue.js中的组件系统
May 30 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 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 显示指定路径下的图片
2009/10/29 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
Python中Django 后台自定义表单控件
2017/03/28 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
大学生思想汇报范文
2013/12/31 职场文书
高一学生期末评语
2014/04/25 职场文书
安全标语大全
2014/06/10 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
社区灵活就业证明
2014/11/03 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
python 算法题——快乐数的多种解法
2021/05/27 Python
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers