jQuery Mobile是一個用于開發移動應用的HTML5框架,支持各種移動設備和平臺。在這個框架中,圖片的放大功能也是實現簡單的。下面我們來看一下如何使用jQuery Mobile實現圖片放大。
$(document).on("pageshow", "#page1", function() {
//選中圖片
$("img").on("tap", function() {
var imgSrc = $(this).attr("src");
//創建彈框
$("").appendTo($.mobile.pageContainer);
//在彈框中添加一個按鈕來關閉彈框
$("").appendTo(".pop-up");
//監聽按鈕點擊事件
$(".close-btn").on("tap", function() {
$(".pop-up").remove();
});
});
});
以上代碼實現的效果是,在頁面中選中一張圖片,點擊圖片后會彈出一個彈框,彈框中展示圖片,并且有一個關閉按鈕,點擊按鈕后彈框會消失。
這只是一個簡單的實現方式,你可以根據自己需求進行擴展。比如,你可以改變彈框的樣式、添加放大縮小功能等等。