zoukankan      html  css  js  c++  java
  • 侧边栏悬浮

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style>
     7             #div1{width: 100px; height: 150px;background-color:red;position: absolute;
     8             right:0;bottom: 0;}
     9 
    10         </style>
    11         <script>
    12             window.onload=window.onscroll=function(){
    13                 var oDiv=document.getElementById('div1');
    14                 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    15 
    16                 // oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetLeft+scrollTop)/2+'px';
    17 
    18                 startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
    19             }
    20 
    21             var timer=null;
    22             function startMove(iTarget){
    23                 var oDiv=document.getElementById('div1');
    24 
    25                 clearInterval(timer);
    26                 timer=setInterval(function(){
    27                     var speed=(iTarget-oDiv.offsetTop)/4;
    28                     speed=speed>0?Math.ceil(speed):Math.floor(speed);
    29                     if(oDiv.offsetTop==iTarget){
    30                         clearInterval(timer);
    31                     }
    32                     else{
    33                         document.title=oDiv.offsetTop;
    34                         document.getElementById('txt1').value=oDiv.offsetTop;
    35                         oDiv.style.top=oDiv.offsetTop+speed+'px';
    36                     }
    37                 },30)
    38             }
    39         </script>
    40     </head>
    41     <body style="height: 2000px;">
    42         <input type="text" id="txt1" style="position: fixed;right: 0; top: 0;" />
    43         <div id="div1">
    44         </div>
    45     </body>
    46 </html>
    View Code
  • 相关阅读:
    Python 反射
    Python 类描述符-Descriptor
    Python 面向对象三大特性-多态
    Python 面向对象三大特性-继承
    Python 面向对象三大特性-封装
    面向对象编程
    python之mysqldb模块安装
    Redis应用-分布式锁
    ide phpStorm使用git的命令行工具
    mysql中用命令行复制表结构(数据)
  • 原文地址:https://www.cnblogs.com/shangec/p/12792274.html
Copyright © 2011-2022 走看看