function tp(xyy){ // console.log(x) $(function(xyy) { var $aboutProya = $("#aboutProya"), $viewportCont = $(".viewport-cont"), $fixedViewIco = $(".fixed-view-ico a"), $fixedView = $(".fixed-view-ico"), viewportHeight = $(window).height(), VIEWPORT_LEN = xyy.index || 5, // viewport 的个数 curIndex = 0, canMousewheel = true, lazyScroll; // 滚动到 viewport, target 为滚动到的viewport的索引 function viewportGo(target) { var direction; // 滚动方向,down 向下滚, up向上滚 // 判断target是否超出 target = Math.max(0, Math.min(VIEWPORT_LEN, target)); // 判断目标viewport和当前的是否是同一个 if (target == curIndex) { return; } canMousewheel = false; if (target == VIEWPORT_LEN) { $aboutProya.stop().animate({"scrollTop": "+=340"}, 1200, 'easeInOutExpo', function() { canMousewheel = true; }); curIndex = VIEWPORT_LEN; return; } if (curIndex == VIEWPORT_LEN && target == VIEWPORT_LEN - 1) { $aboutProya.stop().animate({"scrollTop": "-=340"}, 1200, 'easeInOutExpo', function() { canMousewheel = true; }); curIndex = VIEWPORT_LEN - 1; return; } // 判断aboutProya滚动的方向 direction = target > curIndex ? "down" : "up"; // 执行入场出场动画 if (curIndex != VIEWPORT_LEN) { viewportOut(curIndex, direction); } viewportIn(target, direction); if (target > 0) { // packupHeader(); } else { expansionHeader(); } // 更新浏览器右侧选中 setTimeout(function() { $fixedViewIco.removeClass("cur").eq(target).addClass("cur"); }, 400); curIndex = target; // 第一屏不显示滚动条 if(curIndex <= 0){ $fixedView.hide() }else{ $fixedView.show() } }; // viewport出去 function viewportOut(viewportIndex, direction) { var viewportMarginTop, $viewport = $viewportCont.eq(viewportIndex), $children = $viewport.data("children"), len = $children.length; // 判断aboutProya是向上还是向下滚动 down 向下滚, up向上滚 viewportMarginTop = (direction == "down" ? "-" : "+") + "=150"; $viewport.stop().animate({"margin-top": viewportMarginTop}, 700, 'easeInOutExpo'); // 子元素移动 $children.each(function() { var targetTop = direction == "down" ? -(len - $(this).index())*150 : ($(this).index() + 1)*150; $(this).stop().animate({"top": targetTop}, 1100, 'easeInOutExpo', function() { $(this).css("top", 0); }); }); }; // viewport进来 function viewportIn(viewportIndex, direction) { var viewportMarginTop, $viewport = $viewportCont.eq(viewportIndex), $children = $viewport.data("children"), len = $children.length; // 判断aboutProya是向上还是向下滚动 down 向下滚, up向上滚 if (direction == "down") { viewportMarginTop = "-=150"; viewportInitMarginTop = $viewport.data("defaultMarginTop") + 150; } else { viewportMarginTop = "+=150"; viewportInitMarginTop = $viewport.data("defaultMarginTop") - 150; }; // 滚动aboutProya $aboutProya.stop().animate({"scrollTop": viewportIndex * viewportHeight}, 1200, 'easeInOutExpo'); // 初始化$viewport 并运动 $viewport.css("margin-top", viewportInitMarginTop).stop().delay(380).animate({"margin-top": viewportMarginTop}, 700, 'easeInOutExpo', function() { canMousewheel = true; }); // 初始化子元素并运动 $children.each(function(index) { $(this).css("top", function(index) { return (direction == "down" ? index * 150 : -index*150); }).stop().delay(380).animate({"top": 0}, 1100, 'easeInOutExpo') }); }; // 鼠标滚动事件 function fnMousewheel(e) { var direction, e = e || event; if (!canMousewheel) { return; } clearTimeout(lazyScroll); // 获取滚轮方向 if (e.wheelDelta) {//IE/Opera/Chrome direction = e.wheelDelta; } else if (e.detail) {//Firefox direction = e.detail * (-1); } lazyScroll = setTimeout(function() { // return; // 判断滚动方向 if($(".unify-scroll").hasClass("hover")){ return; }else{ if (direction < 0) { viewportGo(curIndex + 1); } else { viewportGo(curIndex - 1); } } // if (direction < 0) { // viewportGo(curIndex + 1); // } else { // viewportGo(curIndex - 1); // } }, 100); } // 初始化页面 if(curIndex <= 0){ $fixedView.hide() } var $viewNext = $(".view-next"), $overviewView = $(".overview-view"), $historyView = $(".history-view"); $(".view-bg").find("img").css("margin", 0); function initViewport() { $('.header-con ').css({ position:'fixed' }) $('.goto_top').hide(); if (viewportHeight < 600) { $viewNext.css("bottom", 5); $overviewView.css("margin-top", -280); $overviewView.find(".about").css("height", 55); } else { $viewNext.css("bottom", 30); $overviewView.css("margin-top", -340); $overviewView.find(".about").css("height", 90); } $aboutProya.css({"overflow": "hidden", "height": viewportHeight}); $aboutProya.scrollTop(curIndex*viewportHeight); $(".viewport").css("overflow", "hidden"); $fixedViewIco.eq(curIndex).addClass("cur"); imgFull($(".view-bg")); } initViewport(); // 初始化缓存 $viewportCont.each(function() { // 保存默认的margin-top,缓存children() var defaultMarginTop = parseInt($(this).css("margin-top")), $children = $(this).children(); $(this).data({"defaultMarginTop": defaultMarginTop, "children": $children}); $children.css({"position": "relative"}); }); // 右侧小点绑定点击事件 $fixedViewIco.on("click", function() { var index = $(this).index(); viewportGo(index); }); // 下一屏按钮添加事件 $(".view-next").each(function(index) { $(this).on("click", function() { viewportGo(index+1); }); }); //绑定滚轮事件 if ($aboutProya[0].addEventListener) {//ff3.5以下 $aboutProya[0].addEventListener("DOMMouseScroll", function(e) { fnMousewheel(e); }, false); } $aboutProya[0].onmousewheel = function(e) { fnMousewheel(e); }; // if (document.getElementById('scroll-box').addEventListener) {//ff3.5以下 // document.getElementById('scroll-box').addEventListener("DOMMouseScroll", function(e) { // var e= e || event; // e.preventDefault(); // }, false); // } // document.getElementById('scroll-box').onmousewheel = function(e) { // var e= e || event; // e.preventDefault(); // }; // 默认进入页面停留位置 (function() { curIndex = parseInt(location.hash.split("=")[1]) || 0; $aboutProya.scrollTop(curIndex*viewportHeight); $fixedViewIco.removeClass("cur").eq(curIndex).addClass("cur"); if (curIndex > 0) { // packupHeader(); } })(); $(".menu-son, .fot-nav").on("click", " a", function() { setTimeout(function() { var target = parseInt(location.hash.split("=")[1]) || 0; if (target != curIndex) { viewportGo(target); } }, 20); }); // 改变窗口大小事件 $(window).on("resize", function() { viewportHeight = $(window).height(); initViewport(); //window.location.reload(); }); $("#overviewGoNext").on("click", function() { viewportGo(1); }); }(xyy)); } /****************************************** *** *** *** 页面效果 *** *** *** ******************************************/ // $(function() { // /*** 产业链 ***/ // // 弹出蒙版 // (function() { // var $mask = $(".chain-mask"), // $cont = $mask.find(".chain-mask-cont"); // // 初始化蒙版背景 // // $bg.css("top", -top); // // $bg.height(windowHeight); // $(".chain-list li").hover(function() { // $(this).find("span").addClass("hover"); // },function() { // $(this).find("span").removeClass("hover"); // }); // $(".chain-list li").on("click", function() { // var id = $(this).data("id"); // $cont.find("li").each(function() { // if ($(this).data("id") == id) { // chainSwitch.go($(this).index(),0); // return false; // } // }); // $mask.fadeIn(); // $(".chain-mask-cont li").each(function() { // var $this = $(this); // var $con = $this.find(".txt-con"); // if($con.height()<=168){ // $this.find(".page-btn a").hide(); // } // }); // }); // $cont.on("click", function(e) { // e.stopPropagation(); // }); // // 关闭蒙版 // $mask.add($mask.find(".g-mask-close")).on("click", function() { // $mask.fadeOut(); // }); // })(); // // 蒙版切换 // var chainSwitch = new Switch({ // ul: ".chain-mask-cont ul", // li: "li", // prev: ".chain-mask-cont .prev", // next: ".chain-mask-cont .next", // isAuto: false, // moveLength: 1, // pageNum:1, // moveExtent: $(".chain-mask-cont li").outerWidth(true), // moveType: "easeInOutCubic", // speed: 800 // }); // // var chainSwitch = new Slider({ // // ul: $(".chain-mask-cont ul"), // // li: $(".chain-mask-cont li"), // // // trigger: $(".chain-mask-cont .trigger"), // // prev: $(".chain-mask-cont .prev"), // // next: $(".chain-mask-cont .next"), // // isAuto: false // // }); // $(".chain-mask-cont li").each(function() { // var $txt = $(this).find(".txt"); // $(this).find(".down").hover(function() { // $txt[0].timer = setInterval(function() { // $txt[0].scrollTop +=2; // }, 40); // }, function() { // clearInterval($txt[0].timer); // }); // $(this).find(".up").hover(function() { // $txt[0].timer = setInterval(function() { // $txt[0].scrollTop -=2; // }, 40); // }, function() { // clearInterval($txt[0].timer); // }); // }); // $(".cont-scroll-page").each(function() { // var $txt = $(".cont-scroll"); // $(this).find(".down").hover(function() { // $txt[0].timer = setInterval(function() { // $txt[0].scrollTop +=2; // }, 40); // }, function() { // clearInterval($txt[0].timer); // }); // $(this).find(".up").hover(function() { // $txt[0].timer = setInterval(function() { // $txt[0].scrollTop -=2; // }, 40); // }, function() { // clearInterval($txt[0].timer); // }); // }); // /*** 大事记 ***/ // // new Cutover({ // // ul: ".campus-cont ul", // // li: "li", // // prev: ".campus-cont .prev", // // next: ".campus-cont .next", // // isAuto: true, // // autoTime: 4000, // // moveLength: 1, // // pageNum: 3, // // moveExtent: $(".campus-cont li").outerWidth(true), // // moveType: "swing", // // speed: 800 // // }); // });