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>
  • 相关阅读:
    PDF数据提取------2.相关类介绍
    Google搜索的常用技巧
    a helper class for generating xls or csv file
    正则 提取html标签value
    获取 windows地址栏 网页地址栏 文件名
    MSSQL将逗号分隔的字符串转换成列显示
    C# String.Format字符串中包含"{" "}"时需注意的问题
    格式化JSON中时间
    Oracle 10G创建表空间
    Sqlserver取最近一分组中最新一条记录
  • 原文地址:https://www.cnblogs.com/tis100204/p/10328772.html
Copyright © 2011-2022 走看看