5购物车菜单显示隐藏和事件委托版

HTML代码：

第一版HTML：(非事件委托版)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单和详细显示隐藏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
            font-size: 12px;
        }

        .box {
            position: relative;
            margin: 20px auto;
            width: 140px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #999;
            background: #fff;
        }

        .box .boxDel {
            display: none;
            position: absolute;
            right: -1px;
            top: 40px;
            width: 310px;
            height: 70px;
            border: 1px solid #999;
        }

        .box span {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 140px;
            height: 40px;
            background: #fff;
        }

        .box.bg span {
            height: 41px;
            border-bottom-color: #fff;
        }
    </style>
</head>
<body>
<div class="box bg" id="box">

    <div class="boxDel" id="boxDel">购物车详细信息</div>
    <span>我的购物车</span>
</div>
<script charset="UTF-8" type="text/javascript" src="js/utils.min.js"></script>
<script type="text/javascript">
    var box = document.getElementById("box"),boxDel = document.getElementById("boxDel");
    box.onmouseenter =function(){
        utils.addClass(this,"bg");
        utils.css(boxDel,"display","block");
    };

    box.onmouseleave =function(){
        utils.removeClass(this,"bg");
        utils.css(boxDel,"display","none");
    };
</script>
</body>
</html>

第二版HTML(事件委托版)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单和详细显示隐藏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
            font-size: 12px;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .box {
            position: absolute;
            top: 20px;
            right: 200px;
            z-index: 10;
            width: 140px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #999;
            background: #fff;
        }

        .boxDel {
            display: none;
            position: absolute;
            top: 60px;
            right: 200px;
            width: 310px;
            height: 70px;
            border: 1px solid #999;
            background: #fff;
        }

        .box.bg {
            border-bottom-color: #fff;
        }

    </style>
</head>
<body>
<div class="box" id="box">
我的购物车
</div>
<div class="boxDel" id="boxDel">购物车详细信息</div>



<script charset="UTF-8" type="text/javascript" src="js/utils.min.js"></script>
<script type="text/javascript">
    var box = document.getElementById("box"),boxDel = document.getElementById("boxDel");

    boxDel.onmouseover=function(e){
        e = e || window.event;
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    };

    document.body.onmouseover=function(e){
        e = e || window.event;
        var curTar = e.target || e.srcElement;

        if(curTar.id ==="box"){
            utils.addClass(curTar,"bg");
            utils.css(boxDel,"display","block");
            return;
        }
        //->剩下的就是隐藏
        utils.removeClass(box, "bg");
        utils.css(boxDel, "display", "none");
    };



</script>
</body>
</html>

以上两版的HTML所引进的JS:(也就是utils.js加密版)

