ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-04-08 15:34:02  阅读:151  来源: 互联网

标签:qq style img 微信 Phone getElementById document 置顶


实现网页右侧固定的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
wx.jpg

在这里插入图片描述Top.jpg

在这里插入图片描述
qq.jpg

在这里插入图片描述
Phone.jpg

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

标签:qq,style,img,微信,Phone,getElementById,document,置顶
来源: https://blog.csdn.net/BubbleABC/article/details/115520985

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有