前端实战：教你写出简单的侧边栏功能以及返回顶部特效

 个人博客网站文章地址：http://blog.mclink.xyz/index/article/index/id/33.html  

 前阵子博主忙着一些事情，有些时间没更新了，几天前有个侧边栏的需求，于是自己简单用几个框架简单实现了一个。原理挺简单的，在此记录一下。先放效果图出来。

侧边栏功能分析：

模态框展示（点击上方的最后一个按钮）点击灰色区域就会退出模态框界面

这些东西对一个前端高手来说可谓是小菜一碟了，不过对一个学后端的来说，如果对前端框架不够熟悉应该是写不出来的，所以这篇文章主要是面向于后端开发人员的，看完后你就能写出属于自己风格的侧边栏了。

来，开始放代码了，按步骤来，

第一步：引入相关框架的js和css文件（主要是layui框架和bootstrap框架）

        <!-- 引入LayUI样式 -->
	<link rel="stylesheet" href="../../../../public/static/layui/css/layui.css">
	<!-- 引入bootstrap.min.css -->
	<link rel="stylesheet" href="../../../../public/static/bs/css/bootstrap.min.css">
	<!-- 引入jquery -->
	<script src="../../../../public/static/jqueryui/jquery.js"></script>
	<!-- 引入boot.min.js -->
	<script src="../../../../public/static/bs/js/bootstrap.min.js"></script>

当layui.css和bootstrap.min.css的位置对调时，图片颜色会发送相应的变化，就是第一张图和第二张的颜色区别，这里的重点是一定要先引入jquery.js再引入bootstrap.min.js，

第二步：写出侧边栏的代码，以及定位和对应样式的一定处理

1.侧边栏代码

        <!-- 引入背景音乐 -->
	<audio id="music" src="带你去旅行.mp3" >不支持audio标签</audio>
	<!-- 侧边栏代码 -->
	<div>
		<ul class="layui-fixbar">
		<li>
			<a href="http://www.tp5.com/index/index/index" type="button"  data-toggle="tooltip" data-placement="top" title="返回首页">
				<i class="layui-icon" style="font-size: 28px">&#xe68e;</i>
			</a>
		</li>
		<li>
			<a   οnclick="play()";>
				<i  id="ic" class="layui-icon" style="font-size: 28px">&#xe652;</i>
			</a>
		</li>
		<li>
			<a  data-toggle="tooltip" data-placement="top" title="与我交流"  href="tencent://message/?uin=602060558&Site=http://vps.shuidazhe.com&Menu=yes">
			<i  class="layui-icon" style="font-size: 28px">&#xe63a;</i>
		    </a>
		</li>
		<li>
			<a type="button"  data-toggle="modal" data-target=".bs-example-modal-sm">
		    <i class="layui-icon" style="font-size: 28px">&#xe611;</i>
		    </a> 
		</li>
	</ul>

简单分析一下，这段代码首先引用了H5的audio标签来引入背景音乐。我选的背景音乐是《带你去旅行》。然后是一个ul标签，<ul>里面有四个<li>每个<li>里面有一个<a>标签,每个<a>标签里面有一个<i>标签，<i>标签里面放的是layui的字体图标，

字体图标的对应样式可以在layui的官网查看，如图：

其实我本来还不知道layui哪个类是用来做侧边栏样式的，于是我用开发者工具查看了官网的侧边栏代码，发现原来是ul写个类名为layui-fixbar就好了，每个侧边栏的功能都是不一样的，比如说第一个跳转主页，实际上就是一个超链接，不过我添加了提示功能，这个提示功能是bootstrap的静态提示框，看图：

模范着我写就行，或者去看看手册，这个功能很简单。

