關(guān)于微信上網(wǎng)頁圖片點擊全屏放大效果
實現(xiàn)微信上網(wǎng)頁的圖片點擊后全屏還可以可以縮放,這個功能是別人做的,可是捏點擊后屏幕直接黑屏了,圖片沒有顯示出來。這個代碼在網(wǎng)上搜一下,挺多類似的。
先上代碼。
function arrayToJson(o) { var r = []; if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\""; if (typeof o == "object") { if (!o.sort) { for (var i in o) r.push(i + ":" + arrayToJson(o[i])); if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) { r.push("toString:" + o.toString.toString()); } r = "{" + r.join() + "}"; } else { for (var i = 0; i < o.length; i++) { r.push(arrayToJson(o[i])); } r = "[" + r.join() + "]"; } return r; } return o.toString(); } //這個是調(diào)用微信圖片瀏覽器的函數(shù) function imagePreview(curSrc, srcList) { if (!curSrc || !srcList || srcList.length == 0) { return; } WeixinJSBridge.invoke('imagePreview', { 'current': curSrc, 'urls': srcList }); }; (function ($) { var aa = []; var i = 0; var src = []; var json = null; aa = $(".img"); for (i = 0; i < aa.length; i++) { src[i] = aa[i].src; //把所有的src存到數(shù)組里 } var srcList = arrayToJson(src); //轉(zhuǎn)換成json并賦值給srcList $('.pro').click(function () { imagePreview(this.src, srcList); }); })(jQuery);
在微信web 開發(fā)者工具調(diào)試,網(wǎng)頁上斷點調(diào)試發(fā)現(xiàn)圖片路徑 json 格式化了兩次?。。?/p>
最后解決的方法是沒有調(diào)用 arrayToJson() 這個方法,直接調(diào)用 imagePreview 這個是微信提供的JsAPI 調(diào)用微信圖片瀏覽器。
解釋下每個方法的作用
這個是將圖片路勁轉(zhuǎn)為json格式的方法,如果已經(jīng)是json格式就不用再轉(zhuǎn)換了
這個是調(diào)用微信圖片瀏覽器的方法
加載初始化參數(shù)以及點擊調(diào)用方法
以上所述是小編給大家介紹的關(guān)于微信上網(wǎng)頁圖片點擊全屏放大效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
js實現(xiàn)做通訊錄的索引滑動顯示效果和滑動顯示錨點效果
下面小編就為大家?guī)硪黄猨s實現(xiàn)做通訊錄的索引滑動顯示效果和滑動顯示錨點效果。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02js數(shù)組高階函數(shù)之includes()方法總結(jié)
JS的數(shù)組是一種特殊的對象,其特點是在值的列表中按照順序存放值,在 JS中,數(shù)組是由中括號 [] 括起來的數(shù)值序列,本篇文章給大家介紹js數(shù)組高階函數(shù)——includes()方法,感興趣的朋友一起看看吧2023-12-12微信小程序報錯:does?not?have?a?method?"xxxx"?to?ha
這篇文章主要給大家介紹了關(guān)于微信小程序報錯:does?not?have?a?method?"xxxx"?to?handle?event?"tap"的解決方案,文中將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01webpack組織模塊打包Library的原理及實現(xiàn)
這篇文章主要介紹了webpack組織模塊打包Library的原理及實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03