DW点击弹窗效果

最新推荐文章于 2021-12-19 19:21:22 发布

溯弥

最新推荐文章于 2021-12-19 19:21:22 发布

阅读量1.6k

点赞数

文章标签： JavaScript CSS 过渡效果点击事件元素隐藏

本文链接：https://blog.csdn.net/TBDBTUO/article/details/113086998

版权

开发工具：Adobe Dreamweaver CC 2019
关键技术：JavaScript

点击弹出初始样式：
![点击弹出初始样式](https://img-blog.csdnimg.cn/20210124140108114.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RCREJUVU8=,size_16,color_FFFFFF,t_70)


当点击绿色div方块后，右边的红色大div将向右-320px隐藏，再次点击后红色div向右距离归零显示。
CSS基本样式：
.boxx{
			width: 320px;
			height: 700px;
			float: right;
			background: #FF0004;
			position: fixed;
			top: 0px;
			right: 0px;
			-webkit-transition: all .7s ease 0s;
			-o-transition: all .7s ease 0s;
			transition: all .7s ease 0s;
		}
		.boss{
			width: 40px;
			height: 40px;
			background:#00FF23;
			margin-right: 34%;
			float: right;
			font-size: 50px;
		}
		.ioo{
			width: 40px;
			height: 40px;
			background:#0044FF;
			float: right;
		}

给boxx红色大div固定定位固定到右边窗口。transition: all .7s ease ;设置过渡效果。


写HTML基本样式如下：
	<div class="boss" id="boss"></div>
	<div class="boss" id="boii" style="display: none;"></div>
	<div class="boxx" id="boxx" style="right: 0px">

前两个div给的类相同样式相同两个boss的类，位置也相同，id不同。第三行是红色大div。下面的boss是先设置隐藏的。
代码js部分：
	var boss = document.getElementById("boss");
		var boii = document.getElementById("boii");
		var boxx = document.getElementById("boxx");
		boss.onclick=function(){
			boxx.style.right="-320px";
			boss.style.display="none";
			boii.style.display="block";
		}
		boii.onclick=function(){
			boxx.style.right="0px";
			boss.style.display="block";
			boii.style.display="none";
		}


设置点击事件。点击第一次boss让红色div向右-320px隐藏，boii将会显示 boss隐藏。再次点击boii 红色div向右0px显示，boss显示boii隐藏以此循环