From c6ddb6ef7c17c3f7081bfd2d3e200800c9a93133 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 19 Dec 2015 14:00:40 +0800 Subject: [PATCH] improve home js --- site/static/home.js | 375 +++++++++++++++++++++---------------- site/static/script.js | 53 +++--- site/static/style.css | 15 +- site/templates/layout.html | 5 +- 4 files changed, 240 insertions(+), 208 deletions(-) diff --git a/site/static/home.js b/site/static/home.js index 2d3f819889..46b7aed017 100644 --- a/site/static/home.js +++ b/site/static/home.js @@ -1,31 +1,32 @@ -$(function () { - var getTransform = function () { +$(function() { + var getTransform = function() { var style = "transform", anim = "animation", - pers = "perspective"; - var i, prefix = ['webkit', 'moz', 'ms', 'o'], - htmlStyle = $("html")[0].style; - if (!"transform" in htmlStyle) { - for (i in prefix) { - style = "-" + prefix[i] + "-transform"; - if (style in htmlStyle) break; - } - } - if (!"animation" in htmlStyle) { - for (i in prefix) { - anim = "-" + prefix[i] + "-animation"; - if (anim in htmlStyle) break; - } - } - if (!"perspective" in htmlStyle) { - for (i in prefix) { - pers = "-" + prefix[i] + "-perspective"; - if (pers in htmlStyle) break; - } - } - return [style, anim, pers] + pers = "perspective"; + var i, prefix = ['webkit', 'moz', 'ms', 'o'], + htmlStyle = $("html")[0].style; + if (!"transform" in htmlStyle) { + for (i in prefix) { + style = "-" + prefix[i] + "-transform"; + if (style in htmlStyle) break; + } + } + if (!"animation" in htmlStyle) { + for (i in prefix) { + anim = "-" + prefix[i] + "-animation"; + if (anim in htmlStyle) break; + } + } + if (!"perspective" in htmlStyle) { + for (i in prefix) { + pers = "-" + prefix[i] + "-perspective"; + if (pers in htmlStyle) break; + } + } + return [style, anim, pers] }; - var C=createjs||{},T=TweenMax||{}; + var C = createjs || {}, + T = TweenMax || {}; var bannerAnim = { w: 2400, h: 1300, @@ -47,12 +48,12 @@ $(function () { {x:1920,y:260,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}}, {x:2070,y:250,w:230,h:455,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:185,r:75},{x:35,y:195,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}, {x:140,y:30,r:75},{x:150,y:40,r:55},{x:140,y:185,r:75},{x:150,y:195,r:55},{x:140,y:340,r:75},{x:150,y:350,r:55}]}, ], - init: function () { + init: function() { var self = this; self.box = $(".banner-box"); self.animBox = $("#bannerAnim"); self.imgBox = $(".banner-img"); - self.txtBox=$(".banner-entry"); + self.txtBox = $(".banner-entry"); //创建canvas; self.Canvas = $("").appendTo(self.animBox); //document.createElement('canvas'); self.Canvas[0].width = self.w; @@ -68,187 +69,235 @@ $(function () { $(window).bind("resize", self.bannerResize); self.start() }, - bannerResize: function () { + bannerResize: function() { var self = bannerAnim; self.p_w = self.box.parent().width(); self.p_h = self.box.parent().height(); //获取比例； - var w_s = self.p_w / self.w+0.08, - h_s = self.p_h / self.h+0.08; - var scale=self.scale = w_s > h_s ? w_s : h_s; - var tra = getTransform()[0]; - self.animBox.attr("style", ""); - self.imgBox.attr("style", ""); - var boxSty = { - "width": self.w, - "height": self.h - }; + var w_s = self.p_w / self.w + 0.08, + h_s = self.p_h / self.h + 0.08; + var scale = self.scale = w_s > h_s ? w_s : h_s; + var tra = getTransform()[0]; + self.animBox.attr("style", ""); + self.imgBox.attr("style", ""); + var boxSty = { + "width": self.w, + "height": self.h + }; - boxSty[tra] = "scale(" + scale + "," + scale + ")"; - self.animBox.css(boxSty); - var imgSty = {}; - imgSty[tra] = "scale(" + scale + "," + scale + ")"; - self.imgBox.css(imgSty); - if (w_s > h_s) { - self.animBox.css({"margin-top": (self.p_h - self.h * w_s) / 2,"margin-left":(self.p_w - self.w * w_s) / 2}); - self.imgBox.css({"margin-top": (self.p_h - self.h * w_s) / 2-(1-scale)*self.h/2,"margin-left":(self.p_w - self.w * w_s) / 2-(1-scale)*self.w/2}); - } else { - self.animBox.css({"margin-left": (self.p_w - self.w * h_s) / 2,"margin-top": (self.p_h - self.h * h_s) / 2}); - self.imgBox.css({"margin-left": (self.p_w - self.w * h_s) / 2-(1-scale)*self.w/2,"margin-top": (self.p_h - self.h * h_s) / 2-(1-scale)*self.h/2}); - } + boxSty[tra] = "scale(" + scale + "," + scale + ")"; + self.animBox.css(boxSty); + var imgSty = {}; + imgSty[tra] = "scale(" + scale + "," + scale + ")"; + self.imgBox.css(imgSty); + if (w_s > h_s) { + self.animBox.css({ + "margin-top": (self.p_h - self.h * w_s) / 2, + "margin-left": (self.p_w - self.w * w_s) / 2 + }); + self.imgBox.css({ + "margin-top": (self.p_h - self.h * w_s) / 2 - (1 - scale) * self.h / 2, + "margin-left": (self.p_w - self.w * w_s) / 2 - (1 - scale) * self.w / 2 + }); + } else { + self.animBox.css({ + "margin-left": (self.p_w - self.w * h_s) / 2, + "margin-top": (self.p_h - self.h * h_s) / 2 + }); + self.imgBox.css({ + "margin-left": (self.p_w - self.w * h_s) / 2 - (1 - scale) * self.w / 2, + "margin-top": (self.p_h - self.h * h_s) / 2 - (1 - scale) * self.h / 2 + }); + } }, - start: function () { - var self = this; - //self.addBg(); - //setTimeout(self.addLine,500); - self.addLine() - + start: function() { + this.addLine(); }, - glowLine:function (line,w,h,color){ - w=w||0,h=h||0; - var r=w/2||h/2; - var glBox=new C.Container(); - var Line=new C.Shape(); - var glow=new C.Shape(); + glowLine: function(line, w, h, color) { + w = w || 0, h = h || 0; + var r = w / 2 || h / 2; + var glBox = new C.Container(); + var Line = new C.Shape(); + var glow = new C.Shape(); glBox.addChild(glow); glBox.addChild(Line); - glow.alpha=.3; + glow.alpha = .3; var blurFilter = new C.BlurFilter(3, 3, 10); glow.filters = [blurFilter]; var bounds = blurFilter.getBounds(); - if(w){ - Line.graphics.ss(line,"round").rs(color,[0,1],r,h,0,r,h,r).mt(0,0).lt(w,h); - glow.graphics.ss(line+4,"round").rs(color,[0,1],r,h,0,r,h,r).mt(0,0).lt(w,h); - glow.cache(bounds.x, bounds.y-2, w+bounds.width, line+bounds.height); - }else{ - Line.graphics.ss(line,"round").rs(color,[0,1],w,r,0,w,r,r).mt(0,0).lt(w,h); - glow.graphics.ss(line+4,"round").rs(color,[0,1],w,r,0,w,r,r).mt(0,0).lt(w,h); - glow.cache(bounds.x-2, bounds.y, line+bounds.width, h+bounds.height); + if (w) { + Line.graphics.ss(line, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h); + glow.graphics.ss(line + 4, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h); + glow.cache(bounds.x, bounds.y - 2, w + bounds.width, line + bounds.height); + } else { + Line.graphics.ss(line, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h); + glow.graphics.ss(line + 4, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h); + glow.cache(bounds.x - 2, bounds.y, line + bounds.width, h + bounds.height); } return glBox; }, - addMouseAnim:function (){ - var self=this,img_x=self.imgBox; - $("body").bind("mousemove",function (e){ - var _x=-(e.pageX-$(this).width()/2)/40;//,_y= -(e.pageY-$(this).height()/2)/35; - if(_x>self.w*.04){ - _x=self.w*.04 + addMouseAnim: function() { + var self = this, + img_x = self.imgBox; + $("body").bind("mousemove", function(e) { + var _x = -(e.pageX - $(this).width() / 2) / 40; //,_y= -(e.pageY-$(this).height()/2)/35; + if (_x > self.w * .04) { + _x = self.w * .04 } - T.set(self.imgBox,{scale:self.scale,transformPerspective:400}); - T.killTweensOf(self.imgBox,true); - var tobj={}; - if(navigator.userAgent.indexOf('Firefox') >= 0){ - tobj.x=_x - }else{ - tobj.x=_x; - tobj.rotationY=_x/60; + T.set(self.imgBox, { + scale: self.scale, + transformPerspective: 400 + }); + T.killTweensOf(self.imgBox, true); + var tobj = {}; + if (navigator.userAgent.indexOf('Firefox') >= 0) { + tobj.x = _x + } else { + tobj.x = _x; + tobj.rotationY = _x / 60; } - T.to(self.imgBox,.5,tobj); + T.to(self.imgBox, .5, tobj); }) }, - endTween:function (){ - var self=bannerAnim; - T.to(self.animBox,.5,{alpha:0,onComplete:function (){ - self.animBox.remove(); - self.addMouseAnim() - }}); + endTween: function() { + var self = bannerAnim; + T.to(self.animBox, .5, { + alpha: 0, + onComplete: function() { + self.animBox.remove(); + self.addMouseAnim() + } + }); self.imgBox.removeClass("fn-alpha-out") - self.imgBox.css("opacity",1); + self.imgBox.css("opacity", 1); }, - textTween:function (){ - var self=this; + textTween: function() { + var self = this; self.txtBox.removeClass("fn-hide"); - for(var i=0;i0){ - for(var j=0;j 0) { + for (var j = 0; j < self.lineData[i].circ.length; j++) { + var circ = new C.Shape(); + circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ[j].x + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].y + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].r / 2); lineBox.addChild(circ); - T.from(circ,.5,{alpha:0}) + T.from(circ, .5, { + alpha: 0 + }) } - } - else{ - var circ=new C.Shape(); - circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x+self.lineData[i].circ.r/2,self.lineData[i].circ.y+self.lineData[i].circ.r/2,self.lineData[i].circ.r/2); + } else { + var circ = new C.Shape(); + circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x + self.lineData[i].circ.r / 2, self.lineData[i].circ.y + self.lineData[i].circ.r / 2, self.lineData[i].circ.r / 2); lineBox.addChild(circ); - T.from(circ,.5,{alpha:0}) + T.from(circ, .5, { + alpha: 0 + }) } - if(end_num>=self.lineData.length){ - setTimeout(self.endTween,500) + if (end_num >= self.lineData.length) { + setTimeout(self.endTween, 500) } } - function tween(line,obj,i,j,lineBox,arr){ - var t=obj; - t.alpha=0; - t.scale=2; - t.ease=Power1.easeOut; - T.to(line,.5,t); - addLine(i,j,lineBox); + + function tween(line, obj, i, j, lineBox, arr) { + var t = obj; + t.alpha = 0; + t.scale = 2; + t.ease = Power1.easeOut; + T.to(line, .5, t); + addLine(i, j, lineBox); arr.push(j); - a_lineBox[i]=arr; - if(a_lineBox[i].length>=4){ - addCirc(i,lineBox) + a_lineBox[i] = arr; + if (a_lineBox[i].length >= 4) { + addCirc(i, lineBox) } } - for(var i=0;iul"); - if (!self.listBox.length) { + this.listBox = $(".aside-container>ul"); + if (!this.listBox.length) { return; } - self.getUrlNum(); - //添加标题事件； - self.addTitleEvent(); + this.getUrlNum(); + this.addTitleEvent(); }, getUrlNum: function() { var self = this, url = location.href, str = ""; - //console.log(self.listBox.find("a")) for (var i = 0; i < self.listBox.find("a").length; i++) { var m = self.listBox.find("a").eq(i); if (m.attr("href") == "./" || url.indexOf(m.attr("href")) >= 0) { diff --git a/site/static/style.css b/site/static/style.css index 0b9a29420b..63a8ca4240 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -158,18 +158,18 @@ a.logo { } .nav { - width: 30%; height: 80px; line-height: 80px; float: right; font-size: 0.875em; position: relative; margin-right: 25px; + overflow: hidden; } .nav ul li { float: left; - width: 20%; + padding: 0 22px; text-align: center; } @@ -187,13 +187,13 @@ a.nav-link-disabled { } .nav ul li.current a { - color: #71B5DE; + color: #6AC2F5; font-weight: 600; } .nav ul li a:hover, .nav ul li .hover { - color: #6EB4E0; + color: #6AC2F5; } .nav .bar { @@ -202,12 +202,9 @@ a.nav-link-disabled { position: absolute; top: 0; left: 0; - background: #6EB4E0; + background: #6AC2F5; display: none; -} - -.barAnim { - transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1); + transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1), width 1.5s cubic-bezier(0.075, 0.82, 0.165, 1); } .main-box { diff --git a/site/templates/layout.html b/site/templates/layout.html index 1cf0645c7e..0c9f28aba7 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -67,11 +67,8 @@
  • 设计
    • -
  • - 案例 -
  • - React + React UI
  • Github -- GitLab