js基础动画-1（页面左侧的分享动画）

最新推荐文章于 2022-09-25 22:08:41 发布

清何以解忧

最新推荐文章于 2022-09-25 22:08:41 发布

阅读量183

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_41159720/article/details/105076370

版权

本文介绍了使用JavaScript创建基础动画的技巧，通过setInterval实现定时器，结合onmouseover和onmouseout事件监听鼠标移入移出。利用对象的style.left属性和offsetLeft属性动态调整元素位置，实现页面左侧的分享动画效果。在移动端，可通过引入rem.js将px转换为rem实现自适应。同时，文中强调了clearInterval的重要性，以避免多个定时器同时运行造成的问题，并提出函数封装和speed判断的思考。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js基础动画</title>
    <style type="text/css">
        body,div,span {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            position: relative;
            left: -200px;
            top: 0;
        }
        #div1 span {
            width: 20px;
            height: 50px;
            background: blue;
            position: absolute;
            left: 200px;
            top: 75px;
        }
    </style>
</head>
<body>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById("div1");
            oDiv.onmouseover = function () {
                move(0);
            }
            oDiv.onmouseout = function () {
                move