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>
——————————————————————————————————————
最新文章
- 关于java建立的的包import的问题
- Centos下安装nginx rpm包
- Java爬虫,信息抓取的实现
- 转--简单工厂模式 Simple Factory
- WebService 超简单入门教程(Java)
- ExtJS FormPanel不执行校验
- 20160122.CCPP详解体系(0001天)
- Cadence OrCad Allegro SPB 16.6 下载及安装破解指南
- java jvm学习笔记二(类装载器的体系结构)
- linux时间自动同步
- clang: error: unable to execute command: Segmentation fault: 11
- jquery精简选项卡
- 理解javascript中的for语句
- Util
- arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)
- Android ConstraintLayout 布局警告
- 清理XFCE4卸载残留
- Delphi TQuery 的Locate用法
- oracle compile 编译无效对象
- 不影响Inspector布局拓展类
热门文章
- MyEclipse中用Maven创建Web项目
- PHP单例模式--典型的三私一公
- 寻找中位数v1.0
- Latex问题收集
- Linux下安装vnstat流量统计
- UnicodeEncodeError: &#39;gbk&#39; codec can&#39;t encode character &#39;\xbb&#39; in position 26269: illegal multibyte sequence
- 第九十节,html5+css3pc端固定布局,底部区域,说明区域,版权区域
- HDU1009FatMouse&#39; Trade(贪心)
- visual studio 目录
- dplyr 数据操作 数据排序 (arrange)