zoukankan      html  css  js  c++  java
  • JavaScript(获取或设置html元素的宽,高,坐标),确定和判断鼠标是否在元素内部,二级导航菜单鼠标离开样式问题解决

    设置:

        document.getElementById('id').style.width=value
        document.getElementById('id').style.height=value
        document.getElementById('id').style.top=value
        document.getElementById('id').style.left=value

    获取:

        value=document.getElementById('id').offsetLeft
        value=document.getElementById('id').offsetTop
        value=document.getElementById('id').offsetWidth
        value=document.getElementById('id').offsetHeight

    找一个元素的坐标:

    function findPosition( oElement )  
    {  
      var x2 = 0;  
      var y2 = 0;  
      var width = oElement.offsetWidth;  
      var height = oElement.offsetHeight;  
      alert(width + "=" + height);  
      if( typeof( oElement.offsetParent ) != 'undefined' )  
      {  
        for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )  
        {  
          posX += oElement.offsetLeft;  
          posY += oElement.offsetTop;       
        }  
        x2 = posX + width;  
        y2 = posY + height;  
        return [ posX, posY ,x2, y2];  
         
        } else{  
          x2 = oElement.x + width;  
          y2 = oElement.y + height;  
          return [ oElement.x, oElement.y, x2, y2];  
      }  
    }  

    知识进阶,二级导航展示隐藏效果问题(鼠标经过一级菜单二级菜单展示,鼠标离开一级菜单相应的二级菜单隐藏,而导致鼠标在一级菜单和二级菜单过渡过程中二级菜单隐藏,无法点到二级菜单):

                $("一级导航菜单").mouseover(function() {
                    var index = $(this).find("a").attr("index");
                    $(".list-1st2-li").removeClass("list-spread"); //先删除掉所有一级菜单展开的样式
                    $(".sp-item-" + index).addClass("list-spread");//
                });
    //鼠标离开时判断鼠标是否在当前li范围内部,如果不是就去掉list-spread类样式 $("一级导航菜单").mouseleave(function(event) { var oElement = $(this)[0]; var x = event.clientX; var y = event.clientY; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var width = oElement.offsetWidth; var height = oElement.offsetHeight; if(typeof(oElement.offsetParent) != 'undefined') { for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) { posX += oElement.offsetLeft; posY += oElement.offsetTop; } x1 = posX; y1 = posY; x2 = posX + width; y2 = posY + height; } else { x1 = oElement.x; y1 = oElement.y; x2 = oElement.x + width; y2 = oElement.y + height; } //鼠标不在一级导航菜单元素内部 if(x
    <= x1 || x >= x2 || y <= y1 || y >= y2) { var index = $(this).find("a").attr("index"); $(".sp-item-" + index).removeClass("list-spread"); } }); $("二级子菜单").mouseout(function() { $(this).removeClass("list-spread"); });
  • 相关阅读:
    C语言中for循环的使用
    详解C语言的main函数
    计算机语言的发展(the history of computer's language)
    hdu 1001
    hoj 1002
    hdu 1000
    POJ 1000(水题)
    hoj 1001
    code hunt题解(1)
    《C和指针》学习笔记(3)
  • 原文地址:https://www.cnblogs.com/codeon/p/6897546.html
Copyright © 2011-2022 走看看