OSDN Git Service

(root) / pybbs / pybbs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 8aed270)
scroll sqript
authoryamat0jp <yamat0jp@yahoo.co.jp>
Wed, 21 Dec 2016 11:43:21 +0000 (20:43 +0900)
committeryamat0jp <yamat0jp@yahoo.co.jp>
Wed, 21 Dec 2016 11:43:21 +0000 (20:43 +0900)
pybbs/modules/index.htm patch | blob | history
static/css/main.css patch | blob | history
static/js/main.js patch | blob | history
static/js/sub.js [new file with mode: 0644] patch | blob

diff --git a/pybbs/modules/index.htm b/pybbs/modules/index.htm
index 960dc82..eacdfb3 100755 (executable)
--- a/pybbs/modules/index.htm
+++ b/pybbs/modules/index.htm
@@ -14,12 +14,7 @@
        <script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js></script>
        <script type=text/javascript src={{static_url('js/jquery-live-preview.js')}}></script>
        <link rel=stylesheet href={{static_url('css/livepreview-demo.css')}}>
-       <script type=text/javascript>
-       $(function(){
-               $('.livepreview').livePreview({position:'top'});
-               $('.minpreview').livePreview({scale:1,viewWidth:900,viewHeight:600});
-       });
-       </script>
+       <script type=text/javascript src={{static_url('js/sub.js')}}></script>
   </head> 
   <body>
   {% block header %}
@@ -43,6 +38,7 @@
         </td></tr>
       </table>
     </form>
+    <button>open</button>
     </header>
     <hr size="1" width="100%">
     <form action=/{{db}}/userdel method="post" id=search>
diff --git a/static/css/main.css b/static/css/main.css
index 2537971..ea149ab 100755 (executable)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -35,7 +35,8 @@ header {
     border-radius:5px;\r
     background:-webkit-linear-gradient(#ffffff 0%,#014471 50%,\r
         #014471 51%,#ffffff 100%);\r
-    overflow:hidden\r
+    overflow:hidden;\r
+    width:100%\r
 }\r
 \r
 header table {\r
@@ -51,6 +52,12 @@ header textarea {
     height:150px;\r
 }\r
 \r
+button {\r
+       position:fixed;\r
+       width:80px;\r
+       height:30px\r
+}\r
+\r
 input[type=password] {\r
     width:55px\r
 }\r
diff --git a/static/js/main.js b/static/js/main.js
index 2f1bf48..57e49fd 100644 (file)
--- 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 (file)
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 = $('<div class=clone style=position:fixed></div>'),
+               $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
無料の掲示板
About OSDN
Find Software
Develop Software
Help