发新贴  快速回复

伸缩菜单的问题

  一刀流@码农
2015-03-26 11:44
各位大神,小弟做了个这个效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    body{
        font-size: 12px;
        font-family: "微软雅黑";
        margin:0;
        padding:0; 
    }
    #oUl,.percent{
        list-style: none;
        padding:0;
        margin: 0;
    }
    #oUl{
        margin:40px auto;
        width:372px; 
      }
      .bigLi,.shit li{
        width: 120px;
        height:30px;
        line-height: 30px;
        background: #9F3;
        text-align: center;
    }
    .bigLi{
        float: left;
        margin-left: 4px;
        cursor: pointer;
    }
/*    .shit{
        display: none; 
    }*/
    .percent{
        position: relative;
    }

</style>
<script type="text/javascript" src="perfectMove.js"></script>
<script type="text/javascript">
    window.err= = function(){
        var oUl = document.getElementById('oUl');
        var percent = getClass(oUl,'percent');
        for (var i = 0; i < percent.length; i++) {
             var aHtwo = getLi(percent[i],'oHtwo')[0];
             aHtwo.err= = function(){
                 showLine(this.parentNode,{opacity:100,left:0},'move');
             }
             aHtwo.err= = function(){
                 showLine(this.parentNode,null,'shit');
             }
        };
        for (var i = 0; i < percent.length; i++) {
             var aLier = getCla(percent[i],'oHtwo');
             for (var j = 0; j < aLier.length; j++) {
                 aLier[j].onmousever = function(){

                 }
             };
         }; 
    }
    function showLine(object,json,bal){
        object.timer = null;
        clearInterval(object.timer);
        var aLi = getCla(object,'oHtwo');
        var iNow = 0;
        if (bal == 'move') {
            iNow = 0;
            object.timer = setInterval(function(){
                if (aLi[iNow]!=null&&aLi[iNow]!='undefined') {
                    var shit = aLi[iNow];
                    shit.style.display = 'block';
                    bufferPerfectMove(shit,json);
                    iNow++;
                    if (iNow==aLi.length) {
                        clearInterval(object.timer);
                    };
                }
            },80);
        }else{
            iNow = aLi.length-1;
            object.timer = setInterval(function(){
                var shit = aLi[iNow];
                bufferPerfectMove(aLi[iNow],{opacity:0,left:-((iNow-1)*20+20)+'px'},function(){
                    shit.style.display = 'none';
                });
                iNow--;
                if (iNow==-1) {
                    clearInterval(object.timer);
                };
            },80);
        }
    }
    //获取className不为oHtwo的li元素
    function getCla(object,name){
        var arr = [];
        var aLi = object.getElementsByTagName('li');
        for (var i = 0; i < aLi.length; i++) {
            if(aLi[i].className!=name){
                arr.push(aLi[i]);
            }
        };
        return arr;
    }
    //获取classname为oHtwo的元素
    function getLi(oParent,name){
        var arr = [];
        var aLi = oParent.getElementsByTagName('li');
        for (var i = 0; i < aLi.length; i++) {
            if(aLi[i].className==name){
                arr.push(aLi[i]);
            }else{
                aLi[i].style.position = 'absolute';
                aLi[i].style.top = i*30+'px';
                aLi[i].style.left = -((i-1)*20+20)+'px';
                aLi[i].style.filter = 'alpha(opacity:0)';
                aLi[i].style.opacity = 0;
            }
        };
        return arr;
    }
</script>
</head>
<body>
    <ul id="oUl">
      <li class="bigLi">
          <div class="shit">
              <ul class="percent">
                  <li class="oHtwo">首页</li>
                  <li>奥斯卡</li>
                  <li>银熊</li>
                  <li>百花</li>
                  <li>电影金像奖</li>
                  <li>百老汇</li>
              </ul>
          </div>
      </li>
      <li class="bigLi">
        <div class="shit">
              <ul class="percent">
                  <li class="oHtwo">产品</li>
                  <li>奥斯卡</li>
                  <li>银熊</li>
                  <li>百花</li>
                  <li>电影金像奖</li>
                  <li>百老汇</li>
              </ul>
          </div>
      </li>
      <li class="bigLi">
          <div class="shit">
              <ul class="percent">
                  <li class="oHtwo">关于</li>
                  <li>奥斯卡</li>
                  <li>银熊</li>
                  <li>百花</li>
                  <li>电影金像奖</li>
                  <li>百老汇</li>
              </ul>
          </div>
      </li>
  </ul>  
