欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html5手机浏览器之---------------小图拼大图(基本兼容所有浏览器)

程序员文章站 2022-03-28 21:05:09
...
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.注意事项。