jQuery手机wap动画导航菜单

收藏

分享一款手机滑动菜单，显示图片和描述的效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<ul> 
    <li> 
        <img src="images/1.jpg" alt="javascript高级前端开发课程"/> 
        <a href="http://www.erdangjiade.com/js">网页特效<br /><span>高级前端开发课程</span></a> 
        <span class="bg"></span> 
    </li> 
    <li> 
        <img src="images/2.jpg" alt="XHTML+CSS高级页面架构师课程" /> 
        <a href="http://www.erdangjiade.com/templates">网站模板<br /><span>高级页面架构师课程</span></a> 
        <span class="bg"></span> 
    </li> 
</ul>

JS

window.onload = function() { 
    var oDiv = document.getElementById('box'); 
    var aLi = oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li'); 
    var iTime = 400; 
    var iTime2 = 200; 
    var i = 0; 
 
    var duringA = function() { 
        css(this, 'marginLeft', -(css(this, 'width')) / 2 - 1); 
    }; 
 
    for (i = 0; i < aLi.length; i++) { 
 
        aLi[i].onmouseover = function() { 
            var oImg = this.getElementsByTagName('img')[0]; 
            var oA = this.getElementsByTagName('a')[0]; 
            var oBg = this.getElementsByTagName('span')[1]; 
 
            if (this.timer) { 
                clearTimeout(this.timer); 
                this.timer = null; 
                return; 
            } 
 
            oA.onmouseover = oImg.onmouseover = oBg.onmouseover = function(ev) { 
                if (this.parentNode.timer) { 
                    clearTimeout(this.parentNode.timer); 
                    this.parentNode.timer = null; (ev || event).cancelBubble = true; 
                } 
            }; 
            oImg.onmouseout = oA.onmouseout = oBg.onmouseout = function(ev) { 
                var oParent = this.parentNode; 
                if (oParent.timer) clearTimeout(oParent.timer); 
                oParent.timer = setTimeout(function() { 
                    oParent.onmouseout(); 
                    oParent.timer = null; 
                }, 
                200); (ev || event).cancelBubble = true; 
            }; 
 
            miaovStartMove2(oImg, { 
                width: 153 
            }, 
            MIAOV_MOVE_TYPE.FLEX, 
            function() { 
                css(this, 'marginLeft', -78); 
            }, 
            duringA); 
 
            miaovStartMove2(oA, { 
                top: 56, 
                paddingTop: 36, 
                paddingBottom: 36 
            }, 
            MIAOV_MOVE_TYPE.FLEX); 
            miaovStartMove2(oBg, { 
                height: 115 
            }, 
            MIAOV_MOVE_TYPE.BUFFER); 
        }; 
 
        aLi[i].onmouseout = function() { 
            var oImg = this.getElementsByTagName('img')[0]; 
            var oA = this.getElementsByTagName('a')[0]; 
            var oBg = this.getElementsByTagName('span')[1]; 
 
            miaovStartMove2(oImg, { 
                width: 0 
            }, 
            MIAOV_MOVE_TYPE.BUFFER, 
            function() { 
                css(this, 'marginLeft', 0); 
            }, 
            duringA); 
            miaovStartMove2(oA, { 
                top: 4, 
                paddingTop: 8, 
                paddingBottom: 0 
            }, 
            MIAOV_MOVE_TYPE.BUFFER); 
            miaovStartMove2(oBg, { 
                height: 0 
            }, 
            MIAOV_MOVE_TYPE.BUFFER); 
        }; 
    } 
};