js如何获取网页所有图片


Posted in Javascript onMay 12, 2017

需求

在网页中单击某张图片,图片能放大显示,且能按顺序切换图片,同时,一些小图标和不符合要求的图片不能放大。
由于网页是在app中打开,图片的放大与切换由移动端实现,因此,需要用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);
      }
    });
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
JavaScript国旗变换效果代码
Aug 13 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 #Javascript
jQuery手风琴的简单制作
May 12 #jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 #jQuery
Centos6.8下Node.js安装教程
May 12 #Javascript
详解Node.js项目APM监控之New Relic
May 12 #Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 #Javascript
WebSocket实现简单客服聊天系统
May 12 #Javascript
You might like
php实现的在线人员函数库
2008/04/09 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
php 中英文语言转换类
2011/09/07 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
php网站地图生成类示例
2014/01/13 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP7新功能总结
2019/04/14 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python操作excel的方法
2018/08/16 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
祖国在我心中演讲稿400字
2014/05/04 职场文书
保护环境倡议书500字
2014/05/19 职场文书
个人担保书范文
2014/05/20 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
驳回起诉裁定书
2015/05/19 职场文书
赡养老人协议书范本
2015/08/06 职场文书
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle