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.注意事项。
分享到：
相关推荐
标题中的“图文切换-多浏览器兼容-jQuery-jcSlider”表明我们要探讨的是一个基于jQuery的JavaScript库，jcSlider，它专门用于实现图文切换效果，并且这个库在多种浏览器上具有良好的兼容性。以下是对这些知识点的...
虽然不完全兼容较早的IE版本，但通过适当的浏览器检测和备用方案，仍能确保大部分用户能够享受到良好的浏览体验。在实际开发中，我们还需要综合考虑性能优化和多设备适配，以确保网页在各种环境下都能流畅运行。
【前端浏览器兼容问题详解】 前端开发中，浏览器兼容性是一个重要的考量因素，特别是对于历史悠久的Internet Explorer（IE）浏览器，其各个版本之间的差异性给开发者带来了不少挑战。以下是一些常见的浏览器兼容性...
"上传头像图片带预览剪切JAVA版-兼容所有浏览器"是一个典型的Web应用功能，它允许用户选择并预览图片，然后进行剪切操作，最终上传作为自己的头像。这个功能在社交网络、论坛、个人资料编辑等场景中非常常见。下面将...
### 浏览器兼容性解决方法：深入解析与实践技巧 在Web开发中，确保网站在不同浏览器上表现一致是一项挑战。本篇文章将基于提供的文件信息，深入探讨浏览器兼容性的解决方法，尤其针对Firefox、IE等主流浏览器进行...
本资源提供的 "jQuery-简单渐隐渐现焦点图" 就是这样一个解决方案，它具有良好的浏览器兼容性，支持从 IE6 到 IE10，以及 Firefox、Chrome 和 Opera 等现代浏览器。 1. **jQuery 库**：jQuery 是一个高效、简洁且...
然而，在频繁使用过程中，浏览器会自动缓存大量数据，如图片、视频等，这些缓存虽然有助于提高浏览速度，但也可能导致存储空间不足、运行速度变慢等问题。因此，定期清除浏览器缓存是非常必要的。 #### 二、为什么...
**基于QWebEngineView浏览器示例 - Qt5源码详解** 在Qt框架中，QWebEngineView是一个强大的组件，用于在应用程序中展示网页内容。它基于Google的Chromium引擎，提供了一个高效且功能丰富的Web浏览体验。这个示例...
Axure Chrome Extension是一款专为Axure设计的浏览器插件，它极大地扩展了Axure原型在谷歌浏览器中的功能，使得交互设计师和产品经理能够更便捷地在浏览器中预览、测试和分享他们的原型作品。这款插件的使用对于提高...
在现代Web开发中，文件上传是一个常见的功能，但因浏览器之间的兼容性问题，开发者需要采用不同的技术来确保在各种环境中都能正常工作。本主题聚焦于如何利用Flash和HTML5技术来实现跨浏览器的文件上传功能。 一、...
这个资源"2014-5-6更新 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括...
这些新特性极大地丰富了网页的表现力和交互性，但同时也带来了与旧版浏览器的兼容性问题。 IE9及之前的版本并不完全支持HTML5的这些新特性。例如，`<video>`和`<audio>`标签在这些浏览器中可能无法正常工作；CSS3的...
### 手把手学习Android实例——图片浏览器 #### Android概述 Android是一个开源的移动设备操作系统，最初由Andy Rubin等人于2003年创立，并在2005年被Google收购。2007年，Google联合多家硬件制造商、软件开发商及...
《S57蚂蚁海图浏览器-x64(qt5)-2021-10-10》是一款专为航海领域设计的专业海图浏览软件，适用于64位操作系统。该软件基于Qt5技术开发，提供了高效、稳定且用户友好的界面，让航海者能够便捷地查看和分析S57格式的...
这个任务涉及到CSS技术，特别是关于背景图片的处理以及浏览器的兼容性问题。接下来，我们将深入探讨相关知识点。 首先，让我们关注“背景图片切换”。在HTML中，背景图片通常通过CSS样式设置。例如，可以使用`...
在IT行业中，创建一个兼容所有浏览器的用户界面是至关重要的，因为不同的用户可能使用不同的浏览器进行浏览。本项目提供了一个基于jQuery的下拉菜单解决方案，它特别强调了跨浏览器兼容性，确保在主流浏览器（如...
CSS 在不同浏览器中的兼容问题是 web 开发中的一大挑战。不同的浏览器对 CSS 的解析和渲染方式存在差异，从而导致相同的 CSS 代码在不同浏览器中显示效果不同。本文将总结常见的 CSS 兼容问题和解决方法。 一、CSS ...