jquery绿色网站右边悬浮固定客服联系方式边栏效果代码-html代码-BFW代码库

jquery绿色网站右边悬浮固定客服联系方式边栏效果代码

代码语言：html

代码描述：jquery绿色网站右边悬浮固定客服联系方式边栏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
	<style type="text/css">
		body{
			position: relative;
			background: #EFF2F4;
			font: normal 13px "宋体" !important;
		}
		body,div,ul,li,p,a,img{
			padding: 0;
			margin: 0;
		}
		/*右侧悬浮菜单*/
		.slide{
			width: 50px;
			height: 250px;
			position: fixed;
			top: 50%;
			margin-top: -126px;
			background: #018D75;
			right: 0;
			border-radius: 5px 0 0 5px;
			z-index: 999;
		}
		.slide ul{
			list-style: none;
		}
		.slide .icon li{
			width: 49px;
			height: 50px;
			background: url(//repo.bfw.wiki/bfwrepo/images/nav/icon.png) no-repeat;
		}
		.slide .icon .up{
			background-position:-330px -120px ;
		}
		.slide .icon li.qq{
			background-position:-385px -73px ;
		}
		.slide .icon li.tel{
			background-position:-385px -160px ;
		}
		.slide .icon li.wx{
			background-position:-385px -120px ;
		}
		.slide .icon li.down{
			background-position:-330px -160px ;
		}
		.slide .info{
			top: 50%;
			height: 147px;
			position: absolute;
			right: 100%;
			background: #018D75;
			width: 0px;
			overflow: hidden;
			margin-top: -73.5px;
			transition:0.5s;
			border-radius:4px 0 0 4px ;
		}
		.slide .info.hover{
			width: 145px;
			
		}
		.slide .info li{
			width: 145px;
			color: #CCCCCC;
			text-align: center;
		}
		.slide .info li p{
			font-size: 1.1em;
			line-height: 2em;
			padding: 15px;
			text-align: left;
		}
		.slide .info li.qq p a{
			display: block;
			margin-top: 12px;
			width: 100px;
			height: 32px;
			line-height: 32px;
			color: #00DFB9;
			font-size: 16px;   
			text-align: center;
			text-decoration: none;
			border: 1px solid #00DFB9;
			border-radius: 5px;
		}
		.slide .info li.qq p a:hover{
			color: #FFFFFF;
			border: none;
			background: #00E0DB;
		}
		.slide .info li div.img{
			height: 100%;
			background: #DEFFF9;
			margin: 15px;
		}
		.slide .info li div.img img{
			width: 100%;
			height: 100%;
		}
		/*控制菜单的按钮*/
		.index_cy{
			width: 30px;
			height: 30px;
			background: url(//repo.bfw.wiki/bfwrepo/images/nav/index_cy.png);
			position: fixed;
			right: 0;
			top: 50%;
			margin-top: 140px;
			background-position: 62px 0;
			cursor: pointer;
		}
		.index_cy2{.........完整代码请登录后点击上方下载按钮下载查看