</body>
</html>

但是如果鼠标移动的快经常出现这种情况

是怎么回事?有没有解决的方法?
 
一刀流@码农
引用的JS文件在这里:
function getClass(oParent,name){
    var abj = oParent.getElementsByTagName('*');
    var arr = [];
    for (var i = 0; i < abj.length; i++) {
        if(abj[i].className == name){
            arr.push(abj[i]);
        }
    };
    return arr;
}

function getStyle(object,attr){
    if (object.currentStyle) {
        return object.currentStyle[attr];
    }else{
        return getComputedStyle(object,false)[attr];
    }
}

function setStyle(object,json){
    var attr = 0;
    for(attr in json){
        object.style[attr] = json[attr];
    }
}

//缓冲任意值完美框架
function bufferPerfectMove(object,json,fn){
    clearInterval(object.timer);
    object.timer = setInterval(function(){
        //标志变量
        var bal = true;
        var attr = '';
        for(attr in json){
            var iCur = null;
            if (attr == 'opacity') {
                iCur = parseInt(parseFloat(getStyle(object,attr))*100);
            }else{
                iCur = parseInt(getStyle(object,attr));
            }
            speed = (parseInt(json[attr])-iCur)/8;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            iCur+=speed;
            if (attr == 'opacity') {
                object.style.filter = 'alpha(opacity:'+iCur+')';
                object.style.opacity = iCur/100;
            }else{
                object.style[attr] = iCur+'px';
            }
            if (parseInt(json[attr])!=iCur) {
                bal = false;
            };
        }
        if (bal) {
            clearInterval(object.timer);
            if (fn) {
                fn();
            };
        };
    },30);

2015-03-26 11:51  回复本帖
无为
forum.php?mod=redirect&goto=findpost&pid=38047&ptid=12847
引用的JS文件在这里:
function getClass(oParent,name){
    var abj = oParent.getElementsByTagName('*');


把文件打成包发上来吧。。
2015-03-27 00:21  回复本帖
 
一刀流@码农
forum.php?mod=redirect&goto=findpost&pid=38058&ptid=12847
把文件打成包发上来吧。。

我更改了一下源代码,现在没有之前说的问题了,但是还是有别的问题,我更改之后就把源代码打包发上来。
2015-03-27 09:27  回复本帖
 
一刀流@码农
我把源代码发上来了,之前的问题已经更改完成了,但是在IE8下不能运行,希望大神们给我指点指点!
2015-03-27 10:58  回复本帖
 
一刀流@码农
forum.php?mod=redirect&goto=findpost&pid=38058&ptid=12847
把文件打成包发上来吧。。

无为大神,源代码已上传,问题已解决,但是IE8下不运行,望大神指点!
2015-03-27 11:01  回复本帖
无为
forum.php?mod=redirect&goto=findpost&pid=38064&ptid=12847
无为大神,源代码已上传,问题已解决,但是IE8下不运行,望大神指点!

this 的指向问题,在 ie 下 使用 attachEvent 绑定事件函数,会导致 this 指向错误,变成 window。



2015-03-27 12:51  回复本帖
 
一刀流@码农
forum.php?mod=redirect&goto=findpost&pid=38074&ptid=12847
this 的指向问题,在 ie 下 使用 attachEvent 绑定事件函数,会导致 this 指向错误,变成 window。




那请问无为大神,如何解决像这样的问题!
2015-03-27 22:35  回复本帖
 
一刀流@码农
forum.php?mod=redirect&goto=findpost&pid=38074&ptid=12847
this 的指向问题,在 ie 下 使用 attachEvent 绑定事件函数,会导致 this 指向错误,变成 window。




多谢无为大神的指点,问题已解决,现附上源代码,如有地方需要修改,还请无为大神斧正!
2015-03-27 22:57  回复本帖
登录 后才可以发表回复