`

常用JS,右键菜单的淡入淡出效果

 
阅读更多

常用JS,右键菜单的淡入淡出效果  

 

<HTML><HEAD><TITLE>右键菜单的淡入淡出效果</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<SCRIPT language=JavaScript>
<!-- // RightClickMenu
var intDelay=10; //设置菜单显示速度，越大越慢
var intInterval=5; //每次更改的透明度
function showmenuie5(){
        var rightedge=document.body.clientWidth-event.clientX
        var bottomedge=document.body.clientHeight-event.clientY
        if (rightedge<ie5menu.offsetWidth)
            ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
        else
            ie5menu.style.left=document.body.scrollLeft+event.clientX
        if (bottomedge<ie5menu.offsetHeight)
            ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
        else
            ie5menu.style.top=document.body.scrollTop+event.clientY
        ie5menu.style.visibility="visible"
        //ie5menu.style.visibility=""
        ie5menu.filters.alpha.opacity=0
        GradientShow()
        return false
}
function hidemenuie5(){
        //ie5menu.style.visibility="hidden"
        GradientClose()
}
function highlightie5(){
        if (event.srcElement.className=="menuitems"){
            event.srcElement.style.backgroundColor="highlight"
            event.srcElement.style.color="white"
        }
}
function lowlightie5(){
        if (event.srcElement.className=="menuitems"){
            event.srcElement.style.backgroundColor=""
            event.srcElement.style.color="#000000"
        }
}
function jumptoie5(){
        if (event.srcElement.className=="menuitems"){
            if (event.srcElement.url != ''){
                if (event.srcElement.getAttribute("target")!=null)
                    window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
                else
                    window.location=event.srcElement.url
            }
        }
}
function GradientShow() //实现淡入的函数
{
    ie5menu.filters.alpha.opacity+=intInterval
    if (ie5menu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay)
}
   
function GradientClose() //实现淡出的函数
    {
    ie5menu.filters.alpha.opacity-=intInterval
    if (ie5menu.filters.alpha.opacity>0) {
     setTimeout("GradientClose()",intDelay)
     }
    else {
     ie5menu.style.visibility="hidden"
     }
}
function ChangeBG() //改变菜单项的背景颜色，这里的两种颜色值可以改为你需要的
{
    oEl=event.srcElement
    if (oEl.style.background!="navy") {
        oEl.style.background="navy"
    }
    else {
        oEl.style.background="#cccccc"
    }
}
// -->
</SCRIPT>
<STYLE type=text/css>
.cMenu {
    FILTER: alpha(opacity=0);BACKGROUND-COLOR: #D6D3CE;BORDER-BOTTOM: #666666 2px solid; BORDER-LEFT: #E4E4E4 2px solid; BORDER-RIGHT: #666666 2px solid; BORDER-TOP: #E4E4E4 2px solid; COLOR: #000000; CURSOR: default; FONT-SIZE: 9pt; color:#000000;FONT-WEIGHT: normal; LINE-HEIGHT: 20px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 110px
}
.menuitems {
    font-size:9pt;
    MARGIN: 2px;
    PADDING-BOTTOM: 0px;
PADDING-LEFT: 15px;
PADDING-RIGHT: 3px;
PADDING-TOP: 0px;
}
</STYLE>
<META content="Microsoft FrontPage 4.0" name=GENERATOR>
</HEAD>
<BODY>
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0>
</OBJECT>
<RIGHTCLICK><!--[if IE]>
<DIV class=cMenu id=ie5menu onclick=jumptoie5() onmouseout=lowlightie5()
onmouseover=highlightie5()>
<DIV class=menuitems url="javascript:click_obj(0)">后退</DIV>
<DIV class=menuitems url="javascript:click_obj(1)">前进</DIV>
<DIV class=menuhr><hr style="width:100%"></DIV>
<DIV class=menuitems url="javascript:click_obj(2)">刷新</DIV>
<DIV class=menuitems url="javascript:click_obj(3)">加入收藏夹</DIV>
<DIV class=menuitems url="javascript:click_obj(4)">查看源文件</DIV>
<DIV class=menuhr><hr style="width:100%"></DIV>
<DIV class=menuitems url="javascript:click_obj(5)">属性</DIV>
</DIV>
<![endif]-->
<SCRIPT language=JavaScript>
<!--
function click_obj(id){
    switch(id){
        case 0:   
            history.back()
            break
        case 1:
            history.forward()
            break
        case 2:
            window.location.reload()
            break
        case 3:
            window.external.AddFavorite(location.href, document.title)
            break
        case 4:
            window.location = "view-source:" + window.location.href
            break
        case 5:
            document.all.WebBrowser.ExecWB(10,1)
            break
    }
}
if (document.all&&window.print){
    ie5menu.className="cMenu"
    document.oncontextmenu=showmenuie5
    document.body.onclick=hidemenuie5
}
//-->
</SCRIPT>
</RIGHTCLICK>
</BODY></HTML>

 

 

 

分享到：
| Jsoup
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现鼠标右键菜单及淡入淡出消息窗口

    在网页中实现鼠标右键菜单以及淡入淡出消息窗口是提高用户体验的重要手段。下面将详细介绍如何使用JavaScript来实现这两个功能。 一、创建鼠标右键菜单 1. **事件监听**：首先，我们需要监听鼠标右键点击事件。在...

    js仿右键菜单

    5. **动画效果**：为了增加用户体验，可以考虑添加一些过渡动画，比如淡入淡出、滑动等，这可以通过CSS样式和JavaScript的`setTimeout`或`requestAnimationFrame`实现。 6. **移除菜单**：当用户点击页面其他地方...

    JS鼠标右键菜单

    为了实现“效果很绚丽”的右键菜单，可以使用CSS来添加动画效果，如淡入淡出、滑动等，或者使用JavaScript库如jQuery来简化操作。例如，使用jQuery实现一个简单的淡入效果： ```javascript $(document).on('...

    TabPanel选卡结合右键菜单实例

    5. **动画效果**：为了提升用户体验，可以添加一些动画效果，比如淡入淡出、滑动等，使TabPanel的切换和右键菜单的出现更加平滑自然。 6. **维护状态**：确保在用户导航时，TabPanel和右键菜单的状态得到正确更新。...

    js固定区块右键弹出菜单代码.zip

    7. **动画效果**：可能还会包含一些动画效果，如淡入淡出、滑动等，以提升用户体验。 总的来说，这个压缩包提供了一个实用的示例，帮助开发者了解和实现JavaScript中的右键弹出菜单。通过研究这个代码，可以学习到...

    Jquery 右键菜单插件、css样式

    4. 动画效果：可能包括出现和消失时的过渡效果，如淡入淡出（fadeIn/fadeOut）。 最后，`jquery.contextmenu.js` 可能是一个预封装好的 jQuery 插件，用于简化右键菜单的实现。这样的插件通常提供了一些配置选项，...

    jQuery带音效圆形网页右键菜单代码.zip

    - `fadeIn()`和`fadeOut()`：jQuery提供的动画方法，用于菜单的淡入淡出效果，增加视觉吸引力。 - 使用`$.getScript()`或`$.ajax()`加载外部JavaScript文件，以实现异步加载和执行自定义菜单插件。 此外，可能还...

    XP风格的右键菜单.rar

    这些特效可能是通过CSS（层叠样式表）和JavaScript的动画效果来实现的，比如淡入淡出、滑动等，以提升用户体验。 总的来说，这个压缩包提供的代码示例可以帮助ASP.NET开发者学习如何结合JavaScript实现一种常见的...

    JS右键弹出式菜单

    为了增加用户体验，还可以添加动画效果，如淡入淡出。同时，确保在用户点击页面其他地方或按下 Esc 键时隐藏菜单。 以上就是使用JavaScript创建右键弹出式菜单的基本步骤。你可以根据实际需求扩展菜单项，添加更多...

    JQuery 右键菜单

    4. **动画效果**: 添加淡入淡出、滑动等动画效果，提高用户体验。 5. **阻止默认行为**: 对于特定元素，可能需要阻止默认的右键菜单，通过`event.preventDefault()`实现。 6. **多级菜单**: 可以构建多级子菜单，...

    jQuery带音效圆形网页右键菜单代码

    这可能通过jQuery的动画函数如`.fadeIn()`和`.fadeOut()`实现，它们可以控制元素的透明度变化以实现淡入淡出效果。同时，可能还利用了CSS3的transition属性，它可以为元素的特定属性过渡提供平滑的动画效果。 此外...

    openlayers3+ 地图右键

    6. **优化用户体验**：为了提升用户体验，你可以考虑添加动画效果，如淡入淡出、弹出框等，以及无障碍访问（A11Y）特性。 以上就是在OpenLayers 3及以上版本中实现地图右键功能的基本步骤。实际应用中，你可能需要...

    jQuery css3仿游戏网站右键环形菜单代码

    在这个项目中，CSS3被用来设计环形菜单的布局、形状（如圆环）和动态效果，如旋转、缩放和淡入淡出，以实现游戏网站般的视觉冲击力。 3. **右键菜单**：右键菜单是用户界面设计中的一个重要元素，通常在用户右键...

    jQuery右键自定义菜单.zip

    同时，为了提高用户体验，可以添加一些动画效果，如淡入淡出、滑动等，使菜单的出现更加平滑自然。 总的来说，“jQuery右键自定义菜单”是一个实用且易用的网页交互元素。开发者可以通过学习和掌握这一技术，提升...

    jQuery轻松实现指定的区域内鼠标右键多级快捷菜单效果.zip

    为了实现更丰富的交互，我们还可以添加一些动画效果，比如淡入淡出，使菜单的显示和隐藏更加平滑： ```javascript $(document).on('contextmenu', '#menu-context li', function(e) { e.preventDefault(); var $...

    jQuery+css3实现的非常简洁的自定义右键菜单特效源码.zip

    3. **动画效果**：除了过渡效果，CSS3还支持`animation`，可以创建复杂的动画序列，例如淡入淡出、滑动等效果，使菜单的出现和消失更具有吸引力。 4. **响应式设计**：CSS3的媒体查询`@media`可以让我们根据设备...

    【Jquery经典特效10】jQuery鼠标右键点击菜单代码

    为了增加动态效果，比如淡入淡出，我们可以使用jQuery的动画方法。例如： ```javascript $menu.fadeIn('fast'); // 快速淡入 $menu.fadeOut('fast'); // 快速淡出 ``` 此外，`jiaoben19507`可能是某个代码示例的...

    JS仿谷歌浏览器鼠标右键菜单

    在JavaScript（JS）编程中，实现仿谷歌浏览器的鼠标右键菜单是一项常见的需求，它可以为网页增加交互性和用户体验。这个项目旨在创建一个与Windows操作系统类似的右键菜单效果，让用户在网页上点击鼠标右键时，能够...

    右键弹出菜单--漂亮的菜单

    4. 动画效果：为了提升用户体验，可以添加过渡动画，如淡入淡出、滑动等，让菜单的出现更加自然。 5. 菜单项事件处理：为每个菜单项添加点击事件，根据用户的选中项执行相应的功能或操作。 四、示例分析 在...

    jQuery鼠标右键点击弹出菜单.zip

    此外，为了增强用户体验，开发者可能还考虑了一些细节处理，如菜单的动画效果（如淡入淡出）和菜单项的高亮，这些都是通过jQuery的动画方法实现的。另外，为了保证在不同浏览器上的兼容性，可能还需要使用jQuery的`....

Magicbox
Global site tag (gtag.js) - Google Analytics