var utils=function(){function listToArray(a){var b,c;if(flag)return Array.prototype.slice.call(a,0);for(b=[],c=0;c<a.length;c++)b[b.length]=a[c];return b}function formatJSON(jsonStr){return"JSON"in window?JSON.parse(jsonStr):eval("("+jsonStr+")")}function offset(a){for(var b=a.offsetLeft,c=a.offsetTop,d=a.offsetParent;d;)-1===navigator.userAgent.indexOf("MSIE 8")&&(b+=d.clientLeft,c+=d.clientTop),b+=d.offsetLeft,c+=d.offsetTop,d=d.offsetParent;return{left:b,top:c}}function win(a,b){return"undefined"==typeof b?document.documentElement[a]||document.body[a]:(document.documentElement[a]=b,document.body[a]=b,void 0)}function children(a,b){var d,e,f,g,h,i,c=[];if(flag)c=this.listToArray(a.children);else{for(d=a.childNodes,e=0,f=d.length;f>e;e++)g=d[e],1===g.nodeType?c[c.length]=g:null;d=null}if("string"==typeof b)for(h=0;h<c.length;h++)i=c[h],i.nodeName.toLowerCase()!==b.toLowerCase()&&(c.splice(h,1),h--);return c}function prev(a){if(flag)return a.previousElementSibling;for(var b=a.previousSibling;b&&1!==b.nodeType;)b=b.previousSibling;return b}function next(a){if(flag)return a.nextElementSibling;for(var b=a.nextSibling;b&&1!==b.nodeType;)b=b.nextSibling;return b}function prevAll(a){for(var b=[],c=this.prev(a);c;)b.unshift(c),c=this.prev(c);return b}function nextAll(a){for(var b=[],c=this.next(a);c;)b.push(c),c=this.next(c);return b}function sibling(a){var b=this.prev(a),c=this.next(a),d=[];return b?d.push(b):null,c?d.push(c):null,d}function siblings(a){return this.prevAll(a).concat(this.nextAll(a))}function index(a){return this.prevAll(a).length}function firstChild(a){var b=this.children(a);return b.length>0?b[0]:null}function lastChild(a){var b=this.children(a);return b.length>0?b[b.length-1]:null}function append(a,b){b.appendChild(a)}function prepend(a,b){var c=this.firstChild(b);return c?(b.insertBefore(a,c),void 0):(b.appendChild(a),void 0)}function insertBefore(a,b){b.parentNode.insertBefore(a,b)}function insertAfter(a,b){var c=this.next(b);return c?(b.parentNode.insertBefore(a,c),void 0):(b.parentNode.appendChild(a),void 0)}function hasClass(a,b){var c=new RegExp("(^| +)"+b+"( +|$)");return c.test(a.className)}function addClass(a,b){var d,e,f,c=b.replace(/(^ +| +$)/g,"").split(/ +/g);for(d=0,e=c.length;e>d;d++)f=c[d],this.hasClass(a,f)||(a.className+=" "+f)}function removeClass(a,b){var d,e,f,g,c=b.replace(/(^ +| +$)/g,"").split(/ +/g);for(d=0,e=c.length;e>d;d++)f=c[d],this.hasClass(a,f)&&(g=new RegExp("(^| +)"+f+"( +|$)","g"),a.className=a.className.replace(g," "))}function getElementsByClass(a,b){var c,d,e,f,g,h,i,j,k;if(b=b||document,flag)return this.listToArray(b.getElementsByClassName(a));for(c=[],d=a.replace(/(^ +| +$)/g,"").split(/ +/g),e=b.getElementsByTagName("*"),f=0,g=e.length;g>f;f++){for(h=e[f],i=!0,j=0;j<d.length;j++)if(k=new RegExp("(^| +)"+d[j]+"( +|$)"),!k.test(h.className)){i=!1;break}i&&(c[c.length]=h)}return c}function getCss(a){var b=null,c=null;return flag?b=window.getComputedStyle(this,null)[a]:"opacity"===a?(b=this.currentStyle["filter"],c=/^alpha\(opacity=(\d+(?:\.\d+)?)\)$/,b=c.test(b)?c.exec(b)[1]/100:1):b=this.currentStyle[a],c=/^(-?\d+(\.\d+)?)(px|pt|em|rem)?$/,c.test(b)?parseFloat(b):b}function setCss(a,b){if("float"===a)return this["style"]["cssFloat"]=b,this["style"]["styleFloat"]=b,void 0;if("opacity"===a)return this["style"]["opacity"]=b,this["style"]["filter"]="alpha(opacity="+100*b+")",void 0;var c=/^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;c.test(a)&&(isNaN(b)||(b+="px")),this["style"][a]=b}function setGroupCss(a){for(var b in a)a.hasOwnProperty(b)&&setCss.call(this,b,a[b])}function css(a){var b=arguments[1],c=Array.prototype.slice.call(arguments,1);if("string"==typeof b){if("undefined"==typeof arguments[2])return getCss.apply(a,c);setCss.apply(a,c)}b=b||0,"[object Object]"===b.toString()&&setGroupCss.apply(a,c)}var flag="getComputedStyle"in window;return{win:win,offset:offset,listToArray:listToArray,formatJSON:formatJSON,children:children,prev:prev,next:next,prevAll:prevAll,nextAll:nextAll,sibling:sibling,siblings:siblings,index:index,firstChild:firstChild,lastChild:lastChild,append:append,prepend:prepend,insertBefore:insertBefore,insertAfter:insertAfter,hasClass:hasClass,addClass:addClass,removeClass:removeClass,getElementsByClass:getElementsByClass,css:css}}();

posted @ 2016-04-29 19:08 kpengfang 阅读(256) 评论(0) 编辑收藏举报

刷新页面返回顶部

Key

生命不只拥有一个早晨，太阳在无数次为你我升起!

5购物车菜单显示隐藏和事件委托版

公告