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