JavaScript在智能手机上的应用-用手势来改变图片大小
——————————————————————————————————
<script type="text/javascript">
//初始化函数,绑定触屏事件
function init() {
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势的缩放比例,小于1是缩小,大于1是放大,原始为1
var scale = e.scale;
//获取图片的dom
var img = document.getElementsByTagName('img')[0];
var w = img.width; //图片的当前的宽度
var h = img.height; //图片的当前的高度
if(scale > 1){ //如果是放大
w += 10; //宽度加大10
h += 10; //高度加大10
}else if(scale < 1){//如果是缩小
w -= 10; //宽度减小10
h -= 10; //高度减小10
}
img.width = w; //新的宽度
img.height = h; //新的高度
};
}
</script>
——————————————————————————————————
<style>
div{
border:2px solid red;
color:red;
margin: 10px auto;
padding: 20px;
text-align: center;
}
</style>
————————————————————————————————————
<body onload="init();">
<div id="div">
<img src="1.jpg" width="500" height="500"/>
</div>
</body>
——————————————————————————————————————
JavaScript在智能手机上的应用-用手势来改变图片大小的更多相关文章
- JavaScript在智能手机上的应用-通过滑动修改网页字体大小
---------------------------------- <script type="text/javascript"> //变量x, ...
- JavaScript在智能手机上的应用-判断是否为移动浏览器
-------------------- <script type="text/javascript"> var userAgent = navi ...
- JavaScript在智能手机上的应用-测试是否支持滑动事件
---------------------------- <script type="text/javascript"> ...
- JavaScript在智能手机上的应用-使用手机GPS定位用户所在城市
---------------------------- <script type="text/javascript" language="javascript&q ...
- 图片上传(3)(组件 -- 图片大小宽高限制)base64图片宽高读取
1.上传组件(可上传多个文件) <template> <div class="attachmentN"> <span class="btnS ...
- JavaScript如何实现上拉加载,下拉刷新?
转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...
- PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- Android智能手机上的音频浅析
手机可以说是现在人日常生活中最离不开的电子设备了.它自诞生以来,从模拟的发展到数字的,从1G发展到目前的4G以及不久将来的5G,从最初的只有唯一的功能(打电话)发展到目前的全功能,从功能机(featu ...
随机推荐
- 2015 asia xian regional F Color (容斥 + 组合数学)
2015 asia xian regional F Color (容斥 + 组合数学) 题目链接http://codeforces.com/gym/100548/attachments Descrip ...
- 关于Application的onCreate以及Activity生命周期在源码里都是什么时候调用的
在ActivityThread.handleLaunchActivity中 Activity a = performLaunchActivity(r, customIntent);这一方法最终回调目标 ...
- java.util.Timer类似于闹钟定时做任务
在web中实现任务计划,相当于实现闹钟的功能,要完成2个步骤: 1.定时器的设置: 2.对这个定时器的启动运行和停止进行实时监听 java.util.Timer定时器,实际上是个线程,定时调度所拥有的 ...
- 关于用PS改变图像颜色
由于写的一个页面主色调变了,里面的一些图标颜色也要相应改变,自己难得重新去psd里面截图,就想着用ps,看能否直接能变换一下图标颜色.其实方法也很简单的. 1:用ps打开需要改变图标颜色的文件,然后选 ...
- (十)foreac遍历、break和countinue以及标签和switch循环
foreach语法,表示不必创建int变量去对由访问项构成的序列进行计数,foreach将自动产生每一项. 例:输出数组的所有元素. float f[]=new float[5]; f[0]=1.0f ...
- js中checkbox反选
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- gRPC编码初探(java)
背景:gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协议开发,且支持众 ...
- 去掉svn与文件之间 的关联
今天在检出文件的时候,没注意检出目录 ,居然直接检出到D盘里了.然后就看到D盘上有个大大的绿勾,看起来很不舒服,想去掉. 自己看看小乌龟里好像没这功能,于是百度,一大堆都是要改和注册相关的东西,照着做 ...
- sublime text 3 - change snippets folder
如何整理 sublime text 3 下的 snippets(放在非User目录的时候), 才可以让 sublime text 3 识别到???
- COCOA® PROGRAMMING FOR MAC® OS X (1)- Get Start
这个是Mac OS App开发学习的第一篇,希望是一个好的开始. 一.为什么要学习Mac OS App开发 a)长时间做IOS开发,发现自己所做的局限在苹果的一些库上面,一些底层的API却是私有的,不 ...