html 5携帯ブラウザの----------小図拼大図(基本互換すべてのブラウザ)

11357 ワード

1.はじめに.
問題のようです.
2.コード.
以下はホームページhtml実装で、画像の完全な例を含めて、添付ファイルdemoを直接ダウンロードしてください.rar

<html>
<head>
<title>    </title>
<meta http-equiv="content-type" content="text/html;charset=GBK">
<script
	src="http://qzonestyle.gtimg.cn/open/mobile/light_app/js/device.js"></script>
<style type="text/css">
#buttonLeft {
	background: url(ptz_left.png) no-repeat;
	width: 100px;
	height: 100px;
	border: 0px;
}

#buttonRight {
	background: url(ptz_right.png) no-repeat;
	width: 100px;
	height: 100px;
	border: 0px;
}

#buttonDown {
	background: url(ptz_down.png) no-repeat;
	width: 100px;
	height: 100px;
	border: 0px;
}

#buttonUp {
	background: url(ptz_up_highlight.png) no-repeat;
	width: 100px;
	height: 150px;
	border: 0px;
}

#buttonLeftUp {
	background: url(ptz_left_up.png) no-repeat;
	width: 100px;
	height: 100px;
	border: 0px;
}

#buttonRightUp {
	background: url(ptz_right_up.png) no-repeat;
	width: 100px;
	height: 100px;
	border: 0px;
}

#buttonDownLeft {
	background: url(ptz_left_down.png) no-repeat;
	width: 100px;
	height: 100px;
	border: 0px;
}

#buttonDownRight {
	background: url(ptz_right_down.png) no-repeat;
	width: 100px;
	height: 100px;
	border: 0px;
}

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
}

div {
	margin: 0px;
	padding: 0px;
	margin: auto;
}

.cl {
	clear: both;
}

#div1 {
 	background: #FEE9F4; 
	width: 440px;
}

#div2 {
	background: #E9FEF0;
	width: 440px;
}

#div3 {
	background: #C7C2FC;
	width: 440px;
}
</style>


</head>

<script>
	function load() {
		//            
		//document.getElementById("target").onclick();
		//document.getElementById("target").click();
	}
	function stop() {
		//alert("down");
		device.send({
			datapoint : [ {
				id : 500005,
				value : 4
			} ],
			vibrate : 1, // 1      ,  
			nfc : 1, // 1       ,  
			lifetime : 20, //    ,  1 604800 ,  
			onSuccess : function(ret) { //       
				device.log('onSuccess: ' + JSON.stringify(ret));
			},
			onAck : function(ret) { //         
				device.log('onAck: ' + JSON.stringify(ret));
			},
			onError : function(ret) { //       
				device.log('onError: ' + JSON.stringify(ret));
			}
		});

	}

	function up() {
		//alert("up");
		device.send({
			datapoint : [ {
				id : 500005,
				value : 0
			} ],
			vibrate : 1, // 1      ,  
			nfc : 1, // 1       ,  
			lifetime : 20, //    ,  1 604800 ,  
			onSuccess : function(ret) { //       
				device.log('onSuccess: ' + JSON.stringify(ret));
			},
			onAck : function(ret) { //         
				device.log('onAck: ' + JSON.stringify(ret));
			},
			onError : function(ret) { //       
				device.log('onError: ' + JSON.stringify(ret));
			}
		});

	}
	function down() {
		//alert("down");
		device.send({
			datapoint : [ {
				id : 500005,
				value : 1
			} ],
			vibrate : 1, // 1      ,  
			nfc : 1, // 1       ,  
			lifetime : 20, //    ,  1 604800 ,  
			onSuccess : function(ret) { //       
				device.log('onSuccess: ' + JSON.stringify(ret));
			},
			onAck : function(ret) { //         
				device.log('onAck: ' + JSON.stringify(ret));
			},
			onError : function(ret) { //       
				device.log('onError: ' + JSON.stringify(ret));
			}
		});

	}

	function left() {
		//alert("down");
		device.send({
			datapoint : [ {
				id : 500005,
				value : 2
			} ],
			vibrate : 1, // 1      ,  
			nfc : 1, // 1       ,  
			lifetime : 20, //    ,  1 604800 ,  
			onSuccess : function(ret) { //       
				device.log('onSuccess: ' + JSON.stringify(ret));
			},
			onAck : function(ret) { //         
				device.log('onAck: ' + JSON.stringify(ret));
			},
			onError : function(ret) { //       
				device.log('onError: ' + JSON.stringify(ret));
			}
		});

	}

	function right() {
		//alert("down");
		device.send({
			datapoint : [ {
				id : 500005,
				value : 3
			} ],
			vibrate : 1, // 1      ,  
			nfc : 1, // 1       ,  
			lifetime : 20, //    ,  1 604800 ,  
			onSuccess : function(ret) { //       
				device.log('onSuccess: ' + JSON.stringify(ret));
			},
			onAck : function(ret) { //         
				device.log('onAck: ' + JSON.stringify(ret));
			},
			onError : function(ret) { //       
				device.log('onError: ' + JSON.stringify(ret));
			}
		});

	}

	function changeButtonHilight(postion) {
		//    , 0,1,2,3  . postion=0,1,2,3 . state=0   ,1   
		var ids = [ "buttonUp", "buttonDown", "buttonLeft", "buttonRight" ];
		var pngHihgLight = [ "ptz_up.png", "ptz_down.png", "ptz_left.png",
				"ptz_right.png" ];
		var pngLowLight = [ "ptz_up_highlight.png", "ptz_down_highlight.png",
				"ptz_left_highlight.png", "ptz_right_highlight.png" ];

		var idPostion = parseInt(postion);
		var myid;
		myid = ids[idPostion];
		document.getElementById(myid).style.background = "url("
				+ pngHihgLight[postion] + ") no-repeat";
		for (var i = 0; i < pngHihgLight.length; i++) {
			//    
			if (i != postion) {
				document.getElementById(ids[i]).style.background = "url("
						+ pngLowLight[i] + ") no-repeat";
			}
		}
	}
	function changeButtonLowlight(postion) {
		//    , 0,1,2,3  . postion=0,1,2,3 . state=0   ,1   
		var ids = [ "buttonUp", "buttonDown", "buttonLeft", "buttonRight" ];
		var pngHihgLight = [ "ptz_up.png", "ptz_down.png", "ptz_left.png",
				"ptz_right.png" ];
		var pngLowLight = [ "ptz_up_highlight.png", "ptz_down_highlight.png",
				"ptz_left_highlight.png", "ptz_right_highlight.png" ];

		var idPostion = parseInt(postion);
		var myid;
		myid = ids[idPostion];
		document.getElementById(myid).style.background = "url("
				+ pngLowLight[postion] + ") no-repeat";
	}
