原生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>

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: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-&gt;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声明...

随便推点

mysql5.5 utf8mb4_MySQL5.5将字符集从utf8升级为utf8mb4_statPt-67的博客-程序员宅基地

MySQL默认的utf8只支持三字节字符,不支持Emoji表情符(四字节),如果有四字节的字符写入会报错。从MySQL 5.5开始,提供了utf8mb4,支持四字节的字符。许多使用iphone的用户来在填写昵称的时候会加入Emoji表情符,如果MySQL没有使用utf8mb4字符集,这样的昵称信息就无法写入。一、升级前。mysql&gt; SHOW VARIABLES LIKE 'characte...

USB基础知识扫盲_爱出名的狗腿子的博客-程序员宅基地

USB基础知识扫盲文章汇总1 STM32-USB学习笔记(一) USB基础链接地址:https://segmentfault.com/a/1190000015995506特点:通俗易懂,上手容易,阅读排斥性较低,但是对于深层次的电气层信号没有详细描述评价:2 USB协议简介链接地址:https://blog.csdn.net/songze_lee/article/details/77658094特点:对usb协议电气层信号有详细描述, 但是阅读难度高,有些知识点描述的不是特别全面

手写logback_logback日志写入mysql自定义表_耷耷的博客-程序员宅基地

1,创建springboot项目(同上)2,pom中添加配置(同上)3,logback 中 ch.qos.logback.classic.db 包下的所有源代码 主要这下边的源码看看4,重写 DBAppender 类package com.liudandan.logbackmysql.controller.config;import ch.qos.logback.classic.spi.*;imp...

windows7内存诊断工具有用吗_win7系统windows内存诊断工具的操作方法_一个很无聊的人的博客-程序员宅基地

无论谁在使用电脑的时候都可能会发现windows内存诊断工具的问题,windows内存诊断工具让用户们很苦恼,这是怎么回事呢,windows内存诊断工具有什么简便的处理方式呢,其实只要依照1、首先在win7纯净版32位系统下我们打开“开始——控制面板”,接着大家把“控制面板”里的“查看方式”直接设置成“大图标”状态,其次我们找到“管理工具”点击进入。 2、在系统弹出的新面板里,我们直接选定“win...

java log4j 性能_java – 使用slf4j和log4j与单独使用log4j有任何性能开销吗?_佚执的博客-程序员宅基地

我正在考虑将java 1.4.2项目从log4j迁移到slf4j.这是参数化日志记录和代码清晰度的优点(不需要log.isdebug ..)这让我想到了这样的考虑.是否有转换为slf4j的性能开销?上次我检查是否可以使用logback时,它对jdk有一个要求,它要求它至少为1.5,这就是我考虑slf4j和log4j的原因.解决方法:There exists a very convenient al...

iOS textfield实现一行的数字限制,超出进行弹框_weixin_30815469的博客-程序员宅基地

步骤一:添加textfield协议‘@interface LsGeXingQianMingVC ()&lt;UITextFieldDelegate&gt;步骤2:设置代理 _GeXingQianMingTiefield.delegate = self;步骤3:实现协议- (BOOL)textField:(UITextField *)textFie...

推荐文章

热门文章

相关标签