Difference between revisions of "Team:Fudan/js/index"

(Created page with "var mousewheel = document.all ? "mousewheel" : "DOMMouseScroll"; var currentDegree = 0; var index = 0; function FadeOutAll() { $(".achievement_title").fadeOut(300); $(".des...")
 
 
Line 48: Line 48:
 
$('#body').unbind('mousewheel');
 
$('#body').unbind('mousewheel');
 
if (deltaY > 0) {
 
if (deltaY > 0) {
−
scroll('index');
+
scroll('main_index');
 
}
 
}
 
if (deltaY < 0) {
 
if (deltaY < 0) {
−
scroll('content');
+
scroll('main_content');
 
}
 
}
 
}
 
}
Line 90: Line 90:
 
event.returnValue = false;
 
event.returnValue = false;
 
if (event.keyCode == 38) {
 
if (event.keyCode == 38) {
−
scroll('index');
+
scroll('main_index');
 
} else if (event.keyCode == 40) {
 
} else if (event.keyCode == 40) {
−
scroll('content');
+
scroll('main_content');
 
}
 
}
 
});
 
});

Latest revision as of 17:22, 18 September 2015

var mousewheel = document.all ? "mousewheel" : "DOMMouseScroll"; var currentDegree = 0; var index = 0;

function FadeOutAll() { $(".achievement_title").fadeOut(300); $(".design_title").fadeOut(300); $(".modeling_title").fadeOut(300); $(".parts_title").fadeOut(300); $(".team_title").fadeOut(300); $(".practice_title").fadeOut(300); } function ExchangeTittle(callback) { FadeOutAll(); var t = setTimeout("$('#modeling_title').fadeIn();",300); }

function scroll(id) { $("#" + id).HoverTreeScroll(650); }

function fadeSwitchElements(id1, id2) { var element1 = $('#' + id1); var element2 = $('#' + id2); if (element1.is(':visible')) { element1.fadeToggle(500); element2.fadeToggle(500); } else { element2.fadeToggle(500, function() { element1.fadeToggle(500); }); } }

function AnimateRotate(fromD,toD, id){ index = -(currentDegree/30); 

   $({deg: fromD}).animate({deg: toD}, {
       step: function(now, fx){
           $("#gear").css({
                transform: "rotate(" + now + "deg)"
           });
       }
   });

} function wheelMove(event, deltaY) { event.preventDefault(); event.returnValue = false; $('#body').unbind('mousewheel'); if (deltaY > 0) { scroll('main_index'); } if (deltaY < 0) { scroll('main_content'); } } var points = []; points.push([60,90]); points.push([140,25]); points.push([225,13]); points.push([305,30]); points.push([382,90]); points.push([390,167]); points.push([370,290]); points.push([299,347]); points.push([208,367]); points.push([117,334]); points.push([52,253]); var spline = $.crSpline.buildSequence(points);

function getPositoin(id) { var nowleft = $("#" + id).css("left"); nowleft = Number(nowleft.substr(0,nowleft.length-2)); var nowtop = $("#" + id).css("top"); nowtop = Number(nowtop.substr(0,nowtop.length-2)); var ret = [nowleft,nowtop]; return ret; }

