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 相关文章推荐
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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脚本的10个技巧(3)
2006/10/09 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
python中异常报错处理方法汇总
2016/11/20 Python
python实现反转部分单向链表
2018/09/27 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
浅析python标准库中的glob
2020/03/13 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
阿波罗盒子:Apollo Box
2017/08/14 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
班委竞选演讲稿
2014/04/28 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
企业安全生产标语
2014/06/06 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js