`
strayly
  • 浏览: 97431 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js弹出层,鼠标划上弹出,鼠标离开关闭

 
阅读更多
代码如下:

function getElementWidth(objectId) {x = $_(objectId);return x.offsetWidth;}
function getElementHeight(objectId) {x = $_(objectId);return x.offsetHeight;}
function getAbsoluteLeft(objectId) {
o = $_(objectId)
oLeft = o.offsetLeft
while(o.offsetParent!=null) {
   oParent = o.offsetParent
   oLeft += oParent.offsetLeft
   o = oParent
}
return oLeft
}

function getAbsoluteTop(objectId) {
o = $_(objectId)
oTop = o.offsetTop
while(o.offsetParent!=null) {
   oParent = o.offsetParent
   oTop += oParent.offsetTop
   o = oParent
}
return oTop
}

var showMenuDelay = 0;
function showMenu(showID,thisID){
clearTimeout(showMenuDelay);
$_(showID).style.display='';

var clickElementx = getAbsoluteLeft(thisID);
var clickElementy = getAbsoluteTop(thisID) + getElementHeight(thisID);

$_(showID).style.top = clickElementy + 'px';
$_(showID).style.left = clickElementx + 'px';

document.body.insertBefore($_(showID),document.body.firstChild);

$_(thisID).onmouseout = function(){closeMenu(showID);}
$_(showID).onmouseover = function(){clearTimeout(showMenuDelay);}
$_(showID).onmouseout = function(){closeMenu(showID);}
}
function hideMenu(showID){
$_(showID).style.display='none';
}
function closeMenu(showID){
showMenuDelay = setTimeout(function(){hideMenu(showID);},200);
}

使用方法<a href="#" onmouseover="showMenu('menuDiv','thidID')" id="thisID">菜单</a>

<div id="menuDiv"></div>

分享到:
评论

相关推荐

    js实现鼠标单击链接在鼠标位置弹出层

    在JavaScript编程中,"js实现鼠标单击链接在鼠标位置弹出层"是一个常见的交互设计技术,常用于创建用户友好的网页应用。这种技术的主要目的是提高用户体验,让用户能够在一个特定的鼠标点击位置看到一个弹出层,比如...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    以上就是关于“jquery弹出层鼠标点击弹出层可浮动在屏幕滚动”的实现方法。通过理解这个例子,开发者可以进一步掌握jQuery事件处理、DOM操作以及CSS定位等技术,从而在实际项目中构建更复杂、更符合用户体验的弹出层...

    javascript弹出层

    JavaScript弹出层是一种常见的网页交互元素,用于在用户与页面交互时显示额外信息或功能。在网页设计中,弹出层通常用来展示警告、提示、表单、图片、广告等,而无需离开当前页面。本篇文章将深入探讨如何使用...

    js弹出层table运用

    在JavaScript的世界里,弹出层(也称为模态对话框)是一种常见的用户界面设计元素,用于在当前页面上显示额外信息或执行特定操作,而不会中断用户的浏览流程。本话题将深入探讨如何利用JS实现一个可移动的弹出层,并...

    jquery 弹出层跟随鼠标移动

    同时,我们还需要监听`mouseout`事件,以便在鼠标离开该区域时隐藏弹出层。 2. **动态创建元素**: 当用户鼠标移到特定位置时,我们需要动态地创建弹出层(通常是一个包含信息的div元素)。这可以通过 `jQuery()` ...

    可自定义js弹出层动画特效.zip

    在这个"可自定义js弹出层动画特效.zip"压缩包中,我们找到了一个JavaScript弹出层插件,它专门设计用来增强用户体验,提供多样化的弹出层显示方式。 首先,让我们了解一下弹出层(Popup Layer)的概念。弹出层是在...

    鼠标点击按钮弹出层可以写from表单登陆框弹出层

    JavaScript根据响应内容决定是否关闭弹出层,显示错误消息,或者重定向到其他页面。 6. **关闭弹出层**:通常还会有一个关闭按钮或点击弹出层外部的区域来隐藏表单。这同样需要JavaScript来处理相关的事件。 在...

    js弹出层特效点击按钮弹出窗口支持鼠标拖动

    在JavaScript(JS)编程中,弹出层是一种常见的交互设计元素,用于显示额外的信息或功能,而不会离开当前页面。这种技术广泛应用于网页中的警告、确认对话框、模态窗口和自定义信息提示。"js弹出层特效点击按钮弹出...

    js小技巧:当鼠标移上文字弹出层

    ### JS小技巧:当鼠标移上文字或照片时弹出层 #### 技术背景与应用场景 在网页设计中,为了提升用户体验并增加交互性,开发者经常会在用户鼠标悬停在某个元素(如文字或图片)上时显示额外的信息。这种效果可以...

    js 弹出层特效点击按钮弹出窗口支持鼠标拖动

    在JavaScript编程领域,"弹出层特效点击按钮弹出窗口支持鼠标拖动"是一个常见的交互设计,用于增强用户体验。这个功能通常应用于各种网页应用中,比如提示信息、表单填写、图片预览等场景。本文件提供的就是一个实现...

    js弹出层大集合里面有很多

    总的来说,JavaScript弹出层是一个广泛使用的功能,通过结合HTML、CSS和JavaScript,我们可以创建各种各样的弹出层效果,提高网页的互动性和用户体验。对于网页开发者来说,掌握弹出层的制作方法是必不可少的技能之...

    js弹出层可拖动兼容各大浏览器

    "js弹出层可拖动兼容各大浏览器"这个主题涵盖了如何利用JavaScript实现一个弹出窗口,并确保它在各种浏览器(如Chrome、Firefox、Safari、Edge和IE等)上具有良好的兼容性。下面我们将深入探讨这一技术。 首先,...

    仿58同城鼠标经过右侧弹出层

    - 接着,利用 JavaScript 和 jQuery 实现当鼠标悬浮在特定的 `&lt;a&gt;` 元素上时,弹出层动态显示出来; - 最后,通过计算 `&lt;a&gt;` 元素的位置关系,确保弹出层不会超出浏览器窗口,提供良好的用户体验。 总之,这份代码...

    国外超强JS弹出层,浏览图片及弹出文字层的利器

    本资源名为“国外超强JS弹出层”,它提供了一种高效、灵活的方法来实现弹出层效果,适用于展示图片和文字信息,提升用户体验。 弹出层通常用于在用户与页面交互时显示额外信息,如提示、警告、详细内容或扩展功能。...

    js弹出层效果

    此案例展示了如何创建一个兼容IE6、IE8、Firefox(FF)和Chrome等浏览器的JavaScript弹出层。 ### 一、弹出层概述 在网页设计中,弹出层是一种常见的交互方式,用于展示额外的信息或功能。它通过JavaScript动态...

    很实用的 jQuery鼠标经过弹出层效果

    这个效果允许当用户将鼠标悬停在某个元素上时,一个浮动的层(通常称为“弹出层”或“气泡提示”)会显示相关信息。 首先,要实现这一效果,我们需要理解jQuery的基本用法。jQuery通过$符号作为入口,允许我们快速...

    jQuery鼠标经过弹出层效果

    例如,当用户鼠标移动到弹出层上时,可以防止弹出层立即关闭。这可以通过在弹出层上也监听`mouseover`和`mouseout`事件,并适当调整逻辑来实现。 总结来说,jQuery鼠标经过弹出层效果的实现涉及到jQuery的选择器、...

    漂亮的js可移动弹出层

    "漂亮的js可移动弹出层"是利用JavaScript和jQuery技术实现的一种增强用户体验的交互设计。这种弹出层不仅美观,而且具有可移动性,允许用户根据需要自由调整其在屏幕上的位置。 JavaScript,简称JS,是一种轻量级的...

Global site tag (gtag.js) - Google Analytics