编程 Javascript

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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

被jQuery折腾得半死，揭秘为何jQuery为何在IE/Firefox下均无法使用

Jan 22 Javascript

jquery.combobox中文api和例子，修复了上面的小bug

Mar 28 Javascript

javascript引擎长时间独占线程造成卡顿的解决方案

Dec 03 Javascript

简单纯js实现点击切换TAB标签实例

Aug 23 Javascript

JS+CSS实现简易实用的滑动门菜单效果

Sep 18 Javascript

EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法

Jan 19 Javascript

微信小程序实例开发总结

Apr 26 Javascript

JavaScript 获取元素在父节点中的下标(推荐)

Jun 28 Javascript

JavaScript学习笔记之DOM操作实例分析

Jan 08 Javascript

layui问题之自动滚动二级iframe页面到指定位置的方法

Sep 18 Javascript

解决vue 使用axios.all()方法发起多个请求控制台报错的问题

Nov 09 Javascript

关于antd tree 和父子组件之间的传值问题(react 总结)

Jun 02 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