最近要做一個攝像頭互動的功能，其中有一個功能是通過後臺管理呼叫海康攝像頭sdk去控制攝像頭上下左右搖動。整理了一個html和css畫出四個方向鍵UI的程式碼。效果圖和程式碼如下：（歡迎交流）

效果圖：

html：

<!--調整攝像頭方向-->
		<div class="change_camera_direction">
			<div class="camera_title">攝像頭方向控制</div>
			<div class="direction_content">
				<div class="direction_div top_direction">
					<img class="camera_img_up" src="img/camera_up.png" />
				</div>
				<div class="direction_div left_direction">
					<img class="camera_img_left" src="img/camera_left.png" />
				</div>
				<div class="direction_div bottom_direction">
					<img class="camera_img_bottom" src="img/camera_down.png" />
				</div>
				<div class="direction_div right_direction">
					<img class="camera_img_right" src="img/camera_right.png" />
				</div>
			</div>
		</div>
 

css：

/*攝像頭方向控制*/
.change_camera_direction{
	background-color: sandybrown;
	text-align: center;
	position: absolute;
	top: 0%;
	width: 200px;
	height: 200px;
}
.change_camera_direction .camera_title{
	color: white;
	font-size: 15px;
	margin: 5% auto;
}
.direction_content{
	 width: 100%;
	 height: 70%;
	 position: relative;
}
.direction_div{
	position:relative;
	width: 30px;
	height: 30px;
}
.direction_div img{
	width: 100%;
	height:  100%;
}
/*left*/
.left_direction {
	top: 5%;
	left: 20%; 
}
/*bottom*/
.bottom_direction{
	top:5%;
	left: 40%;
}
/*right*/
.right_direction{
	top: -39%;
	left: 61%;
}
/*top*/
.top_direction{
	top: 2%;
	left: 40%; 
}