定位悬浮二维码

呆桃啵啵猪

已于 2022-05-15 19:25:01 修改

阅读量322

点赞数

分类专栏： HTML+CSS+JS 文章标签：定位 js css html less

于 2022-04-06 13:56:00 首次发布

本文链接：https://blog.csdn.net/weixin_45701868/article/details/124264073

版权

本文详细介绍了如何使用HTML、CSS和JavaScript技术实现网页上的动态悬浮二维码。通过CSS实现二维码的样式定位，结合JavaScript使其能够在页面滚动时始终保持在屏幕某一位置，增强了用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.util{
				width: 40px;
				margin: 0 auto;
			}
			.util .util1:hover{
				background-image: url(../img/11.png);
			}
			.util .util1:hover span{
				display: block;
				padding-top: 90px;
				font-size: 14px;
				color: grey;
			}
			.util .util1:hover img{
				display: block;
			}
			.util-item{
				width: 30px;
				height: 30px;
				background-image: url(../img/1.png);
				background-size: 100%;
				margin: 10px;
			}
			.util1{
				position: relative;
			}
			.util .util1 img,span{
				width: 80px;
				position: absolute;
				left: -90px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="util">
			<div class="util1 util-item">
				<img src="../img/00.png" /