zoukankan      html  css  js  c++  java
  • onoff组件

    /*
     head-onoff.js
     by sunhw 2014-9-17
     .head-btn 这个用于遍历出发浮层展现dom class无具体样式
     .show-panel 这个用于展现被隐藏的dom节点
     */
    T.dom.ready( function() {
        (function() {
            var subMenuLayout = T.get( 'subMenuLayout' );
            var userMsgLayout = T.get( 'userMsgLayout' );
            var historyLayout = T.get( 'historyLayout' );
            var isShowPanel = function( dom ) {
                var node = T.query( '.head-btn', dom )[ 0 ];
                var parentNode = node.parentNode;
                var timer = 0, ttl = 200;
                var off = function() {
                    T.removeClass( parentNode, 'show-panel' );
                };
                var onMouseOver = function() {
                    clearTimeOut();
                    T.addClass( parentNode, 'show-panel' );
                };
                var onMouseOut = function() {
                    clearTimeOut();
                    timer = setTimeout( off, ttl );
                };
                var clearTimeOut = function() {
                    clearTimeout( timer );
                };

                T.on( node, 'mouseenter', onMouseOver );
                T.on( node, 'mouseleave', onMouseOut );
                T.on( parentNode, 'mouseenter', clearTimeOut );
                T.on( parentNode, 'mouseleave', onMouseOut );
            };
            subMenuLayout && isShowPanel( subMenuLayout );
            userMsgLayout && isShowPanel( userMsgLayout );
            historyLayout && isShowPanel( historyLayout );
        })();
    } );

  • 相关阅读:
    jquery插件库收集网站
    百度地图api笔记
    css3 hover 动画
    使用Slip.js快速创建整屏滑动的手机网页
    mobile移动端,PC桌面端页面无刷新过场JS骨架
    zepto.js手机端网页上下手指滑动图片切换效果代码
    onepage-scroll – jQuery单页/全屏滚动插件
    css3loading动画
    onepage scorll全屏滚动插件
    css3动画集
  • 原文地址:https://www.cnblogs.com/sunhw360/p/4139579.html
Copyright © 2011-2022 走看看