window.onload = function() { jQuery(window).scrollTop(0); $("#loading").fadeOut(800); //滚轮 var interval = setInterval(function() { $('#body').bind('mousewheel', wheelMove); }, 950); $('#body').bind('mousewheel', wheelMove); //方向键 $(document).keydown(function(event) { event.preventDefault(); event.returnValue = false; if (event.keyCode == 38) { scroll('main_index'); } else if (event.keyCode == 40) { scroll('main_content'); } });

$("#achievement").click(function() { AnimateRotate(currentDegree, 0); console.log(index); indexBefore = -(currentDegree/30); currentDegree = 0; indexAfrer = -(currentDegree/30); FadeOutAll(); var t = setTimeout("$('.achievement_title').fadeIn();",300); $("#achievement").animate( {crSpline: $.crSpline.buildSequence([points[5-indexBefore],points[5-indexAfrer]]), width: '146px'}, 500 ); $("#design").animate( {crSpline: $.crSpline.buildSequence([points[6-indexBefore],points[6-indexAfrer]]), width: '91px'}, 500 ); $("#model").animate( {crSpline: $.crSpline.buildSequence([points[7-indexBefore],points[7-indexAfrer]]), width: '91px'}, 500 ); $("#parts").animate( {crSpline: $.crSpline.buildSequence([points[8-indexBefore],points[8-indexAfrer]]), width: '91px'}, 500 ); $("#team").animate( {crSpline: $.crSpline.buildSequence([points[9-indexBefore],points[9-indexAfrer]]), width: '91px'}, 500 ); $("#practice").animate( {crSpline: $.crSpline.buildSequence([points[10-indexBefore],points[10-indexAfrer]]), width: '91px'}, 500 ); })

$("#design").click(function() { AnimateRotate(currentDegree, -30); console.log(index); indexBefore = -(currentDegree/30); currentDegree = -30; indexAfrer = -(currentDegree/30); FadeOutAll(); var t = setTimeout("$('.design_title').fadeIn();",300); $("#achievement").animate( {crSpline: $.crSpline.buildSequence([points[5-indexBefore],points[5-indexAfrer]]), width: '91px'}, 500 ); $("#design").animate( {crSpline: $.crSpline.buildSequence([points[6-indexBefore],points[6-indexAfrer]]), width: '146px'}, 500 ); $("#model").animate( {crSpline: $.crSpline.buildSequence([points[7-indexBefore],points[7-indexAfrer]]), width: '91px'}, 500 ); $("#parts").animate( {crSpline: $.crSpline.buildSequence([points[8-indexBefore],points[8-indexAfrer]]), width: '91px'}, 500 ); $("#team").animate( {crSpline: $.crSpline.buildSequence([points[9-indexBefore],points[9-indexAfrer]]), width: '91px'}, 500 ); $("#practice").animate( {crSpline: $.crSpline.buildSequence([points[10-indexBefore],points[10-indexAfrer]]), width: '91px'}, 500 ); })

$("#model").click(function() { AnimateRotate(currentDegree, -60); console.log(index); indexBefore = -(currentDegree/30); currentDegree = -60; indexAfrer = -(currentDegree/30); FadeOutAll(); var t = setTimeout("$('.modeling_title').fadeIn();",300); $("#achievement").animate( {crSpline: $.crSpline.buildSequence([points[5-indexBefore],points[5-indexAfrer]]), width: '91px'}, 500 ); $("#design").animate( {crSpline: $.crSpline.buildSequence([points[6-indexBefore],points[6-indexAfrer]]), width: '91px'}, 500 ); $("#model").animate( {crSpline: $.crSpline.buildSequence([points[7-indexBefore],points[7-indexAfrer]]), width: '146px'}, 500 ); $("#parts").animate( {crSpline: $.crSpline.buildSequence([points[8-indexBefore],points[8-indexAfrer]]), width: '91px'}, 500 ); $("#team").animate( {crSpline: $.crSpline.buildSequence([points[9-indexBefore],points[9-indexAfrer]]), width: '91px'}, 500 ); $("#practice").animate( {crSpline: $.crSpline.buildSequence([points[10-indexBefore],points[10-indexAfrer]]), width: '91px'}, 500 ); })

$("#parts").click(function() { AnimateRotate(currentDegree, -90); console.log(index); indexBefore = -(currentDegree/30); currentDegree = -90; indexAfrer = -(currentDegree/30); FadeOutAll(); var t = setTimeout("$('.parts_title').fadeIn();",300); $("#achievement").animate( {crSpline: $.crSpline.buildSequence([points[5-indexBefore],points[5-indexAfrer]]), width: '91px'}, 500 ); $("#design").animate( {crSpline: $.crSpline.buildSequence([points[6-indexBefore],points[6-indexAfrer]]), width: '91px'}, 500 ); $("#model").animate( {crSpline: $.crSpline.buildSequence([points[7-indexBefore],points[7-indexAfrer]]), width: '91px'}, 500 ); $("#parts").animate( {crSpline: $.crSpline.buildSequence([points[8-indexBefore],points[8-indexAfrer]]), width: '146px'}, 500 ); $("#team").animate( {crSpline: $.crSpline.buildSequence([points[9-indexBefore],points[9-indexAfrer]]), width: '91px'}, 500 ); $("#practice").animate( {crSpline: $.crSpline.buildSequence([points[10-indexBefore],points[10-indexAfrer]]), width: '91px'}, 500 ); })

$("#team").click(function() { AnimateRotate(currentDegree, -120); console.log(index); indexBefore = -(currentDegree/30); currentDegree = -120; indexAfrer = -(currentDegree/30); FadeOutAll(); var t = setTimeout("$('.team_title').fadeIn();",300); $("#achievement").animate( {crSpline: $.crSpline.buildSequence([points[5-indexBefore],points[5-indexAfrer]]), width: '91px'}, 500 ); $("#design").animate( {crSpline: $.crSpline.buildSequence([points[6-indexBefore],points[6-indexAfrer]]), width: '91px'}, 500 ); $("#model").animate( {crSpline: $.crSpline.buildSequence([points[7-indexBefore],points[7-indexAfrer]]), width: '91px'}, 500 ); $("#parts").animate( {crSpline: $.crSpline.buildSequence([points[8-indexBefore],points[8-indexAfrer]]), width: '91px'}, 500 ); $("#team").animate( {crSpline: $.crSpline.buildSequence([points[9-indexBefore],points[9-indexAfrer]]), width: '146px'}, 500 ); $("#practice").animate( {crSpline: $.crSpline.buildSequence([points[10-indexBefore],points[10-indexAfrer]]), width: '91px'}, 500 ); })

$("#practice").click(function() { AnimateRotate(currentDegree, -150); console.log(index); indexBefore = -(currentDegree/30); currentDegree = -150; indexAfrer = -(currentDegree/30); FadeOutAll(); var t = setTimeout("$('.practice_title').fadeIn();",300); $("#achievement").animate( {crSpline: $.crSpline.buildSequence([points[5-indexBefore],points[5-indexAfrer]]), width: '91px'}, 500 ); $("#design").animate( {crSpline: $.crSpline.buildSequence([points[6-indexBefore],points[6-indexAfrer]]), width: '91px'}, 500 ); $("#model").animate( {crSpline: $.crSpline.buildSequence([points[7-indexBefore],points[7-indexAfrer]]), width: '91px'}, 500 ); $("#parts").animate( {crSpline: $.crSpline.buildSequence([points[8-indexBefore],points[8-indexAfrer]]), width: '91px'}, 500 ); $("#team").animate( {crSpline: $.crSpline.buildSequence([points[9-indexBefore],points[9-indexAfrer]]), width: '91px'}, 500 ); $("#practice").animate( {crSpline: $.crSpline.buildSequence([points[10-indexBefore],points[10-indexAfrer]]), width: '146px'}, 500 ); }) }