跨屏平台网站适配手机代码笔记

发布时间:2020年3月23日

在基于跨屏平台 Kuaping.com 对原有pc网站适配手机的时候,有些pc网站使用了比较落后的flash幻灯片,然后图片的数据通常是写在js数组里面的,比如这样:

var slideFullScreenUrl = "/SiteFiles/Plugins/SS.Photo/assets/slide/fullscreen.swf";

var slide_data = {

"slide":{"title":"魅力一中"},
"images":[
{"title":"魅力一中","intro":"","previewUrl":"/upload/images/2020/3/d25cb60659deb90f.png","previewUrl":"/upload/images/2020/3/d25cb60659deb90f.png","previewUrl":"/upload/images/2020/3/d25cb60659deb90f.png","imageUrl":"/upload/images/2020/3/84f6c18479852074.jpg","id":"6"},{"title":"魅力一中","intro":"","previewUrl":"/upload/images/2020/3/234d4354b0f7c82b.png","imageUrl":"/upload/images/2020/3/f705ac585cb652f6.jpg","id":"7"},{"title":"魅力一中","intro":"","previewUrl":"/upload/images/2020/3/5ca9c5951cca8c6b.png","imageUrl":"/upload/images/2020/3/e34461fb2c3a57d3.jpg","id":"8"},{"title":"魅力一中","intro":"","previewUrl":"/upload/images/2020/3/97b9cfc6ecc86f54.png","imageUrl":"/upload/images/2020/3/eb755fcebfd6a52e.jpg","id":"9"},{"title":"魅力一中","intro":"","previewUrl":"/upload/images/2020/3/a77f34c0665a7df7.png","imageUrl":"/upload/images/2020/3/8b259ac598ee3f48.jpg","id":"10"},{"title":"魅力一中","intro":"","previewUrl":"/upload/images/2020/3/5009a418f2aa3034.png","imageUrl":"/upload/images/2020/3/d24b8f8372fb46f3.jpg","id":"11"},{"title":"魅力一中","intro":"","previewUrl":"/upload/images/2020/3/149be32b3914c8e2.png","imageUrl":"/upload/images/2020/3/e03fb086059b1c99.jpg","id":"12"},{"title":"魅力一中","intro":"","previewUrl":"/upload/images/2020/3/5607950bc600e449.png","imageUrl":"/upload/images/2020/3/9375134cc210b405.jpg","id":"13"}
],
"next_album":{"title":"","url":"javascript:void(0);","previewUrl":"/SiteFiles/Plugins/SS.Photo/assets/slide/s.gif"},"prev_album":{"title":"","url":"javascript:void(0);","previewUrl":"/SiteFiles/Plugins/SS.Photo/assets/slide/s.gif"}
}

但是实际情况是,在手机下我们需要拿到这些数据,去重新生成更新的swiper幻灯片,代码片段如下:

/*轮播4*/

var slideFullScreenUrl = "";
$("script").each(function(){

var str = $(this).html();

/*截取有slide_data的script段落*/
if(str.indexOf("slide_data") != -1){
slideFullScreenUrl = str;
}
});

var slideFullScreenUrlArray = [];
/*正则匹配图片信息*/
var regexp = new RegExp("imageUrl(.*?)(jpg|gif|png)", "g");
var _c;
while ((_c = regexp.exec(slideFullScreenUrl)) != null) {

/*封装数组*/

slideFullScreenUrlArray.push({
"img":_c[0].substring(11)
}) ;
}

console.log(slideFullScreenUrlArray);
/*console.log(slideFullScreenUrl);*/
$("#eFramePic ").cs_swiper({
"data": slideFullScreenUrlArray
});

本文由手机网站建设、网站移动端适配专家-跨屏网原创,转载请保留版权( PC网站快速适配手机端www.kuaping.com跨屏网自主开发跨屏平台,网站引用一句话JS,即可快速适配手机端,打通手机版、微信等众多终端。欢迎来电咨询!热线:027-81777732、13343477732