sceneLoc/scene/hottemp/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;
    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() {
          parent.loaddingSuccess && 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.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"));
    });
    $(".o-slider-header img").on("pointerdown",function(e){
      e.preventDefault();
    })
  };
  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.createElements = function(data,classname){
    var contioner = $(".contioner");
    function createChildrenElements(){
      var children = [];
      switch (classname) {
        case this.wrap.images:
        data.forEach(function(currentValue){ children.push('<img src='+currentValue+' alt=图片 />') ;  })
        break;
        case this.wrap.video:
        data.forEach(function(currentValue){ 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+'>'+SE+'</div>').css("height",this.screenHeight);
      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);
      this.build(classname);
      this.Zoom(classname);
    };

    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;
      console.log($(".o-slider-header").height());
      $("."+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].text ||  "";
    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;
    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
      if(!this.data[number("m")].text ){
        $(".contioner").css("height",$(document.body).height() * 0.96);
      }
      $(".footer-btn").hide();
    }
  }

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