温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JS——侧栏导航点击滑入滑出效果

发布时间:2020-06-17 12:59:54 来源:网络 阅读:4016 作者:web郭乐 栏目:web开发

对于定位的侧栏导航点击滑入滑出这一效果,我想很多人都明白原理,并且很简单的就能运用JS+Jquery就能做出。而且是一个非常常见的简单效果。在此呢,小码哥只是为了自己以后能够翻看,还有就是给那些刚入门javascript的新人们一点启发。

作为入门javascript的人来说,明白一个效果是怎么实现的尤为重要。即原理是怎么回事尤为重要!小码哥昨天在路上偶遇一应届毕业生,刚从青岛来北京找工作。是学计算机的,C及C++起步,由此基础,我说你学什么语言都有优势。必定逻辑基础有了不是!?

废话不说了,直接上码:

HTML代码:

<div class="sidebar">

<div class="side_btn1 side_btn"><a class="s_btn1" href="#" title="点击弹出"></a></div>

<div class="side_btn2 side_btn">

    <a class="s_btn2" href="#" title="点击隐入"></a>

    </div>

<div class="side_main">

    <a class="side_hd" href="#" title=""></a>

        <ul class="side_nav">

        <li class="li1"><a href="#" title="">老友回归领弹药</a></li>

            <li class="li1"><a href="#" title="">军功翻倍赠彩蛋</a></li>

            <li class="li1"><a href="#" title="">坦克模式送武器</a></li>

            <li class="li1"><a href="#" title="">集齐碎片兑豪礼</a></li>

            <li class="li1"><a href="#" title="">全新八星预先售</a></li>

            <li class="li1"><a href="#" title="">永久武器充值抽</a></li>

            <li class="li1"><a href="#" title="">微博转发抽大奖</a></li>

            <li class="li1"><a href="#" title="">偶像为你而主演</a></li>

            <li class="li1"><a href="#" title="">呼朋唤友赢好礼</a></li>

        </ul><!--side_nav-->

    </div><!--.side_main-->

</div><!--.sidebar-->


CSS代码:

/*S sidebar*/

.sidebar{width:200px;padding:100px 0 0 0;height:100%;position:fixed;left:-200px;top:0;background:#0e0e0e;_position:absolute;_height:1275px;z-index:999;}

.sidebar .side_btn{position:absolute;width:62px;height:153px;right:-57px;top:320px;}

.sidebar .side_btn a{display:block;width:62px;height:153px;}

.sidebar .side_btn2{display:none;}

.sidebar .side_btn1 .s_btn1{background:url(../p_w_picpaths/sidebar-btn.png) 0 0;}

.sidebar .side_btn2 .s_btn2{background:url(../p_w_picpaths/sidebar-btn.png) -62px 0;}

.side_main{width:179px;margin:0 auto;}

.side_main .side_hd{display:block;width:179px;height:61px;background:url(../p_w_picpaths/sidebar-hd.jpg);}

.side_main .side_nav{width:100%;margin-top:50px;}

.side_main .side_nav li a{display:block;width:179px;height:51px;background:url(../p_w_picpaths/sidebar-bg.png) 0 0;text-align:center;line-height:51px;font-size:15px;color:#e6c1a7;}

.side_main .side_nav li a:hover{background:url(../p_w_picpaths/sidebar-bg.png) 0 -51px;color:#ffce4a;}


JS代码:

/*左侧导航*/

$('.side_btn1').click(function(){

$('.sidebar').animate({left:"0px"},1000,function(){

$('.side_btn1').hide();

$('.side_btn2').show();

});

});

$('.side_btn2').click(function(){

$('.sidebar').animate({left:"-200px"},1000,function(){

$('.side_btn2').hide();

$('.side_btn1').show();

});

});

配图:

load-btn.png

JS——侧栏导航点击滑入滑出效果

sidebar-btn.png

JS——侧栏导航点击滑入滑出效果

sidebar-hd.jpg

JS——侧栏导航点击滑入滑出效果

这是其中用到的图片,及按钮背景图。

如果不想用上述图片的,可以根据代码中图片的尺寸,自己换用其他图片。


再有就是,在该效果中,涉及到了JS Jquery中的动画animate方法。不了解的码农们希望能自己学习!

其中原理就是控制模块的left值。

希望能对大家有所帮助。哇嘎嘎

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI