zoukankan      html  css  js  c++  java
  • 移动端右侧导航 显示隐藏js

    transform与fixed影响

    html按钮

    <span class="nav-btn"></span>
    <span class="close"></span>
    

    css显示隐藏样式

    body.active{   /* class=active的标签生效 */
        transform: translate3d(-260px,0,0);
        transition: all 0.2s ease-in-out;
    }
    body.show{   /* class=show的标签生效 */
        transform: translate3d(0px,0,0);
        transition: all 0.2s ease-in-out;
    }
    

      

    js部分

    			// 右侧导航
    			document.addEventListener("DOMContentLoaded", function(){
    				(function(){
    					var btn  = document.querySelector(".nav-btn"),
    						clo  = document.querySelector(".close"),
    						body = document.querySelector("body");
    						btn.onclick = function(){
    							body.classList.add("active"); //添加左划动画
    							body.classList.remove("show"); //删除右划动画
    							btn.style.display='none';    //隐藏三横按钮
    							clo.style.display='block'	//显示X按钮
    // 							$('.nav-btn').css({display:'none'}),  //jQuery显示隐藏方法
    // 							$('.close').css({display:'block'})
    						}
    						clo.onclick = function(){
    							body.classList.add("show"); //添加右划动画
    							body.classList.remove("active"); //删除左划动画
    							btn.style.display='block';    //显示三横按钮
    							clo.style.display='none';	//隐藏X按钮
    // 							$('.nav-btn').css({display:'block'}),
    // 							$('.close').css({display:'none'})
    						}
    				})(window)
    			},false);
    

      

  • 相关阅读:
    adt 下载有时候下载不下来
    phonegap 2.5.0 创建项目
    jquerymobile tap事件被触发两次。
    phonegap Resource ID #0x0
    淘宝客淘宝开放平台要UTF编码才能获取数据
    js document.addEventListener 注册事件,
    jquerymobile 转场之后不执行onload事件
    我的第一篇博客
    心情
    箭头css
  • 原文地址:https://www.cnblogs.com/qing1304197382/p/10102340.html
Copyright © 2011-2022 走看看