分享到动画弹出框

最新推荐文章于 2022-07-09 11:43:55 发布

liugang0605

最新推荐文章于 2022-07-09 11:43:55 发布

阅读量294

点赞数

分类专栏： js 定时器动画文章标签： js 弹窗定时器节流

本文链接：https://blog.csdn.net/power8988/article/details/77461023

版权

js 同时被 3 个专栏收录

113 篇文章 2 订阅

订阅专栏

动画

10 篇文章 0 订阅

订阅专栏

定时器

5 篇文章 0 订阅

订阅专栏

以下是简单的一个小动画；
效果如下：
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 100px;
            height: 200px;
            background: #ddd;
            position: absolute;
            left: -100px;
            top: 0;
        }

        #div1 span {
            width: 20px;
            height: 60px;
            line-height: 20px;
            text-align: center;
            left: 100px;
            position: absolute;
            top: 70px;
            background: yellow;
        }
    </style>
</head>
<body>
<div id="div1">
    <span>分享到</span>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
    window.onload = function () {
        var oDiv = document.getElementById("div1");
        oDiv.onmouseover = function () {
            startMove( 0)
        };
        oDiv.onmouseout = function () {
            startMove( -100)
        }
    }
    var timer;
    function startMove( tar) {
        var oDiv = document.getElementById("div1");
        clearInterval(timer);
        timer = setInterval(function () {
            var v = oDiv.offsetLeft<tar?10:-10;
            var t = tar;
            if (oDiv.offsetLeft == tar) {
                clearInterval(timer)
            } else {
                oDiv.style.left = oDiv.offsetLeft + v + "px";
            }
        }, 30)
    }
</script>
</body>
</html>

这里也解决了以前动画的一些问题；
弹窗大片空白，很难看，所以加了一些内容；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        #div1 {
            width: 100px;
            height: 200px;
            background: #ddd;
            position: absolute;
            left: -100px;
            top: 0;
        }
        #div1 span {
            width: 20px;
            height: 60px;
            line-height: 20px;
            text-align: center;
            left: 100px;
            position: absolute;
            top: 70px;
            background: yellow;
        }
        ul{
            width:100%;
            list-style:none;
            display:flex;
            flex-direction:column;
        }
        ul>li{
            width:100%;
            height:20px;
            line-height:20px;
            border:1px solid #aaa;
            background:purple;
            text-align: center;
        }
        ul li a{
            color:#fff;
        }
    </style>
</head>
<body>
<div id="div1">
    <ul>
        <li><a href="">分享1</a></li>
        <li><a href="">分享2</a></li>
        <li><a href="">分享3</a></li>
        <li><a href="">分享4</a></li>
        <li><a href="">分享5</a></li>
        <li><a href="">分享6</a></li>
        <li><a href="">分享7</a></li>
        <li><a href="">分享8</a></li>
        <li><a href="">分享9</a></li>
        <li><a href="">分享10</a></li>
    </ul>
    <span>分享到</span>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
    window.onload = function () {
        var oDiv = document.getElementById("div1");
        oDiv.onmouseover = function () {
            startMove( 0)
        };
        oDiv.onmouseout = function () {
            startMove( -100)
        }
    }
    var timer;
    function startMove( tar) {
        var oDiv = document.getElementById("div1");
        clearInterval(timer);
        timer = setInterval(function () {
            var v = oDiv.offsetLeft<tar?10:-10;
            var t = tar;
            if (oDiv.offsetLeft == tar) {
                clearInterval(timer)
            } else {
                oDiv.style.left = oDiv.offsetLeft + v + "px";
            }
        }, 30)
    }
</script>
</body>
</html>

测试了chrome/opera/safari/firfox/ie9+;可以使用；
这里写图片描述

liugang0605

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
分享到动画弹出框

以下是简单的一个小动画；效果如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 100px; height: 200px;
复制链接

扫一扫