js如何獲取網(wǎng)頁所有圖片
更新時間：2017年05月12日 11:13:08 作者：exponent
這篇文章主要為大家詳細(xì)介紹了js如何獲取網(wǎng)頁所有圖片，js獲取網(wǎng)頁所有圖片的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
需求
在網(wǎng)頁中單擊某張圖片，圖片能放大顯示，且能按順序切換圖片，同時，一些小圖標(biāo)和不符合要求的圖片不能放大。
由于網(wǎng)頁是在app中打開，圖片的放大與切換由移動端實(shí)現(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; //保存所有圖片的url
var 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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
原生js和jquery中有關(guān)透明度設(shè)置的相關(guān)問題
設(shè)置透明度問題，比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問題和注意點(diǎn)2014-01-01
目前隨著元宇宙概念的爆火，THREE技術(shù)已經(jīng)深入到了物聯(lián)網(wǎng)、VR、游戲、數(shù)據(jù)可視化等多個平臺，今天我們主要基于THREE實(shí)現(xiàn)一個三維的VR看房小項目，感興趣的朋友跟隨小編一起看看吧2022-10-10
這篇文章主要介紹了javascript控制層顯示或隱藏的方法,涉及javascript操作頁面元素樣式的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-07-07
雖然js是基于對象的，但在很多時候會使用到new這個操作符。2010-12-12
JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法,涉及javascript針對json數(shù)組數(shù)據(jù)的遍歷、判斷、存取等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
本文主要介紹了node.js的事件機(jī)制，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了淺談JavaScript中this的指向問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
JS Object.preventExtensions(),Object.seal()與Object.freeze()用
這篇文章主要介紹了JS Object.preventExtensions(),Object.seal()與Object.freeze()用法,結(jié)合實(shí)例形式分析了javascript控制對象擴(kuò)展、密封、凍結(jié)等相關(guān)函數(shù)與操作技巧,需要的朋友可以參考下2018-08-08
下面小編就為大家?guī)硪黄猨s從外部獲取圖片的實(shí)現(xiàn)方法。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript中async和await的使用及隊列詳情
這篇文章主要介紹了JavaScript中async和await的使用及隊列詳情，主要圍繞js中async和await簡單解析展開面試中可能會問到的關(guān)于隊列的一些場景和知識點(diǎn),需要的朋友可以參考一下2022-07-07