js隐藏和显示二维码

最新推荐文章于 2023-06-03 13:22:52 发布

前端小疯子

最新推荐文章于 2023-06-03 13:22:52 发布

阅读量697

点赞数

分类专栏： js特效文章标签： js隐藏和显示 js二维码显示和关闭

本文链接：https://blog.csdn.net/weixin_45097456/article/details/101531598

版权

js特效专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一次写博客，请多多指教，话不多说；滑入和滑出。
滑入时显示
滑出关闭 `

	<style type="text/css">
				#bx1{
					width: 10px;
					height: 500px;
					background-color: aqua;
					 position: relative;    /* 相对定位 */
				}
				#bx2{
					width: 50px;
					height: 50px;
					position: absolute;      /* 使用子绝相父定位的方式*/
					top: 100px;       
					left: 10px;
					 display: none; 		/* 将二维码隐藏  */
				}
		</style>
	</head>
	<body>
		<div id="bx1">
			<img id="bx2" src="img/01.png" alt="">
		</div>
		<script>
			window.onload = function(){                      //onload事件，当页面载入完毕后执行Javascript代码：
				var bx1  =document.getElementById('bx1');    //使用id的方式获取到节点
				bx1.onmouseover =function(){                 //onmouseover  鼠标滑入事件
					bx2.style.display='block';               //当鼠标滑入 bx1, 执行bx2将display=block显示这个二维码
				};
				 bx1.onmouseout =function(){                  //onmouseover  鼠标滑出事件
					bx2.style.display='none';              //当鼠标滑出 bx1, 执行bx2将display=none隐藏这个二维码
				 };
			}
		</script>