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

最新推荐文章于 2023-11-13 17:06:21 发布
最新推荐文章于 2023-11-13 17:06:21 发布
阅读量292 收藏
点赞数
分类专栏： html5 文章标签： json javascript ViewUI
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.注意事项。
nannan408
关注
专栏目录
怎样用N多小图片拼成一张大图?（数字图像处理）
PhoenixDefender的博客
10-17 3万+
前言最近在学校上了一门《数字图像处理》的课程，要求做一个实验，用很多小图像拼接成一张大图，类似与下面这种效果： 图是在网上找的，可以看到图中的小人其实是由很多的小图片组成的，课程要求就是作出这种效果的图片。下面放出我做的成果图片： 处理之后：程序还不是很完善，上面这种图颜色很单纯，没有特别多的细节变化，而一旦处理细节丰富的图像就成了下面的效果：原图： 处理之后：让我想起了梵高… … 程序
小图拼大图
rua1234567的博客
11-29 250
首先利用scrapy爬虫爬取图片 爬取颜色尽可能丰富的图片，所以采用比较笨的方法，在网页中搜索不同的颜色，把网站copy下来放入color.json文件，是需要访问的url。 定义一个spider，用于爬取网页中的图片url。Item只要定义一个url即可 @TOC 目录层级 -items.py -pipelines.py -settings.py -spider -download_image.py —spider.py —xxx.py items.py import scrapy class Image
PhotoShop简单案例（3）——利用ps实现多图合成（多张小图片拼成一张大图片）
Wendy的博客
01-03 2万+
目录一、项目介绍二、预处理2.1 图片裁剪2.2 多图裁剪2.3.1 新建动作2.3.2 图片裁剪2.3.3 批量裁剪三、基本流程四、效果演示 一、项目介绍 本文将介绍利用ps实现多图合成（多张小图片拼成一张大图片），制作完成的效果演示可以查看第四部分。 二、预处理 2.1 图片裁剪 首先要收集若干张图片，然后裁切成1:1的正方形，若干张张都要裁切成1:1。 单一图片裁剪方法： 文件——>打开——>选择图片——>选择左侧的裁剪工具——>在上侧选择1:1(方形)——>√ 2.2
如何用Python实现图像拼接画（把一堆小图拼成大图）
最新发布
诸神缄默不语的博客
11-13 1892
本文介绍如何用Python实现图像拼接画
用opencv把小照片合成大照片
Hellsegamosken
01-09 1216
这效果实在是不知道该怎么描述… 放一张著名的海报（楚门的世界），大概就这意思。 放大看细节： 正好大计课上提到了 opencv，顺便搞一下。 假设，我们已经通过一顿操作获得了相同尺寸的背景图（bg）和前景图（fg），那么一个自然的想法就是把图片加权合并起来，也就是：，其中 alpha，beta 分别代表权重，gamma 代表合成图片的偏移量（也就是明暗）。 # 合并图片 cv2.addWeighted(fg, alpha, bg, beta, gamma) # alpha，beta 分别代表权重，gam
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
08-29
`blueimp-canvas-to-blob`是一个polyfill库，用于在不支持`canvas.toBlob()`方法的浏览器（如Safari和旧版IE）中提供兼容性。将该库的脚本添加到项目中，如果是Angular CLI项目，可以在`.angular-cli.json`文件的`...
axure-chrome-extension（axure浏览器插件）.zip
09-10
Axure Chrome Extension是一款专为Axure设计的浏览器插件，它极大地扩展了Axure原型在谷歌浏览器中的功能，使得交互设计师和产品经理能够更便捷地在浏览器中预览、测试和分享他们的原型作品。这款插件的使用对于提高...
将大量小图片拼成一张特定图片
huicheng_chen的博客
07-31 1767
本文实现将大量小型图片填充特定图片的像素格，下文称为像素填充图 思路：遍历原图像素，选取适合图片取代 大致分为三步 1，将已有图片转化为特定大小的图片 2，提取图片色彩 3，生成像素填充图 代码 # -*- coding: utf-8 -*- """ Created on Tue Jul 16 12:18:04 2019 @author: icheng """ """...
图片大小不一放在div中的兼容方案
weixin_30507481的博客
12-24 174
css部分： .img-center { width: 200px; height: 150px; margin: 20px; overflow: hidden; position: relative; } .img-center img { display: block; position: absolute; ...
小图拼接大图MATLAB实现
weixin_30411997的博客
05-12 748
小图拼接大图MATLAB实现 1.实现效果图 原图 效果图 2.代码 files = dir(fullfile('D:\document\GitHub\homework\digital image processing\image_spider\animation\','*.jpg')); target=imread('D:\document\GitHub\homework\digital i...
h5手机浏览器左右滑动切换图片效果
u012744265的博客
11-01 1万+
<img alt="Third slide [1140x500]" src="static/image/adpicture/adpicture3.jpg" style="width:100%;height:150px;" data-holder-rendered="true"> Previous Next //重点js引入           $(function
HTML5背景图自适应手机屏幕
longchenghui20的专栏
07-23 1万+
html,body{height: 100%;width: 100%;margin:0;padding:0;} body{ background:url(bg-login.png)no-repeat; width:100%; height:100%; background-size:100% 100%; position:absolute; filte...
收藏网址
热门推荐
u011569805的专栏
11-05 86万+
It will be read and overwritten.      DO NOT EDIT! --> Bookmarks Bookmarks     书签栏             桌面支持中心         从 IE 中导入                     桌面支持中心             入职                    
matlab拼大图,小图拼接大图MATLAB实现
weixin_35817272的博客
03-20 857
小图拼接大图MATLAB实现1.实现效果图原图 效果图 2.代码files = dir(fullfile('D:\document\GitHub\homework\digital image processing\image_spider\animation\','*.jpg'));target=imread('D:\document\GitHub\homework\digital image p...
学习日志（十六）：图像拼接compose
weixin_44825185的博客
11-02 1183
import matplotlib.pyplot as plt import PIL.Image as Image import os import cv2 import numpy from torchvision import transforms unloader =transforms.ToPILImage() IMAGES_PATH = '/home/dushuai/word/superpixel_fcn-master/save_out/' # 图片集地址 IMAGES_FORMAT = ['
python之PIL 小图拼接成大图
TxNet
08-11 1127
上一篇文章，我们把一张超大图给拆分成了n行m列的小图。后来我们 又有一个新需求，就是把图片给卡通风格化，顺便在把图片处理清晰一些，于是我们就处理了小图，然后再合并成大图供美术再二次修改。所以就需要我再使用PIL把小图合并成大图...
移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览
weixin_30802273的博客
04-17 624
先来几张效果图： 点击其中一张照片可放大，可支持图片文字描述： 同时支持分享功能： 支持手势放大缩小 使用js框架是PhotoSwipe。 PhotoSwipe是一个图片放大插件，兼容pc和移动端，经历过多个版本的迭代且一直在不断更新，踩过的坑不知凡几，在移动端有着巨大的优势。1、可控制多种风格如：标题、分享、全屏按钮，点击事件、是否加入字幕，背景透明等。2、可...
Cocos2d-html5游戏案例：探索移动浏览器上的HTML5游戏性能与商业潜力
这次演讲的主题集中在Cocos2d-html5技术在手机浏览器环境中的应用和性能表现，旨在展示HTML5游戏在移动设备上的实际效果，并探讨其商业潜力和跨平台游戏开发的可能性。 Cocos2d-html5是一种结合了Cocos2d-x引擎与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值