脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 单击式的下拉菜单效果

js 单击式的下拉菜单效果实例

 更新时间：2013年08月13日 15:24:29   作者：  
这篇文章介绍了js 单击式的下拉菜单效果实例，有需要的朋友可以参考一下

复制代码 代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>js 单击式的下拉菜单效果</title>
<style>
.div1 { width: 120px; height: 20px; line-height:20px; text-align:center; }
.div2 {width: 120px; position:absolute; left:0; top:10px;visibility:hidden; }
.div2 a{ display:block;}
</style>
</head>
<body>
<script language="JavaScript">
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++}
else{
hidemenu()}}}
function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false}
function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"}
function hidemenu2(){
themenu.visibility="hide"}
if (document.all)
document.onclick=hidemenu
</script>
<span class="div1" onClick="dropit2(dropmenu);event.cancelBubble=true;return false"> <a href="###" onClick="if(document.layers) return dropit(event, 'document.dropmenu')">[点击显示菜单]</a> </span>
<div class="div2" id="dropmenu">
<a href="https://www.jb51.net">脚本之家</a>

<a href="#">个性名字网</a>
<a href="#">个性名字网</a>
</div>
</body>
</html> </td>
   </tr>
 </table>

您可能感兴趣的文章:

相关文章

  • JS中offset和匀速动画详解

    JS中offset和匀速动画详解

    这篇文章主要介绍了JavaScript动画：offset和匀速动画详解(含轮播图的实现)，并把实现代码做了分享，有兴趣的朋友参考下。
    2018-02-02
  • javascript获取元素偏移量的方法有哪些

    javascript获取元素偏移量的方法有哪些

    javascript中可以通过四个属性获得元素的偏移量，offsetHeight、offsetWidth、offsetLeft、offsetTop，下面为大家解释下各属性的含义
    2014-06-06
  • 基于JavaScript实现单例模式

    基于JavaScript实现单例模式

    这篇文章主要介绍了基于JavaScript实现单例模式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • js中回调函数的学习笔记

    js中回调函数的学习笔记

    这篇文章主要介绍了js中回调函数的相关知识,需要的朋友可以参考下
    2014-07-07
  • javascript canvas封装动态时钟

    javascript canvas封装动态时钟

    这篇文章主要为大家详细介绍了javascript canvas封装动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript面向对象编程

    JavaScript面向对象编程

    暂时放弃js框架吧 开始写javascript的时候都是自己写，后来发现了prototype.js框架，发现很好用，就一直用的，他的对象创建方法被修改了，但很好用，再后来又转用jquery框架，受此框架影响，也不用自己创建类了，渐渐的竟然忘记了如何自己定义类了，猛的给一个一般方法，竟然看着别扭，混淆了很多东西，忘记了很多东西。今天回头整理下。 一下方法参考prototype.js
    2008-03-03
  • js点击出现悬浮窗效果不使用JQuery插件

    js点击出现悬浮窗效果不使用JQuery插件

    JQuery有很多这样的插件，但本文的这个是跟着自己的想法写的，也不知道他人是如何实现的，感兴趣的朋友可以了解下
    2014-01-01
  • js实现网页图片轮换播放

    js实现网页图片轮换播放

    这篇文章主要为大家详细介绍了js实现网页图片轮换播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 微信小程序连续签到7天积分获得功能的示例代码

    微信小程序连续签到7天积分获得功能的示例代码

    今天通过一个案例给大家分享微信小程序连续签到7天积分获得功能，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，感兴趣的朋友一起学习吧
    2020-08-08
  • JavaScript实现的购物车效果可以运用在好多地方

    JavaScript实现的购物车效果可以运用在好多地方

    JavaScript实现的购物车效果，当然这个效果可以运用在好多地方，比如好友的选择，人力资源模块等等，需要的朋友可以参考下
    2014-05-05

最新评论