</script>

<body onload="load()"
	style="-webkit-user-select: none; -webkit-touch-callout: none;
	ontouchstart="return false;text-align:center;align:center;" >
	<script type="text/javascript">
		
	</script>

	<!-- 	[align=center;padding-left: 30px]
		<div
			style="height: 88px; width: 88px; border: 0px solid #000; float: left" >
			<button id="buttonLeftUp"></button>
		[/align]

		<div
			style="height: 88px; width: 88px; border: 0px solid #000; float: left">
			<button id="buttonUp"
				style="-webkit-user-select: none; -moz-user-select: none;"
				onmousedown="changeButtonHilight(0);up();"
				ontouchstart="changeButtonHilight(0);return false;"
				ontouchend="changeButtonLowlight(0)"></button>
		</div>
		[align=center;padding-left: 30px]
		<div
			style="height: 88px; width: 88px; border: 0px solid #000; float: left">
			<button id="buttonLeft" onmousedown="changeButtonHilight(2);left();"
				style="float: left; -webkit-user-select: none; -moz-user-select: none;"
				ontouchstart="changeButtonHilight(2);return false;"
				ontouchend="changeButtonLowlight(2)"></button>
		[/align]
		<div
			style="height: 88px; width: 88px; border: 0px solid #000; float: left">

		</div>
		[align=center;padding-left:30px]
		<div
			style="height: 88px; width: 88px; border: 0px solid #000; float: left">
			<button id="buttonDownLeft"></button>
		[/align]
		<div
			style="height: 88px; width: 88px; border: 0px solid #000; float: left">
			<button id="buttonDown" onmousedown="changeButtonHilight(1);down()"
				style="-webkit-user-select: none; -moz-user-select: none;"
				ontouchstart="changeButtonHilight(1);return false;"
				ontouchend="changeButtonLowlight(1)"></button>
		</div>
		<div style="height: 88px; width: 88px; border: 0px solid #000; float: left">
			<button id="buttonDownRight"></button>
		</div>
		<!-- 		<div style="height: 88px; width: 88px; border: 0px solid #000; float: left"> -->

		<!-- 		</div> -->
		<!-- 		<div style="height: 88px; width: 88px; border: 0px solid #000;"> -->
		<!-- 			<button id="buttonDownLeft"></button> -->
		<!-- 		</div> -->

	</div>
	<!-- 		<div -->
	<!-- 			style="width: 455px; height: 300px; float: left; border: 1px solid #000; margin: 10px;">div2a</div> -->
	<!-- 		<div -->
	<!-- 			style="width: 455px; height: 300px; float: right; border: 1px solid #000; margin: 10px;">div2b</div> -->
	<!-- 		<div class="cl"></div> -->
	<!-- 	<div id="div3"> -->
	<!-- 		<div -->
	<!-- 			style="width: 300px; height: 300px; float: left; border: 1px solid #000; margin: 10px;">div3a</div> -->
	<!-- 		<div -->
	<!-- 			style="width: 300px; height: 300px; float: left; border: 1px solid #000; margin: 10px;">div3b</div> -->
	<!-- 		<div -->
	<!-- 			style="width: 300px; height: 300px; float: right; border: 1px solid #000; margin: 10px;">div3c</div> -->
	<!-- 		<div class="cl"></div> -->
	<!-- 	</div> -->



</body>
</html>


3.注意事項.