微信h5用js操作图片的缩放,与拖拽 ,防止图片拖过界限-尊龙凯时平台

2017年03月29日 17:10来源于:指尖上的java代码
分享:
最近公司有个新需求,做一个类似百度地图一样的功能。但不能用百度地图,而是手绘地图,然后可以像百度地图一样可以缩放,拖拽。当时在网上找了很多插件,后来找到了一个touchjs.js,但是还是有些相差的。主要是这个

最近公司有个新需求,做一个类似百度地图一样的功能。但不能用百度地图,而是手绘地图,然后可以像百度地图一样可以缩放,拖拽。当时在网上找了很多插件,后来找到了一个touchjs.js,但是还是有些相差的。主要是这个插件,它可以无限缩放,拖拽没有限制,这样的话,很容易导致图片拖拽出界限。这样就很难看了。

手稿推算

效果图

轻量级

封装好了接口

无限制的移动

无限制的缩放

比如,图片往下移动,如果图片顶部此时已经滑到屏幕顶部(图片与屏幕顶部重合),此时就不能再往下拖动了,当然这过程还要考虑图片的缩放。这里我通过在草稿纸上画图得出一个算法,就是要算出一个临界值。顶部限制 防止出现下滑过多公式:hlimit = {h原-(h原*scale)}/2,hilimt就是临界值,超过这个值就不允许往下移动。

公式演算图

代码

//拖动

drag: function ($targetobj, callback) {

//拖动动作 drag

touch.on($targetobj, 'drag', function (ev) {

cat.touchjs.divoffsettop = (document.getelementbyid("target").offsettop);

cat.touchjs.hbottom = (cat.touchjs.ho (cat.touchjs.ho*cat.touchjs.scaleval)-(2*cat.touchjs.clientheight))/2;

// 顶部限制 防止出现下滑过多

cat.touchjs.htop = parseint((cat.touchjs.ho - cat.touchjs.ho*cat.touchjs.scaleval)/2);

if(cat.touchjs.divoffsettop >= parseint(-cat.touchjs.htop) && ev.y>0){

//禁止继续拖动 ,

//cat.touchjs.div这个变量是时实获取图片的top值

//htop就是hlimit

}else{

//继续拖动

}

});

}

明天接着讲:图片的缩放,与拖拽 (防止图片拖过屏幕底部)touch-0.2.14.min.js和demo可以找我要


分享:
相关阅读
移动互联网

营造优雅的家居视听氛围!体验harman/kardon aura

harman/kardon哈曼卡顿的音箱向来有着让人一眼难忘的设计,不仅是好看,更是有着艺术的韵味在其中。近期,harman/kardon旗下经典系列迎来了新作aurastudio 4音乐琉璃四代(

2023-07-19 news

续航长充电快 巨湾技研为合创v09补能护航

每个汽车品牌可能覆盖多种车型,但每种车型只会有一款旗舰。旗舰车型代表着一个品牌最为深厚的底蕴、最强的生产工艺、最优的品质、最丰富的配置以及最先进的技术。国产新能

2023-07-18 news

资本市场关注esg,海尔智家下出先手棋

  如今,esg从一道选择题,成为越来越多企业的必答题。在全球可持续发展的趋势下,要判断一个企业的表现与成长性,财务数据不再是单一维度的衡量指标。在推动上市公司高

2023-07-18 news

以高水平科技自立引领行业发展 海尔生物医疗又4项

  7月15日,在中国机械工业联合会组织并主持下,由中国工程院院士、中国机械工业集团有限公司副总经理、总工程师陈学东任主任委员组成的鉴定委员会,一致鉴定海尔生物医

2023-07-18 news
网站地图