原生JS匀速运动案例_温壁-程序员宅基地

技术标签： JavaScript

1、匀速运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匀速运动</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    #btn{padding: 10px 20px;background: #f5f5f5;border:1px solid #ddd;display: inline-block;margin: 5px;border-radius: 5px;font-size: 14px;box-sizing: border-box;cursor: pointer;}
    #box{width: 80px;height: 60px;background: pink;position: absolute;top: 50px;left: 5px;}
</style>
<body>
    <div id="btn">开启动画</div>
    <div id="box"></div>
</body>
<script>
    window.onload = () => {
        const btnElem = document.getElementById("btn");
        const boxElem = document.getElementById("box");
        let timer = null;
        let obj = {
            btnElem,
            boxElem,
            timer,
            boundary:1000,
            speed:1
        }
        btnElem.onclick = () => {
            velocity.apply(obj);
        }
    }
    function velocity(){
        this.timer && clearInterval(this.timer);//每次点击先清除定时器
        this.timer = setInterval(() => {
            if(this.boxElem.offsetLeft >= this.boundary){//当达到临界值时
                clearInterval(this.timer);
                return;
            }
            this.boxElem.style.left = this.boxElem.offsetLeft + this.speed + "px";
        }, 5);
    }
</script>
</html>

2、侧边栏效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏效果</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    body,html{width: 100%;height: 100%;}
    .main{
        width: 100%;height: 100%;position: relative;
    }
    #box{
        width: 240px;height: 100%;background: #333;position: absolute;left: -200px;top: 0;
    }
</style>
<body>
    <div class="main">
        <div id="box"></div>
    </div>
</body>
<script>
    window.onload = () => {
        const boxElem = document.getElementById("box");
        let timer = null;
        const obj = {
            boxElem,
            timer
        }
        cardFunc.apply(obj);
    }
    function cardFunc(){
        this.boxElem.onmouseover = () => {
            velocity(this,1,0);
        }
        this.boxElem.onmouseout = () => {
            velocity(this,-1,-200);
        }
    }
    function velocity(that,speed,boundary){
        that.timer && clearInterval(that.timer);
        that.timer = setInterval(() => {
            if(that.boxElem.offsetLeft === boundary){
                clearInterval(that.timer);
                return;
            }
            that.boxElem.style.left = that.boxElem.offsetLeft + speed + "px";
        }, 1);
    }
</script>
</html>

本文链接：https://blog.csdn.net/Ag_wenbi/article/details/109577360

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

10个办法让设计小白迅速get海报设计要点！_码农王也的博客-程序员宅基地

对于设计师而言，海报和宣传单的设计，几乎是每一个设计师的必修课。如今网页上的 Banner、宣传和促销的数字海报，大多脱胎于我们所熟知的海报设计。对于推销产品、连接客户，海报始终是一种最为有趣和实用的展现形式，很多优秀的海报不仅呈现了信息，而且还能顺带做一些有趣的事情。海报是经典，海报也贴合当下的许多设计的需求。想要设计好海报需要注意哪些问题呢？今天的文章，我们来分享10个非常...

TCP/IP详解学习笔记(3)-IP协议，ARP协议，RARP协议 ._dadizhiying1215的博客-程序员宅基地

把这三个协议放到一起学习是因为这三个协议处于同一层，ARP协议用来找到目标主机的Ethernet网卡Mac地址，IP则承载要发送的消息。数据链路层可以从ARP得到数据的传送信息，而从IP得到要传输的数据信息。1.IP协议IP协议是TCP/IP协议的核心，所有的TCP，UDP，IMCP，IGCP的数据都以IP数据格式传输。要注意的是，IP不是可靠的协议，这是说，IP协议没有提供一种数据未传达

env java_env->GetFieldID 参数含义_TrulyInnocent的博客-程序员宅基地

在Jni01的Java_com_test01_Test_firstTest方法中写如下代码：JNIEXPORT void JNICALL Java_com_test01_Test_firstTest(JNIEnv * env, jobject obj){jclass class_Test=env->GetObjectClass(obj);//注释(1)jfieldID fid_ms...

CentOS7yum安装mariadb及配置_wo1769815的博客-程序员宅基地

1、安装MariaDB安装命令yum -y install mariadb mariadb-server安装完成MariaDB，首先启动MariaDBsystemctl start mariadb设置开机启动systemctl enable mariadb接下来进行MariaDB的相关简单配置mysql_secure_installa

LeetCode a Day（六）——剑指offer 09.用两个栈实现队列_CSU_DEZ的博客-程序员宅基地

剑指offer 09.用两个栈实现队列题目描述：用两个栈实现一个队列。队列的声明如下，请实现它的两个函数 appendTail 和 deleteHead ，分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素，deleteHead 操作返回 -1 )示例1：输入：[“CQueue”,“appendTail”,“deleteHead”,“deleteHead”][[],[3],[],[]]输出：[null,null,3,-1]示例2：输入：[“CQue

ARM NEON优化6.GCC汇编指令的使用_亦梦云烟的博客-程序员宅基地_arm gcc 优化

C/C++代码最终都是被编译成汇编代码然后翻译成机器指令，编译器一般都会对代码进行优化，但往往优化的效果不是最高效的。针对最核心的计算部分仍然需要使用汇编指令编写。在程序中使用汇编一般有三种方式：1.使用汇编源码，一般为.s文件，定义汇编函数，这种方式比较繁琐，需要用户自己维护栈，很容易出错。2.GCC内嵌汇编，由__asm__关键字定义汇编代码，嵌入在C/C++函数内部。一般使用第二种方式进行优化性能计算部分代码，本文介绍如何在GCC中嵌入ARM汇编。GCC ASM声明...