control.html 7.4 KB
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="static/iconfont.css"/>
		<link rel="stylesheet" href="https://libs.baidu.com/jqueryui/1.10.4/css/jquery-ui.min.css">
		<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://libs.baidu.com/jqueryui/1.10.4/jquery-ui.min.js"></script>
		<style type="text/css">
			body{
				margin: 8px;
			}
			.leftBox{
				float: left;
				margin-right: 20px;
			}
			.rightBox{
				float: left;
				font-size: 0;
				    -webkit-text-size-adjust:none;
			}
			object{
				width: 874px;
				height: 640px;
				background: red;
			}
			.publicBtn{
				border: 1px solid #e9e9e9;
				display: inline-block;
				width: 44px;
				height: 44px;
				line-height: 40px;
				text-align: center;
				margin-bottom: 6px;
				font-size: 24px;
				cursor: pointer;
			}
			.btn{
				margin-right: 6px;
			}
			.leftControlBox{
				width: 156px;
				float: left;
				margin-right: 14px;
			}
			.preBtn{
				border-right:1px dotted #e9e9e9 ;
			}
			.afterBtn{
				border-left: none;
			}
			.rightControlBox{
				width: 120px;
				float: left;
			}
			.ulBox{
				border: 1px solid #e9e9e9;
				width: 250px;
				height: 400px;
				overflow-y: auto;
				font-size: 16px;
				color: #333333
			}
			.liBox{
				height: 48px;
				line-height: 48px;
				padding: 0 10px;
				cursor: pointer;
			}
			.btnBox{
				visibility: hidden;
			}
			.liBox:hover .btnBox{
				background: #EEEEEE;
				visibility:visible;
			}
			.liBox:hover{
				background: #EEEEEE;
			}
			.num{
				display: inline-block;
				width: 34px;
				margin-right: 10px;
			}
			.name{
				display: inline-block;
				width: 94px;
			}
			.iconBtn{
				margin-right: 8px;
				cursor: pointer;
			}
			.iconBtn:nth-last-child(1){
				margin-right: 0;
			}
			.iconBtn:nth-last-child(3){
				transform: rotate(60deg);
				-webkit-transform:rotate(60deg);
				display: inline-block;
			}
			#slider{
				width: 70%;
				float: left;
				margin-right: 5%;
				margin-top: 4px;
				background: #E9E9E9;
			}
			  #slider .ui-slider-range { background: #ef2929; }
			    #slider .ui-slider-handle { border-color: #E9E9E9; background:#FFFFFF ;border-radius:8px ;}
			.numInput{
				width: 10%;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="leftBox">
			<object>
				
			</object>
		</div>
		<div class="rightBox">
			<div style="overflow: hidden;margin-bottom: 12px;">
				<div class="leftControlBox">
					<span class="publicBtn btn"><span class="iconfont icon-zuoshangjiantou"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-shangjiantou"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-youshangjiantou"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-shangjiantou-copy"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-f14"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-shangjiantou1"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-zuoxiajiantou"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-right"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-youxiajiantou"></span></span>
				</div>
				<div class="rightControlBox">
					<span class="publicBtn preBtn"><span class="iconfont icon-suoxiao"></span></span>
					<span class="publicBtn afterBtn"><span class="iconfont icon-fangda"></span></span>
					<span class="publicBtn preBtn"><span class="iconfont icon-qianjingsebaise-"></span></span>
					<span class="publicBtn afterBtn"><span class="iconfont icon-qianjingseheise-"></span></span>
					<span class="publicBtn preBtn"><span class="iconfont icon-guangquan"></span></span>
					<span class="publicBtn afterBtn"><span class="iconfont icon-guangquan1"></span></span>
				</div>
			</div>
			<div style="margin-bottom: 20px;font-size: 12px;">
				<div id="slider"></div>
				<input type="text" class="numInput">
				<div style="clear: both;"></div>
			</div>
			<div class="ulBox">
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">1</span><span class="name">预设点</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn"></span><span class="iconfont icon-shezhi iconBtn"></span><span class="iconfont icon-close-blod iconBtn"></span>
					</span>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function changeVal(){
			$('.numInput').val($( "#slider" ).slider( "value" ))
		}
		$(function(){
			$( "#slider" ).slider({
			      orientation: "horizontal",
			      range: "min",
			      max: 255,
				  min:0,
			      value: 127,
			      slide: changeVal,
			      change: changeVal
			    });
				$( "#slider" ).slider( "value", 100 );
		})
	</script>
</html>