No Comments

jquery实现从右到左滑出来的效果

代码也没什么 就一个点击时间 判断class是否存在 实例在下面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="renderer" content="webkit">
<title>css3</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function () {
    $('#menu-trigger').click(function () {
        if (!$('.dLeft').hasClass('mobile-menu-left')) {
            $('.head, .sild, .footer').addClass('mobile-left');
            $('.dLeft').addClass('mobile-menu-left');
        } else {
            $('.dLeft').removeClass('mobile-menu-left');
            $('.head, .sild, .footer').removeClass('mobile-left');
        }
    });
});
</script>
<style type="text/css">
body{color:#222;-webkit-text-size-adjust:none; overflow-x: hidden;margin:0; padding:0;}
#menu-trigger { display:block; width:24px; height:21px; z-index:99999999; padding-top:20px; margin-left:20px;}
.head { width:100%; height:112px; background:#e1e1e1; color:#fff;}
.sild { width:100%; height:800px; background:#FF0;}
.footer { width:100%; height:50px; background:#e1e1e1;}
 
.head, .dLeft, .sild, .footer { position:relative; left:0; -webkit-transition:left 0.3s; -moz-transition:left 0.3s; transition:left 0.3s;}
.dLeft { width:500px; height:962px; background:#000; position:fixed; left:-500px; top:0;}
.mobile-left{left:500px;}
.mobile-menu-left{left:0px;}
</style>
 
</head>
 
<body>
 
<div class="head"><a id="menu-trigger" href="javascript:void(0)"><img src="http://www.mqjj.com/templets/spy/images/menu.png"></a></div>
<div class="sild"></div>
<div class="dLeft"></div>
<div class="footer"></div>
</body>
 
</html>

最后更新于 2018-07-18 14:04:55 并被添加「」标签，已有 4024 位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

此处评论已关闭

[player id="719102"/]