From: yamat0jp Date: Wed, 21 Dec 2016 11:43:21 +0000 (+0900) Subject: scroll sqript X-Git-Url: http://git.osdn.net/view?a=commitdiff_plain;h=f44e693eb7f97d26ce0a9acadedcb5957a880c15;p=pybbs%2Fpybbs.git scroll sqript --- diff --git a/pybbs/modules/index.htm b/pybbs/modules/index.htm index 960dc82..eacdfb3 100755 --- a/pybbs/modules/index.htm +++ b/pybbs/modules/index.htm @@ -14,12 +14,7 @@ - + {% block header %} @@ -43,6 +38,7 @@ +

diff --git a/static/css/main.css b/static/css/main.css index 2537971..ea149ab 100755 --- a/static/css/main.css +++ b/static/css/main.css @@ -35,7 +35,8 @@ header { border-radius:5px; background:-webkit-linear-gradient(#ffffff 0%,#014471 50%, #014471 51%,#ffffff 100%); - overflow:hidden + overflow:hidden; + width:100% } header table { @@ -51,6 +52,12 @@ header textarea { height:150px; } +button { + position:fixed; + width:80px; + height:30px +} + input[type=password] { width:55px } diff --git a/static/js/main.js b/static/js/main.js index 2f1bf48..57e49fd 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,15 +1,10 @@ -var -arg = { - 'font-size':'2em', - 'transform':'rotate(5deg)' -}; $(function(){ $('div').on('click',function(){ var $title = $(this), span1 = 1500, span2 = 200; - $title.css(arg); + $title.css('font-size','2em'); $({deg:5}).animate({deg:365},{ duration:500, progress:function(){ diff --git a/static/js/sub.js b/static/js/sub.js new file mode 100644 index 0000000..d3904f1 --- /dev/null +++ b/static/js/sub.js @@ -0,0 +1,64 @@ + +$(function(){ + $('.livepreview').livePreview({position:'top'}); + $('.minpreview').livePreview({scale:1,viewWidth:900,viewHeight:600}); + + var $window = $(window), + $header = $('header'), + $button = $header.find('button'), + $headerClone = $header.contents().clone(), + $headerCloneContainer = $('

'), + $clonebutton = $headerCloneContainer.find('button'), + headerOffsetTop = $header.offset().top, + headerHeight = $header.outerHeight(); + + $button.on('click',function(){ + $headerCloneContainer + .css({ + 'opacity':1, + 'top':-$window.scrollTop() + }) + .animate({top:0},300); + $header.addClass('open'); + }); + $headerCloneContainer.append($headerClone); + $headerCloneContainer.appendTo('body'); + $headerCloneContainer + .css({'opacity':0}) + .on('animate',function(){ + $clonebutton.css({ + top:$headerCloneContainer.attr('top')+headerHeight + }); + }); + $headerCloneContainer.find('button') + .on('click',function(){ + var wintop = $window.scrollTop(); + + if ($header.hasClass('open')){ + if (wintop < headerOffsetTop+headerHeight){ + $headerCloneContainer + .animate({top:-wintop+headerOffsetTop},300) + .animate({opacity:0},0); + } + }else{ + $headerCloneContainer + .css({top:-wintop+headerOffsetTop}) + .animate({top:0},300); + }; + $header.toggleClass('open'); + }); + $window.on('scroll',function(){ + var wintop = $window.scrollTop(); + + if (wintop > headerOffsetTop+headerHeight){ + $headerCloneContainer.css({opacity:1}); + $clonebutton.css({top:0}); + if ($headerCloneContainer.hasClass('open') && (wintop < headerOffsetTop)){ + + }; + }else{ + $clonebutton.css({'opacity':0}); + }; + $button.css({'top':-wintop+headerOffsetTop+headerHeight}); + }); +}); \ No newline at end of file