咨询热线:4006-75-4006
售前:9:00-23:30 备案:9:00-18:00 技术:7*24h
需求
在网页中单击某张图片,图片能放大显示,且能按顺序切换图片,同时,一些小图标和不符合要求的图片不能放大。
由于网页是在app中打开,图片的放大与切换由移动端实现,因此,需要用js调用原生方法,并传递所有图片的url
解决
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 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); } }); } } |