需求
在網(wǎng)頁中單擊某張圖片,圖片能放大顯示,且能按順序切換圖片,同時,一些小圖標(biāo)和不符合要求的圖片不能放大。
由于網(wǎng)頁是在app中打開,圖片的放大與切換由移動端實現(xiàn),因此,需要用js調(diào)用原生方法,并傳遞所有圖片的url
解決
var img = [];for(var i=0;i<$("img").length;i++){ //獲取所有符合放大要求的圖片,將圖片路徑(src)獲取 if(parseInt($("img").eq(i).css("width"))>20){ img[i] = $("img").eq(i).attr("src"); }}var img_info = {};img_info.list = img; //保存所有圖片的urlvar imgs = document.getElementsByTagName('img');for(var i = 0;i < imgs.length; i++){ if(parseInt($(imgs[i]).css('width')) > 20){ //將索引當(dāng)作img標(biāo)簽的屬性進(jìn)行存儲 $(imgs[i]).attr('index',i); $(imgs[i]).click(function () { //獲取上面存儲的圖片的索引,這個索引就是當(dāng)前圖片的索引 img_info.index = $(this).attr('index'); //將信息轉(zhuǎn)為json字符串 var json = JSON.stringify(img_info); //判斷是ios端還是android端 if (_IsIOS()) { window.webkit.messageHandlers.showImg.postMessage(json); } else if (_IsAndroid()) { window.control.call('showImg',json); } }); }}以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答