实现网页右侧固定的qq客服，微信，手机号，置顶的功能

html代码部分 图片路径改成自己的

<!--网页右侧浮动代码-->
		<div id="right">
			<!--qq-->
			<div id="qq">
				<a target="_blank" href="tencent://message/?Menu=yes&uin=2994999647&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45">
					<!--<img border="0" src="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=2994999647&website=www.oicqzone.com" alt="联系我" title="联系我"/>-->
					<i class="qq-Picture">
						<img src="images/qq.jpg"/>
					</i>
				</a>
			</div>

			<!--手机号-->
			<div id="sj">
				<a href="javascript:void(0)" onm ouseOut="hidePhone()" onm ouseover="showPhone()">
					<i class="phone-Picture">
						<img src="images/Phone.jpg" />
					</i>
				</a>
				<div id="Phone">
					12312341234
				</div>
			</div>

			<!--微信图片-->
			<div id="wx">
				<a href="javascript:void(0)" onm ouseOut="hideImg()" onm ouseover="showImg()">
					<i class="wx-Picture">
						<img src="images/wx.jpg" />
					</i>
				</a>
				<div id="wxImg">
					<img src="images/05.jpg" />
				</div>
			</div>
			<!--置顶-->
			<div id="zd">
				<a href="#" id="goTopBtn">
					<i class="top-Picture">
						<img src="images/Top.jpg"/>
					</i>
				</a>
			</div>

		</div>

创作不易，如果这篇文章帮助到了你，请留下个赞再走吧。。

js代码部分 注意引入路径

<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			new WOW().init();

			//手机号
			function showPhone() {
				document.getElementById("Phone").style.display = 'block';
			}

			function hidePhone() {
				document.getElementById("Phone").style.display = 'none';
			}
			//微信图片
			function showImg() {
				document.getElementById("wxImg").style.display = 'block';
			}

			function hideImg() {
				document.getElementById("wxImg").style.display = 'none';
			}
			//JS直接返回顶部
			let back = document.getElementById('goTopBtn');
			back.onclick = function() {
				document.documentElement.scrollTop = 0;
			}
		</script>

创作不易，如果这篇文章帮助到了你，请留下个赞再走吧。。

css代码部分

<style type="text/css">
			/*右侧浮动样式*/
			
			#right {
				float: right;
				position: fixed;
				right:20px;
            	bottom:200px;
            	z-index: 99999999;
			}
			
			#qq,
			#wx,
			#sj,
			#zd {
				line-height: 80px;
			}
			
			
			#Phone,
			#wxImg {
				right: 100px;
				display: none;
				back-ground: #f00;
				position: absolute;
			}
			
			#Phone{
				text-align: center;
				font-size: 30px;
				width: 180px;
				height: 100px;
				background-color: white;
			}
			#wxImg img {
				width: 150px;
				height: 180px;
			}
			
			a {
				text-decoration: none;
				list-style: none;
				color: #000;
			}
			
			.qq-Picture img,
			.phone-Picture img,
			.wx-Picture img,
			.top-Picture img {
				width: 50px;
				height: 50px;
			}
		</style>

创作不易，如果这篇文章帮助到了你，请留下个赞再走吧。。

下面是我使用的图，也可以用自己的……

wx.jpg

Top.jpg

qq.jpg

Phone.jpg

创作不易，如果这篇文章帮助到了你，请留下个赞再走吧。。