dachangjing/hot_online/js/main.js

$(window).on("load", function () {
    //获取页面url后面的参数
    var number = function (variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
        }
        return (false);
    };
    var HotContent = function (url) {
        this.screenHeight = $(document.body).height() * 0.6;
        this.url = url + "?m=" + new Date().getTime();
        this.data = null;
        this.wrap = {
            images: "wrap-img",
            video: "wrap-video",
            model: "wrap-model",
            iframe: "wrap-iframe"
        }
        this.ajax();
    };
    HotContent.prototype.ajax = function () {
        var that = this;
        $.ajax({
            url: that.url,
            dataType: "json",
            success: function (data) {
                that.data = data;
                that.init();
                //移动端自动播放
                setTimeout(function () {
                    window.parent.loaddingSuccess && window.parent.loaddingSuccess();
                }, 16)
            },
            error: function (msg) {
                console.log("错误:" + msg);
            }
        })
    };

    HotContent.prototype.init = function () {
        var num = number("m");
        this.data[num].images ? this.createElements(this.data[num].images, this.wrap.images) : '';
        this.data[num].video ? this.createElements(this.data[num].video, this.wrap.video) : '';
        this.data[num].model ? this.createElements(this.data[num].model, this.wrap.model) : '';
        this.data[num].iframe ? this.createElements(this.data[num].iframe, this.wrap.iframe) : '';
        this.data[num].backgroundMusic ? this.createAudio(this.data[num].backgroundMusic) : '';
        this.footer();
        this.onlyType();
        //加载视频
        $.getScript("js/vedio.js");

        //默认初始化显示的类型
        this.InitialDefaultDisplay($(".footer-btn > button:first").attr("data-name"));
        var that = this;
        $(".footer-btn > button").on("click", function () {
            that.InitialDefaultDisplay($(this).attr("data-name"));
        });
        //取消pc 鼠标滑动的时候出现的bug
        $(".o-slider-header img").on("mousedown", function (e) {
            e.preventDefault();
            window.move = false;  // fyz 记录鼠标
        })
    };
    HotContent.prototype.InitialDefaultDisplay = function (id) {
        $("." + id).show().siblings().hide();
        $('[data-name=' + id + ']').addClass("active").siblings().removeClass("active");
        if ($("." + id).find("video").length < 1) {
            if ($("." + id).siblings().find("video").length > 0) $("." + id).siblings().find("video")[0].pause();
        }
    };

    HotContent.prototype.createAudio = function (url) {
        //20190923修改 ios 微信浏览器 iframe内 自动播放audio 
        url='https://'+url.replace('https://','').replace('http://','')
        var _audio = '<audio id="HotBgMuisc" autoplay loop src='+url+'></audio>';   
        $("body").append(_audio);
        var globalAudio=document.getElementById("HotBgMuisc"); 
        //ios其他浏览器需添加一个事件
        document.addEventListener("touchstart", function() {globalAudio.play()});//ios需要加个事件才能播放 不能自动播放；如果还有浏览器不行，换成别的交互事件
        function autoPlayAudio() {
          try {
            window.parent.wx.config({
                // 配置信息, 即使不正确也能使用 wx.ready
                debug: false,
                appId: '',
                timestamp: 1,
                nonceStr: '',
                signature: '',
                jsApiList: []
              });
              window.parent.wx.ready(function() {                      
                globalAudio.play();
              });
          } catch (error) {
              
          }
        };
        autoPlayAudio();
       
    };

    //创建主要的内容 图片 视频 网页 模型
    HotContent.prototype.createElements = function (data, classname) {
        var contioner = $(".contioner");
        function createChildrenElements() {
            var children = [];
            switch (classname) {
                case this.wrap.images:
                    data.forEach(function (currentValue) { 
                        currentValue= currentValue.replace("http://",'').replace("https://",'')
                        children.push('<img src=https://' + currentValue + ' alt=图片 />'); 
                    })
                    break;
                case this.wrap.video:
                    data.forEach(function (currentValue) { 
                        currentValue.url= 'https://'+ currentValue.url.replace("http://",'').replace("https://",'')

                        children.push(videoEle(currentValue.url, currentValue.img)); })
                    break;
                case this.wrap.model:
                    data.forEach(function (currentValue) { children.push('<iframe src=' + currentValue + ' ></iframe>'); })
                    break;
                case this.wrap.iframe:
                    data.forEach(function (currentValue) { children.push('<iframe src=' + currentValue + ' ></iframe>'); })
                    break;
            }
            return children;
        }

        function videoEle(src, img) {

            if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                return '<div class="video-index" >\
                <div class="js-video">\
                    <video class="js-media" poster='+ img + ' webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" >\
                          <source src='+ src + ' type="video/mp4" />\
                        <p>你的浏览器不支持 HTML5 Video。</p>\
                    </video>\
                    <i data-playPause class="playPause fa  ui-icon">\
                        <span></span>\
                        <div class="ui-icon-before">\
                            <div class="ui-icon-after"></div>\
                        </div>\
                    </i>\
                    <div class="ui">\
                      <div>\
                        <span class="timeDisplay"><i data-currentTime>0:00</i> / <i data-duration>0:00</i></span>\
                      </div>\
                      <div>\
                      <div data-progress class="progress">\
                        <div data-buffer class="progress-buffer"></div>\
                        <div data-time class="progress-time"></div>\
                      </div><!-- progress -->\
                    </div>\
                      <div>\
                        <div data-mute class="fa fa-volume-up ui-icon">\
                        </div>\
                      </div>\
                      <div>\
                        <div data-volume="100" class="volumeControl"><span class="ui-slider-handle"></span></div>\
                      </div>\
                    </div>\
                    <i data-fullscreen class="fullscreen iconicfill-fullscreen" title="fullscreen"></i>\
                </div>\
            </div>';
            } else {
                return '<video src=' + src + ' controls="controls" autoplay poster=' + img + '></video>'
            }
        }

        function singleElement() {
            var SE = createChildrenElements.call(this);
            contioner.append('<div class=' + classname + '><div class="o-slider-header">' + SE + '</div></div>').css("height", this.screenHeight);
            // if (window.parent.MP_PREFETCHED_MODELDATA ) {
            //     if(window.parent.MP_PREFETCHED_MODELDATA.hotImageScale) {
            //         contioner.find('img').each(function(index, elem) {
            //             elem.addEventListener('click', hotImgDown(elem), false);
            //             elem.addEventListener('mousemove', hotImgMove(elem), false);
            //             elem.addEventListener('mouseup', hotImgUp(elem), false);
            //         })
            //     }
            // }

            this.Zoom(classname);
        };
        function doubleElement() {
            var DE = createChildrenElements.call(this);
            var _doubleElement = this.generateElements().mainElements(classname, this.generateElements(data, DE).multiElement());
            contioner.append(_doubleElement).css("height", this.screenHeight).attr("title","点击图片放大缩小");
            // if (window.parent.MP_PREFETCHED_MODELDATA ) {
            //     if(window.parent.MP_PREFETCHED_MODELDATA.hotImageScale) {
            //         contioner.find('img').each(function(index, elem) {
            //             elem.addEventListener('click', hotImgDown(elem), false);
            //             elem.addEventListener('mousemove', hotImgMove(elem), false);
            //             elem.addEventListener('mouseup', hotImgUp(elem), false);
            //         })
            //     }
            // }
            
            this.build(classname);
            this.Zoom(classname);
        };

        function hotImgDown(elem){
            // console.log(1)
            return function(e){
                // window.move = false;
            }
        }

        function hotImgMove(elem){
            return function(){
                window.move = true;
                console.log(1);
            }
        }

        function hotImgUp(elem){
            return function(){
                if(window.move) return;
                if(elem.scale) {  // 图片已放大
                    // elem.style.maxHeight = '100%';
                    elem.classList.remove('hotImageClick');
                    elem.scale = false;
                }else{
                    // elem.style.maxHeight = '130%';
                    elem.classList.add('hotImageClick');
                    elem.scale = true;
                }
            }
        }

        if (data.length > 1) {
            doubleElement.call(this, classname);
        }
        else {
            singleElement.call(this, classname);
        }
    };

    HotContent.prototype.generateElements = function (data, ele) {
        function combination(SingleOriginal) {
            if (!data) return;
            return '<div class="o-slider--item"  >\
                <div class="o-slider-bg">\
                  <div  class="o-slider-header" >'
                + SingleOriginal +
                '</div>\
                </div>\
              </div>';
        }
        return {
            mainElements: function (classname, children) {
                return '<div class=' + classname + '>\
                  <div class="o-sliderContainer" id=pbSliderWrap-'+ classname + '>\
                    <div class="o-slider" id=pbSlider-'+ classname + '>'
                    + children +
                    '</div>\
                  </div>\
                </div>';
            },
            multiElement: function () {
                var _multiElement = "";
                for (var i = 0; i < data.length; i++) {
                    _multiElement += combination(ele[i]);
                }
                return _multiElement;
            }
        };
    };
    //启动轮播
    HotContent.prototype.build = function (id) {
        var screenHeight = this.screenHeight;
        $('#pbSlider-' + id).pbTouchSlider({
            slider_Wrap: '#pbSliderWrap-' + id,
            slider_Threshold: 10,
            slider_Speed: 600,
            slider_Ease: 'ease-out',
            slider_Drag: true,
            slider_Arrows: {
                enabled: true
            },

            slider_Dots: {
                class: '.o-slider-pagination',
                enabled: true,
                preview: false
            },
            slider_Breakpoints: {
                default: {
                    height: screenHeight
                },
                tablet: {
                    height: screenHeight,
                    media: 1024
                },
                smartphone: {
                    height: screenHeight,
                    media: 768
                }
            }
        });
    };
    // 启动图片的放大缩小
    HotContent.prototype.Zoom = function (classname) {
        // if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
        //   if(classname != "wrap-img") return;
        //   $("."+classname).find(".o-slider-header").each(function(){
        //     new RTP.PinchZoom(this, {});
        //   })
        // }
        if (true) {
            if (classname != "wrap-img") return;
            $("." + classname).find(".o-slider-header").each(function () {
                new RTP.PinchZoom(this, {});
            })
        }
    };


    HotContent.prototype.footer = function () {
        $(".footer").append(this.footerCreateEle());
    };
    HotContent.prototype.footerCreateEle = function () {
        var num = number("m");
        var footerH3 = this.data[num].title || "";
        var footerText = this.data[num].content || "";
        var footerBtn = "";
        var btnIcon = {
            "img": ["img-icon", "图片"],
            "video": ["video-icon", "视频"],
            "model": ["model-icon", "3D"],
            "iframe": ["iframe-icon", "网页"]
        };
        function btnBuild(id, classname, text) {
            return '<button data-name=' + id + '><i class=' + classname + '></i>' + text + '</button>'
        }

        this.data[num].model ? footerBtn += btnBuild(this.wrap.model, btnIcon.model[0], btnIcon.model[1]) : '';
        this.data[num].video ? footerBtn += btnBuild(this.wrap.video, btnIcon.video[0], btnIcon.video[1]) : '';
        this.data[num].iframe ? footerBtn += btnBuild(this.wrap.iframe, btnIcon.iframe[0], btnIcon.iframe[1]) : '';
        this.data[num].images ? footerBtn += btnBuild(this.wrap.images, btnIcon.img[0], btnIcon.img[1]) : '';

        return '<div class="footer-title"><h3>' + footerH3 + '</h3><div class=footer-btn>' + footerBtn + '</div></div>\
                        <div class=footer-text>'+ footerText + '<div class=footer-mask></div></div>';
    }
    HotContent.prototype.onlyType = function () {
        var footerBtn = $(".footer-btn");
        if (footerBtn.children().length > 1) return;
        footerBtn.hide();
        if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            if (!this.data[number("m")].content || !this.data[number("m")].title) {
                $(".contioner").css("height", $(document.body).height() * 0.96);
            }
            $(".footer-btn").hide();
        }
    }

    new HotContent("https://super.4dage.com/data/" + number("id") + "/hot/js/data.js");
    //new HotContent("http://192.168.0.41:8080/SuperTwo/data/"+number("id")+"/hot/js/data.js");
})