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