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 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
JavaScript中交换值的10种方法总结
Aug 18 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php对数组排序代码分享
2014/02/24 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP处理会话函数大总结
2015/08/05 PHP
php实现微信支付之企业付款
2018/05/30 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
python enumerate内置函数用法总结
2020/01/07 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
机关单位工作失职检讨书
2014/11/20 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server