實現ipad上的內嵌webview手勢縮放圖片(修改版,解決在第一張圖片放大的情況下翻到下一張圖片無法放大的問題) 基於Quo(js庫)
這是自己在一個專案中用到的,可以根據手勢(兩個手指的拖放放大1.2,1.4,1.6倍圖片,然後捏放下回復到原來大小,只要修改引數就可以無限放大和縮小圖片的倍數)
下面是quo支援的手勢:
以下為實現ipad iso 上面的web頁面(jsp)放大三倍,縮小三倍的程式碼:
放大1.2倍的圖片:
放大1.4倍的圖片:
放大1.6倍的圖片:
以下為完整程式碼:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp" %>
<!-- <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=8, minimum-scale=0.5, user-scalable=no” /> -->
<script language='javascript' src="${ctx}/static/jslib/quo.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var zoomSize = 1;
var zoomCount = 0;
var orgWidth = null;
var orgHeight = null;
$$("#image").pinchIn(function () {
if(zoomCount < 1) return;
zoomCount--;
if(zoomCount == 0) {
zoomSize = 1;
} else if(zoomCount == 1) {
zoomSize = 1 + 0.2;
} else if(zoomCount == 2) {
zoomSize = 1 + 0.4;
}
zoomResize();
});
$$("#image").pinchOut
if(zoomCount > 2) return;
zoomCount++;
if(zoomCount == 1) {
zoomSize = 1 + 0.2;
} else if(zoomCount == 2) {
zoomSize = 1 + 0.4;
} else if(zoomCount == 3) {
zoomSize = 1 + 0.6;
}
zoomResize();
});
$("#previmg").click(function () {
zoomSize = 1;
zoomCount = 0;
});
$("#nextimg").click(function () {
zoomSize = 1;
zoomCount = 0;
});
function zoomResize() {
var img = $("#image>img");
orgWidth = orgWidth ? orgWidth : img.width();
orgHeight = orgHeight ? orgHeight : img.height();
var newW = zoomSize * orgWidth;
var newH = zoomSize * orgHeight;
img.width(newW);
img.height(newH);
}
});
</script>
<c:if test="${not empty thumbs and fn:length(thumbs) > 0}">
<link rel="stylesheet" type="text/css" href="${ctx}/css/slider.css?rn=100" />
<div id="div_img" style="display:none;">
<c:forEach var="img" items="${images}">
<img src="${ipad}/intern/cp/${intern.cvId}/${random}/${img}"/>
</c:forEach>
</div>
<div id="gallery">
<div id="imagearea">
<div id="image" >
<a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
<a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper" style="display:none;">
<div id="thumbarea">
<ul id="thumbs">
<c:forEach var="thumb" items="${thumbs}" varStatus="status">
<li value="${status.index + 1}">
<img src="${ipad}/intern/cp/${intern.cvId}/${thumb}" width="179" height="100" alt="" /></li>
</c:forEach>
</ul>
</div>
</div>
<div id="pageInfo">
共${fn:length(thumbs)}頁,當前第<span id="_currentPageInfo">1</span>頁
</div>
</div>
<script type="text/javascript">
var imgid = 'image';
var imgdir = '${ipad}/intern/cp/${intern.cvId}/'+Math.random();
var imgext = '.png';
var thumbid = 'thumbs';
var auto = false;
var autodelay = 1;
var pageInfo = "_currentPageInfo";
</script>
<script type="text/javascript" src="${ctx}/js/slider.js"></script>
</c:if>
<c:if test="${empty thumbs or fn:length(thumbs) eq 0}">
<table width="100%" class="bordered-table zebra-striped info_tb">
<tr>
<td colspan="8" class="td_title" style="text-align:left;"><strong>對不起!該社招人員沒有測評上傳!</strong></td>
</tr>
</table>
</c:if>
相關推薦
實現ipad上的內嵌webview手勢縮放圖片(修改版,解決在第一張圖片放大的情況下翻到下一張圖片無法放大的問題) 基於Quo(js庫)
這是自己在一個專案中用到的,可以根據手勢(兩個手指的拖放放大1.2,1.4,1.6倍圖片,然後捏放下回復到原來大小,只要修改引數就可以無限放大和縮小圖片的倍數) 下面是quo支援的手勢: 以下為實現ipad iso 上面的web頁面(jsp)放大三倍,
zepto(js庫) align-items: center與 justify-content: center
與jq用法大致相同 外掛:fix.js selector.js touch.js display: flex; align-items: center; /* 彈性盒子flex 元素位於容器的中
viewPager+photoView實現圖片輪播和手勢縮放功能 支援手勢縮放的imageView 如何實現相簿左右滑動和手勢縮放 如何讓圖片自適應控制元件大小 photoView如何使用(上)
import uk.co.senab.photoview.IPhotoView; import uk.co.senab.photoview.PhotoViewAttacher; import uk.co.senab.photoview.PhotoViewAttacher.OnMatrixChangedList
js實現移動端圖片預覽:手勢縮放, 手勢拖動,雙擊放大...
在屏幕上 turn cit format 基礎上 set 邊距 點擊 點擊事件 前言本文將介紹如何通過js實現移動端圖片預覽,包括圖片的 預覽模式,手勢縮放,手勢拖動,雙擊放大等基本功能;
安卓內嵌 webview 不能執行 javascript 的原因
安卓內嵌 webview 不能執行 javascript 的原因: webview 的設定不對。在 RN 框架裡面使用的webview 預設設定是不會有這個問題的。所以不用怎麼懷疑RN的配置。可檢查的引數 settings.setJavaScript
Fresco使用PhotoDraweeView 實現圖片的手勢縮放
1.gradle引入Fresco compile 'com.facebook.fresco:fresco:0.11.0+' 2.在application中初始化Fresco Fresco.initialize(this, ImagePipelineConfigFactory
實現 ipad 上看來自 v4l2 上的攝像頭視訊
配合 http://blog.csdn.net/sunkwei/archive/2011/06/07/6530343.aspx 實現在 ipad 上觀看來自 v4l2 的攝像頭視訊. 先上ipad 抓屏圖 這個做的很粗糙, 而且有些 opengl es 的概念也沒有搞明白,
MUI的webview模式-縮放式側滑(類手機QQ)
MUI提供了非常多的控制元件,我想其中的側滑導航大多數MUI使用者都在使用,並且遇到不少難題。MUI模板裡面有一個非常亮眼的側滑導航當屬縮放式導航(類手機QQ),這是一個DIV模式的縮放式側滑,它的優點是可以跟著手勢滑動,缺點是不可以複用,其實它還有其它缺點,比如在主頁面擁
android內嵌webview元件渲染頁面 ios內嵌webview?元件渲染頁面 微信裡的頁面用什麼瀏覽器開啟
1.android內嵌webview元件渲染頁面 ios內嵌webview?元件渲染頁面 webview相當於瀏覽器? https://www.cnblogs.com/limeiky/p/5818463.html 2.微信裡的頁面用什麼瀏覽器開啟 p.p1 { m
縮放系列(二):所有子控制元件也隨著縮放、手勢縮放、多點觸控layout
下面是一個功能強大的改造的例子: 可以實現以下需求: 1.兩個手指進行縮放佈局 2.所有子控制元件也隨著縮放, 3.子控制元件該有的功能不能丟失(像button有可被點選的功能,縮放後不能丟失該功能) 執行效果圖: java程式碼如下 MainActi
縮放系列(三):一個可以手勢縮放、拖拽、旋轉的layout
弄了一個下午,終於搞出來了,PowerfulLayout 下面是一個功能強大的改造的例子: 可以實現以下需求: 1.兩個手指進行縮放佈局 2.所有子控制元件也隨著縮放, 3.子控制元件該有的功能不能丟失(像button有可被點選的功能,縮放後不能丟失該功能)
解決app內嵌h5中ios獲取不到title,vue router 修改title(IOS 下動態改變title失效)
在ios下app 設定document.title = "titleName" 失效,原因是在IOS webview中網頁標題只加載一次,動態改變是無效的。 vue中npm install vue-wechat-title元件 在路由配置中新增 meta物件 如:
圖片上傳裁剪&等比縮放處理(html5+Canvas)
Capricorncd-image-process Image pre processing for upload (html5 + canvas) 解決圖片上傳前縮放到一定比例自動居中裁剪、
在WPF中的Canvas上實現控制元件的拖動、縮放
如題,專案中需要實現使用滑鼠拖動、縮放一個矩形框,WPF中沒有現成的,那就自己造一個輪子:) 造輪子前先看看Windows自帶的畫圖工具中是怎樣做的,如下圖: 在被拖動的矩形框四周有9個小框,可以從不同方向拖動來放大縮小矩形框,另外需要注意的是,還有一
Android 佈局手勢縮放,可滑動檢視,實現類似Imgview圖片縮放效果
Android 自定義View 佈局手勢縮放,可滑動檢視,子View實現類似Imgview圖片縮放效果 自定義View,使用ViewDragHelper和ScaleGestureDetector結合簡單的實現類似PhotoView的效果的控制元件,使佈局內的子
雙網絡卡利用橋接的方式實現同時上內網和外網方法(比命令列配置路由表的操作要簡單)
【記錄一下網路資訊後面有用】進入網路連線,分別雙擊兩個網絡卡,點選詳細資訊先記錄下兩個網絡卡ip資訊;在我這裡外網ip是192.168.1.102,閘道器192.168.1.1,DNS:202.96.128.166/202.96.128.86;內網ip是192.168.2.243,內網不用域名解析的話只記ip
android實現控制元件的手勢縮放、移動以及雙擊還原
我分四部分介紹: 1.Imageview利用Matrix和OnScaleGestureListener實現手勢縮放; 2.在第一部分的基礎上實現圖片跟隨手指進行滑動; 3.在一、二的基礎上利用GestureDetector的On
Android ImageView手勢縮放完整的實現
已經有很多開源的縮放控制元件了,實際做專案沒有必要重複造輪子,但對於學習來說自己親自實現一個縮放的ImageView是大有益處的。所以這裡分享一下自己學習的心得。 1、建立一個類繼承ImageView。 public class GestureImageView ext
viewPager+photoView實現網路圖片載入左右滑動+手勢縮放功能+滑動到下一頁其他頁面恢復預設大小
前面兩篇文章,我們講了自定義viewpager+photoView實現本地圖片的載入和收縮縮放。實現本地相簿功能。 如果沒有看的話可以先閱讀以下,因為今天網路載入圖片的功能,實在這個基礎上做的修改,會基於之前的基礎上講解。 1. http://blog.csdn.net
CSS實現背景圖尺寸不隨瀏覽器縮放而變化的兩種方法
簡單 fix chrom per 實現 瀏覽器 webkit 只需要 div 方法一. 把圖片作為background 有幾個CSS的屬性要提一下:background-size:cover,這個CSS3的屬性作用是把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域,背景