zoukankan      html  css  js  c++  java
  • 匀速展开(侧边分享的效果)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                100px;
                height: 200px;
                background: red;
                position: relative;
                top:300px;
                left:-100px;
            }
            span{
                30px;
                height: 80px;
                position: absolute;
                left: 100px;
                top:60px;
                border:1px solid black;
                text-align: center;
                line-height: 25px;
                
            }
        </style>
        <body>
            <div><span>分享到</span></div>
        </body>
    </html>

    <script>
         var oDiv = document.querySelector("div");
         var timer = null;
         oDiv.onmouseover = function(){
            startMove( 0 );
         }
         oDiv.onmouseout = function(){
            startMove( -100 );
         }
        
         function startMove(target){
            clearInterval( timer );
            timer = setInterval( function(){
                var speed = target - oDiv.offsetLeft>0 ? 5 : -5;
                if( oDiv.offsetLeft === target ){
                    clearInterval( timer );
                }else{
                    oDiv.style.left = oDiv.offsetLeft + speed + "px";
                }
            },30 )
        }
    </script>
  • 相关阅读:
    使用NetHogs监控进程网络使用情况
    ssh连接超慢解决
    Dnsmasq安装与配置-搭建本地DNS服务器
    解决rpm conflicts with file from package的两个方法
    shell中的crontab定时任务
    hive函数大全
    hive的高级查询(group by、 order by、 join 、 distribute by、sort by、 clusrer by、 union all等)
    sql中的case when then else end
    hive向表格中插入数据并分析语句
    将数据导入hive,再将hive表导入hbase
  • 原文地址:https://www.cnblogs.com/tis100204/p/10328772.html
Copyright © 2011-2022 走看看