当前位置：网站首页>JS click the button to slide to the left

JS click the button to slide to the left

2022-06-10 12:55:00 【000000001111】 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">

		<title> Slide effect to the left </title>

		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

		<style>
			* {
    
				margin: 0;
				padding: 0;
			}

			img {
    
				border: 0;
			}

			li {
    
				list-style: none;
			}

			a {
    
				text-decoration: none;
			}


			.btn {
    
				width: 100px;
				height: 30px;
				line-height: 30px;
				border: 1px solid;
				margin: 0 auto;
				margin-top: 100px;
				text-align: center;
				cursor: pointer;
				border-radius: 6px;
			}

			.btn_show {
    
				width: 100%;
				height: 100%;
				display: none;
			}


			.btn_show_bg {
    
				width: 100%;
				height: 100%;
				background: #000;
				position: fixed;
				top: 0;
				left: 0;
				opacity: 0.5;
			}

			.btn_show_main {
    
				width: 300px;
				height: 100%;
				background: #fff;
				position: fixed;
				top: 0;
				right: -300px;
			}

			.btn_show_main_close {
    
				font-size: 14px;
				width: 100px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				cursor: pointer;
			}

			.div_right0 {
    
				animation: myfirstss 2s;
				-moz-animation: myfirstss 2s;
				/* Firefox */
				-webkit-animation: myfirstss 2s;
				/* Safari and Chrome */
				-o-animation: myfirstss 2s;
				/* Opera */
				animation-fill-mode: forwards;
			}

			@keyframes myfirstss {
    
				100% {
    
					background: red;
					right: 0px;
					top: 0px;
				}
			}

			.div_right {
    
				animation: myfirsts 2s;
				-moz-animation: myfirsts 2s;
				/* Firefox */
				-webkit-animation: myfirsts 2s;
				/* Safari and Chrome */
				-o-animation: myfirsts 2s;
				/* Opera */
				animation-fill-mode: forwards;
				right: 0px;
			}

			@keyframes myfirsts {
    
				100% {
    
					background: blue;
					right: -300px;
					top: 0px;
				}
			}

			.btn_show_main ul li {
    
				width: 100%;
				height: 20px;
				line-height: 20px;
				text-align: center;
				font-size: 14px;
				margin-bottom: 10px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="btn"> Button </div>

		<div class="btn_show">
			<div class="btn_show_bg"></div>
			<div class="btn_show_main">
				<div class="btn_show_main_close"> I'm closing </div>
				<ul>
					<li> I am a 1</li>
					<li> I am a 2</li>
					<li> I am a 3</li>
					<li> I am a 4</li>
					<li> I am a 5</li>
					<li> I am a 6</li>
					<li> I am a 7</li>
					<li> I am a 8</li>
					<li> I am a 9</li>
					<li> I am a 10</li>
				</ul>
			</div>
		</div>
	</body>
	<script>
		window.onload = function() {
    
			$(".btn").click(function() {
    
				$(".btn_show").show();
				$(".btn_show_bg").show();
				$(".btn_show_main").addClass('div_right0');
				$(".btn_show_main").removeClass('div_right')
			});

			$(".btn_show_main_close").click(function() {
    
				$(".btn_show_main").addClass('div_right');
				$(".btn_show_main").removeClass('div_right0');
				$(".btn_show_bg").hide(2000);
			});
		};
	</script>
</html>

Insert picture description here

原网站

版权声明
本文为[000000001111]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/161/202206101155030620.html

边栏推荐

猜你喜欢

随机推荐