跨屏平台网站适配手机代码笔记
03月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
});