效果：

在這裡插入圖片描述

程式碼：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0
			}
			
			body {
				height: 100%;
			}
			
			.box {
				width: 250px;
				height: 100%;
				background-color: rgba( 
0, 0, 0, 0.7);
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.box ul {
				background-color: orange;
			}
			
			.box button {
				position: absolute;
				right: -25px;
				top: 50%;
				margin-top: -20px;
			}
			
			button {
				border: 0;
				background-color: #ccc;
				width: 25px;
				height: 40px; 

				font-size: 24px;
				user-select: none;
				outline: none;
			}
			
			ul li {
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-bottom: 1px solid #aaa;
				user-select: none;
			}
			
			li:hover {
				background-color: orangered;
				color: #fff;
			}
		</style>
	< 
/head>

	<body>
		<div class="box">
			<ul>
				<li>選單一</li>
				<li>選單一</li>
				<li>選單一</li>
				<li>選單一</li>
				<li>選單一</li>
			</ul>
			<button>></button>
		</div>
		<script>
			var btn = document.getElementsByTagName("button")[0];
			var div = document.getElementsByTagName("div")[0];
			var timer;
			var speed = 5;
			var flag = true;
			btn.onclick = function() {
				console.log(div.offsetLeft)

				if(flag) {
					speed = -speed;
					timer = setInterval(function() {

						if(div.offsetLeft <= -250) {
							clearInterval(timer);
							flag = false;
							return;
						}
						div.style.left = div.offsetLeft + speed + "px";
					}, 20)
				} else {
					speed = -speed;
					timer = setInterval(function() {
						if(div.offsetLeft >= 0) {
							clearInterval(timer);
							flag = true;
							return;
						}
						div.style.left = div.offsetLeft + speed + "px";
					}, 20)
				}

			}
		</script>
	</body>

</html>

原生JavaScript淡入淡出效果

效果：

程式碼：

原生JavaScript淡入淡出效果

javascript寫淡入淡出效果的輪播圖

jQuery 淡入/淡出效果函式用法分析

jQuery模態框淡入淡出效果

jQuery實現淡入淡出效果

vue+js實現視訊淡入淡出效果

jQuery淡入淡出效果

Jquery_效果-隱藏顯示、淡入淡出、滑動面板、簡單的動畫佇列

jquery實現淡入淡出輪播圖效果

直播視訊網站原始碼實現滑鼠移動淡入淡出Canvas小球效果

jQuery 效果 - 淡入淡出

jQuery 效果- 隱藏和顯示隱藏、顯示、切換，滑動，淡入淡出，以及動畫

Unity3D實現待機狀態圖片迴圈淡入淡出

jQuery 常用特效例項小結【顯示與隱藏、淡入淡出、滑動、動畫等】

jquery實現左側選單淡入淡出

WPF漸變淡入淡出

使用jQuery實現簡單的淡入淡出

原生javascript+CSS實現輪播圖效果

原生JavaScript實現輪播圖效果

原生javascript實現圖片輪播效果程式碼

原生JavaScript淡入淡出效果

效果：

程式碼：

相關推薦