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
HTML5网页背景自适应缩放代码，背景不随滚动条滚动，会根据分辨率不同自动匹配对应的背景图片，兼容主流浏览器(不兼容IE678）
导致我们用谷歌浏览器打开PHPCMS后台的时候无法直接上传图片，所以我们只能改为H5上传，此版本使用webuploader.js，感觉这个挺强大，自动识别是否支持h5，如果不支持自动启用flash上传，兼容低版本的浏览器， ...
大图jQuery多屏首页焦点图代码，兼容主流浏览器
lighterbox相册照片浏览插件，支持移动端浏览器，点击图片可以放大观看。兼容主流浏览器.rar
主要用了两种方式，可兼容大部分浏览器。 第一种使用uploadify异步上传，上传后返回图片路径显示到页面。 每二种使用ajaxSubmit异步上传，为兼容IE8，dataType使用text类型，json类型IE8会当作文件提示下载，不走回...
联想K900手机jQuery大屏焦点图代码，兼容主流浏览器
---通用不间断滚动JS封装类，支持图片、文字等，兼容各大浏览器，方便修改参数. ---几乎支持目前所有流行风格的图片或文字的滚动/切入/渐显等效果,同时支持横向/竖向/连续/间断/缓动等多种形式。 ---网页里面文字或...
6、案例图片：图片系统支持企业上传成千上万的案例，可详细介绍案例情况，支持上传缩略图、大图； 7、下载中心：企业专用资料下载基地，提供驱动、说明文档等各类技术资料的下载支持在线上传； 8、公司介绍：公司...
1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.href问题 3 ...25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 3 26. 为什么FF下文本无法撑开容器的高度 3
jquery实现选择图片预览功能,能兼容各大主流浏览器.如谷歌 IE 360 火狐等
仿百度图片放大效果（jQuery)，鼠标移动到图片上自动放大，兼容主流浏览器
鼠标移上去大图变换成小图加文字描述兼容IE 6 7 8 的各种版本浏览器
因为Dreamwaver每次插入动画flash的时候，系统总是自动...已经测试过了，兼容所有浏览器。如果有些浏览器显示不出来，可能因为动画的版本和浏览器支持的flash动画版本不一致所致。 对比：原来插入一个flash的代码。 ...
- HTML5游戏兼容所有浏览器 - 高分辨率 - 可在所有平台上玩（PC、Android、iOS） - 包括 Construct 3 文件（.c3p 和所有源代码） - 移动控制（触摸）和 PC 控制（键盘和游戏手柄） - 兼容游戏手柄 - 反应灵敏的游戏 ...
jQuery手机响应式设计焦点图，支持自动播放，根据屏幕大小动态放缩焦点图。兼容主流浏览器
极品风格营销型网站建设网络公司企业网站源码无减删-e站亲测完整唔错，兼容各大主流浏览器v 安装说明 - 全新安装 1、直接运行：http://域名/install 2、安装完毕后登录后台并还原数据库： 1）进入dede后台，找到...
带缩略图5屏jQuery焦点图代码，点击右侧缩略图切换，每个大图配有标题。兼容主流浏览器
JS图片背景全屏代码，改变浏览器大小后需刷新查看全屏效果，兼容主流浏览器（含IE6）