第二个按钮的功能是播放背景音乐和字体图标切换功能。实际上就是一个a标签绑定了一个事件，点击时触发play()函数.函数的具体实现为（原生js和jquery混合使用），上代码：

 // 播放/暂停背景音乐
        var isPlaying =false; 
        function play() {
            var player = document.getElementById('music');
            if (isPlaying) {
                // 如果正在播放, 停止播放并停止读取此音乐文件
                player.pause();

                
            } else {
               //播放
                player.play();
                
            }
            isPlaying = !isPlaying;//转换播放状态
        }
        //转换播放图标
        var tag=false;
        $('#ic').click(
        	function(){
        		
        		if(!tag)
        		{
        			$('#ic').html("&#xe651");
        		}
        		else
        		{
        			$('#ic').html("&#xe652");
        		}
        		tag =!tag;

        	});

代码逻辑很简单，就点击播放换成播放的字体图标并播放音乐，再次点击就换成暂停的字体图标并停止播放音乐。（这里的话就是当音乐播放完后，需要点击两次才能再次重来，不过这个恰好解决了图标问题，因为你不点暂停的话音乐放完了图标还是属于播放状态，点两次后也是播放状态，不过这时又会开始放歌了。不过实际上很少人会一直循环放背景音乐吧。)，转换图标这个其实也可以使用jquery的toggle（）函数，就是点一次实现第一个函数，再点实现第二个函数，如此循环。不过这里我用原生逻辑了。

第三个按钮是点击跳出对应QQ号码的聊天窗口（QQ,TIM都可以），其实是腾讯提供了一个跳转链接，只要在a标签上使用就好tencent://message/?uin=这里写QQ号码&Site=http://vps.shuidazhe.com&Menu=yes  ,亲测PC端移动端都能运行，不过好像iOS的浏览器不支持。

第四个按钮就是模态框的使用

首先要先写好模态框代码，如下：

<!-- 模态框 -->
	<div  class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" id="all">
    <div class="modal-content"  id="qr"><br/>
    	<p style=" text-align: center"><strong>欢迎关注个人微信公众号</strong></p>
        
       <img id="qrimage" src="qrcode.jpg"/>
    </div>
  </div>
  </div>

这段代码浅显易懂，我就不解释了，要写的内容放在modal-content类的div里就好了。主要是这里直接这样写的话图片位置是不大对的所以我们要自定义一下位置（后面会说）

2.位置以及对应样式的处理

直接上代码（css不懂的话我也没办法了）

        /*侧边栏定位*/
		.layui-fixbar{
			position: absolute;
			position: fixed;
			top:200px;
			right: 0px;
		}
		/*二维码大小*/
		#qr{
			width: 320px;
			height: 320px;
		
		}
		/*二维码位置*/
		#qrimage{
			margin-left: 30px;
		}
		/*模态框位置*/
		#all{
			margin-top: 150px;
		}

对了，最后别忘了加上这一句哦！

 //启动提示框
    $(function () {
     $('[data-toggle="tooltip"]').tooltip()
     })

不然提示样式就是浏览器默认的了，很丑的。侧边栏功能就这样完成了，很简单吧！再说一个更加简单的返回顶部特效，

功能说明：根据滚动条高度，当滚动条高度超过某个设定的值时显示返回顶部的图片，不超过则隐藏，点击后设置高度为0，实现返回顶部功能。效果请看第一张图，其实就是一张图片。

       <div class="scrolltop">
            <img src="__STATIC__/images/top.jpg" width="50px" height="50px" id="top">
          </div>

样式处理：

 .scrolltop{
 	position: absolute;
 	position: fixed;
    left:1250px;
    top:540px;
    display: none;
    
 	
 }

jquery实现代码。

//返回顶部
	$(document).ready(function(){  
    $(".scrolltop").hide();  
    $(function () {  
        //设置高度  
        var height=100;  
        //scroll() 方法为滚动事件  
        $(window).scroll(function(){  
            if ($(window).scrollTop()>height){  
                $(".scrolltop").fadeIn(500);  //这里改成show()也可以
            }else{  
                $(".scrolltop").fadeOut(500);  //这里改成hide()也可以
                }  
        });  
        $(".scrolltop").click(function(){  
            $('body,html').animate({scrollTop:0},100);  //animate为动画效果，第二个参数是时间，单位ms
            return false;  
        });  
    });  
});  

更多内容及资源分享将在公众号同步更新，公众号id为：MC_develop，或者扫描下方二维码关注。