html5手机浏览器之---------------小图拼大图（基本兼容所有浏览器)
程序员文章站
2022-03-01 22:10:09
...
1.前言。
如题。
2.代码。
以下为主页html实现，包括图片的完整例子，请直接下载附件demo.rar
3.注意事项。
如题。
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.注意事项。