JS特效：跟随鼠标移动的小飞机

前端网页中，用JS实现鼠标移动时，页面中的小飞机向着鼠标移动。

效果

源码

<!DOCTYPE html>
<html>
 
<head>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        height: 100vh;
        background: linear-gradient(200deg,#005bea,#00c6fb);
    }
    #plane{
        color: #fff;
        font-size: 70px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    </style>
</head>
 
<body>
    <div id="plane">
        <i aria-hidden="true">✈</i>
    </div>
    <script>
        var plane=document.getElementById('plane');
        var deg=0,ex=0,ey=0,vx=0,vy=0,count=0;
        window.addEventListener('mousemove',(e)=>{
            ex=e.pageX-plane.offsetLeft-plane.clientWidth/2;
            ey=e.pageY-plane.offsetTop-plane.clientHeight/2;
            deg=360*Math.atan(ey/ex)/(2*Math.PI)+5;
            if(ex<0){
                deg+=180;
            }
            count=0;
        })
        function draw(){
            plane.style.transform='rotate('+deg+'deg)';
            if(count<100){
                vx+=ex/100;
                vy+=ey/100;
            }
            plane.style.left=vx+'px';
            plane.style.top=vy+'px';
            count++;
        }
        setInterval(draw,1);
    </script>
</body>
 
</html>

实现的原理是：当鼠标在网页中移动时，获取鼠标位置，同时设置飞机指向、并移动飞机位置，直至飞机到达鼠标位置。

重点代码是mousemove事件接管函数和移动飞机位置函数draw。

window.addEventListener('mousemove',(e)=>{
    ex=e.pageX-plane.offsetLeft-plane.clientWidth/2;
    ey=e.pageY-plane.offsetTop-plane.clientHeight/2;
    deg=360*Math.atan(ey/ex)/(2*Math.PI)+5;
    if(ex<0){
        deg+=180;
    }
    count=0;
})
function draw(){
    plane.style.transform='rotate('+deg+'deg)';
    if(count<100){
        vx+=ex/100;
        vy+=ey/100;
    }
    plane.style.left=vx+'px';
    plane.style.top=vy+'px';
    count++;
}

由代码中即可知道实现逻辑。如果想独自享用此功能，不想让他人知道原理、不想被他人修改，可以将核心JS代码进行混淆加密。

比如用JShaman对上述JS代码加密。

加密后的代码，会成为以下形式，使用起来还跟加密前一样。

window.addEventListener('mousemove',(e)=>{
(function(_0x5e2a74,_0x3d2559){var _0x5e2331=_0x5e2a74();function _0x4514c1(_0x56e61e,_0x24cc3c,_0xced7a6,_0x2eee50,_0x30fa4e){return _0xc941(_0xced7a6- -0x94,_0x2eee50);}function _0x447b09(_0x2bf694,_0x3c6d87,_0x2bfc91,_0x14456b,_0x28fe70){return _0xc941(_0x3c6d87- -0x3b,_0x28fe70);}function _0x12756f(_0x58c768,_0x1cd95f,_0x188173,_0x5baeba,_0x59fb94){return _0xc941(_0x1cd95f- -0x32b,_0x5baeba);}function _0x3c2cef(_0x3a3ce5,_0x274c07,_0x15ea13,_0x4aa242,_0x449d14){return _0xc941(_0x274c07- -0x1f6,_0x4aa242);}function _0x5516f2(_0x51af28,_0x27889e,_0x34f94f,_0x3756b4,_0x34e9e7){return _0xc941(_0x51af28-0x6e,_0x34e9e7);}while(!![]){try{var _0x1361cf=parseInt(_0x12756f(-0x31f,-0x322,-0x31b,-0x324,-0x319))/0x1*(-parseInt(_0x12756f(-0x330,-0x329,-0x333,-0x322,-0x326))/0x2)+-parseInt(_0x3c2cef(-0x1f0,-0x1f2,-0x1e9,-0x1f1,-0x1f2))/0x3*(-parseInt(_0x4514c1(-0x85,-0x83,-0x8c,-0x8a,-0x96))/0x4)+-parseInt(_0x5516f2(0x79,0x7f,0x72,0x71,0x73))/0x5*(-parseInt(_0x447b09(-0x44,-0x3b,-0x42,-0x38,-0x3b))/0x6)+parseInt(_0x4514c1(-0x88,-0x8a,-0x8d,-0x97,-0x88))/0x7*(-parseInt(_0x4514c1(-0x8b,-0x88,-0x91,-0x8f,-0x8c))/0x8)+parseInt(_0x447b09(-0x25,-0x28,-0x24,-0x30,-0x2e))/0x9*(-parseInt(_0x4514c1(-0x7c,-0x83,-0x85,-0x7d,-0x85))/0xa)+-parseInt(_0x5516f2(0x74,0x74,0x71,0x7b,0x79))/0xb+-parseInt(_0x4514c1(-0x8c,-0x95,-0x8f,-0x91,-0x91))/0xc*(-parseInt(_0x447b09(-0x2c,-0x2a,-0x29,-0x22,-0x23))/0xd);if(_0x1361cf===_0x3d2559){break;}else{_0x5e2331["\u0070\u0075\u0073\u0068"](_0x5e2331["\u0073\u0068\u0069\u0066\u0074"]());}}catch(_0x12462f){_0x5e2331["\u0070\u0075\u0073\u0068"](_0x5e2331["\u0073\u0068\u0069\u0066\u0074"]());}}})(_0x2138,0x5eefa);function _0x2138(){var _0x3f76d0=["\u0063\u006c\u0069\u0065\u006e\u0074\u0048\u0065\u0069\u0067\u0068\u0074","\u0063\u006c\u0069\u0065\u006e\u0074\u0057\u0069\u0064\u0074\u0068","JrgkzB035".split("").reverse().join(""),"Xegap".split("").reverse().join(""),"SyQffy23819".split("").reverse().join(""),"poTtesffo".split("").reverse().join(""),"ipqYMm50751".split("").reverse().join(""),"AqmLUY411".split("").reverse().join(""),"\u0070\u0061\u0067\u0065\u0059","xWOaei206".split("").reverse().join(""),"LeZbPZ428".split("").reverse().join(""),"GxweQb21".split("").reverse().join(""),"pskjDZ465".split("").reverse().join(""),"jljclz6152674".split("").reverse().join(""),'26985yqvBrA','301452FNGmnL',"\u0031\u0039\u0031\u006c\u0059\u004b\u004d\u0072\u006d",'offsetLeft',"fSfKNj525391".split("").reverse().join(""),"\u0061\u0074\u0061\u006e"];_0x2138=function(){return _0x3f76d0;};return _0x2138();}ex=e['pageX']-plane['offsetLeft']-plane["\u0063\u006c\u0069\u0065\u006e\u0074\u0057\u0069\u0064\u0074\u0068"]/(0xe2994^0xe2996);ey=e["\u0070\u0061\u0067\u0065\u0059"]-plane["\u006f\u0066\u0066\u0073\u0065\u0074\u0054\u006f\u0070"]-plane["\u0063\u006c\u0069\u0065\u006e\u0074\u0048\u0065\u0069\u0067\u0068\u0074"]/(0xc7c08^0xc7c0a);deg=(0xc5a81^0xc5be9)*Math["\u0061\u0074\u0061\u006e"](ey/ex)/((0x350f1^0x350f3)*Math['PI'])+(0x4ebc3^0x4ebc6);if(ex<(0x7f58a^0x7f58a)){deg+=0x3611b^0x361af;}function _0xc941(_0x20d997,_0x21385e){var _0xc941d=_0x2138();_0xc941=function(_0x1c87e9,_0x16a339){_0x1c87e9=_0x1c87e9-0x0;var _0x1c1df3=_0xc941d[_0x1c87e9];return _0x1c1df3;};return _0xc941(_0x20d997,_0x21385e);}count=0x84c22^0x84c22;
})
function draw(){
(function(_0x228270,_0x49c561){function _0x1a7320(_0x4d8e0a,_0x4a154f,_0x39e417,_0x3351c1,_0x309eea){return _0x38eb(_0x4a154f- -0x390,_0x39e417);}var _0x5708e4=_0x228270();function _0x9be745(_0x32a1,_0x343ed0,_0xb88373,_0x328e52,_0x923750){return _0x38eb(_0xb88373-0x37,_0x923750);}function _0x556527(_0x56c686,_0x3c0b6e,_0x2f3681,_0x32b652,_0x3a844e){return _0x38eb(_0x3a844e-0x356,_0x32b652);}function _0x1cff65(_0x4a8e90,_0x538331,_0x35ecc0,_0x27c079,_0x1ad156){return _0x38eb(_0x35ecc0-0x295,_0x27c079);}function _0x1ca2c5(_0x1ae530,_0x12dbfa,_0xff68f6,_0x370048,_0xcf6eb1){return _0x38eb(_0x1ae530-0x244,_0xcf6eb1);}while(!![]){try{var _0x4d0db3=parseInt(_0x1ca2c5(0x24c,0x247,0x252,0x248,0x252))/0x1*(parseInt(_0x556527(0x35f,0x350,0x35c,0x355,0x358))/0x2)+-parseInt(_0x556527(0x365,0x363,0x360,0x35d,0x35d))/0x3*(-parseInt(_0x556527(0x358,0x358,0x355,0x355,0x35a))/0x4)+-parseInt(_0x1cff65(0x293,0x29c,0x29a,0x293,0x294))/0x5+parseInt(_0x1ca2c5(0x24f,0x24b,0x255,0x248,0x254))/0x6+-parseInt(_0x1ca2c5(0x245,0x240,0x23f,0x248,0x24a))/0x7+-parseInt(_0x556527(0x367,0x362,0x367,0x360,0x360))/0x8+parseInt(_0x556527(0x35a,0x363,0x365,0x35a,0x362))/0x9;if(_0x4d0db3===_0x49c561){break;}else{_0x5708e4["\u0070\u0075\u0073\u0068"](_0x5708e4["\u0073\u0068\u0069\u0066\u0074"]());}}catch(_0x4057b8){_0x5708e4["\u0070\u0075\u0073\u0068"](_0x5708e4["\u0073\u0068\u0069\u0066\u0074"]());}}})(_0x15e5,0x6b59f);function _0x4da06f(_0x10d466,_0x20ab24,_0x408802,_0x869b10,_0x64532e){return _0x38eb(_0x869b10-0x294,_0x20ab24);}plane["\u0073\u0074\u0079\u006c\u0065"]["\u0074\u0072\u0061\u006e\u0073\u0066\u006f\u0072\u006d"]=_0x4da06f(0x297,0x29b,0x299,0x297,0x298)+deg+_0x4da06f(0x2a5,0x2a2,0x2a4,0x2a1,0x29d);function _0x38eb(_0xf88e34,_0x15e593){var _0x38eb7d=_0x15e5();_0x38eb=function(_0x1b2a3d,_0x46bf66){_0x1b2a3d=_0x1b2a3d-0x0;var _0x23a19a=_0x38eb7d[_0x1b2a3d];return _0x23a19a;};return _0x38eb(_0xf88e34,_0x15e593);}if(count<(0xcf802^0xcf866)){vx+=ex/(0xecfb8^0xecfdc);vy+=ey/(0x667f3^0x66797);}function _0x15e5(){var _0x1a56cf=["KMHgjO12".split("").reverse().join(""),"pot".split("").reverse().join(""),"\u0036\u0033\u0034\u0032\u0035\u0036\u0038\u004f\u006d\u0048\u0065\u0055\u0057","\u0034\u0030\u0031\u0038\u0031\u0032\u0032\u0044\u006a\u0057\u006e\u0058\u0043","VmFQAb2646603".split("").reverse().join(""),")ged".split("").reverse().join(""),"elyts".split("").reverse().join(""),"\u0074\u0072\u0061\u006e\u0073\u0066\u006f\u0072\u006d","VgmPeO2141391".split("").reverse().join(""),"kvRLZy63064".split("").reverse().join(""),"(etator".split("").reverse().join(""),"\u0031\u0031\u0032\u0034\u0072\u0055\u0046\u0046\u007a\u007a","TRaCTh0401222".split("").reverse().join(""),"\u006c\u0065\u0066\u0074","oLkDOm9984".split("").reverse().join("")];_0x15e5=function(){return _0x1a56cf;};return _0x15e5();}plane['style']['left']=vx+"\u0070\u0078";plane["\u0073\u0074\u0079\u006c\u0065"]['top']=vy+"xp".split("").reverse().join("");function _0x27ce93(_0x4b6716,_0x4781f6,_0x57584e,_0x4dbb11,_0x295d49){return _0x38eb(_0x4b6716-0x233,_0x4781f6);}count++;
}

一个小小的JS特效，但效果挺不错。

感谢阅读。劳逸结合，写代码久了，休息休息。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/163981.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【WiFI问题自助】解决WiFi能连上但是没有网的问题

【WiFI问题自助】解决WiFi能连上但是没有网的问题

WiFi能连上但是没有网的问题 背景&#xff1a;wifi能连上&#xff0c;但是没有网 解决 遇事不决&#xff0c;先重启啊&#xff01;怎么重启&#xff1f;拔掉电源再插上&#xff01;拔掉网线再插上&#xff01; 直接ok了。 思考记录 今天WiFi又上不了网了&#xff0c;昨天报…
阅读更多...
软件需求调研指南

软件需求调研指南

阅读更多...
大数据Doris（二十六）：数据导入（Routine Load）介绍

大数据Doris（二十六）：数据导入（Routine Load）介绍

文章目录 数据导入（Routine Load）介绍 一、​​​​​​​适用场景
阅读更多...
数据结构及八种常用数据结构简介

数据结构及八种常用数据结构简介

data-structure 数据结构是一种存在某种关系的元素的集合。“数据” 是指元素&#xff1b;“结构” 是指元素之间存在的关系&#xff0c;分为 “逻辑结构” 和 “物理结构&#xff08;又称存储结构&#xff09;”。 常用的数据结构有 数组&#xff08;array&#xff09;、栈&…
阅读更多...
详细步骤记录：持续集成Jenkins自动化部署一个Maven项目

详细步骤记录：持续集成Jenkins自动化部署一个Maven项目

Jenkins自动化部署 提示&#xff1a;本教程基于CentOS Linux 7系统下进行 Jenkins的安装 1. 下载安装jdk11 官网下载地址&#xff1a;https://www.oracle.com/cn/java/technologies/javase/jdk11-archive-downloads.html 本文档教程选择的是jdk-11.0.20_linux-x64_bin.tar.g…
阅读更多...
关于卓越服务的调研报告

关于卓越服务的调研报告

NetSuite知识会发起的本次调研从2023年11月2日开始&#xff0c;到11月12日结束。16日已向参与调研的朋友邮件回复&#xff0c;感谢您的付出&#xff01;今朝分享此报告&#xff0c;各位同学参考。 调研问题与反馈总结 问题1&#xff1a;您能想到哪些服务组织能够提供高满意度&…
阅读更多...
[CUDA]去除Eigen库中的warning

[CUDA]去除Eigen库中的warning

一、问题提出 假如使用nvcc对cuda代码进行编译时&#xff0c;如果代码中使用了Eigen库&#xff08;头文件&#xff09;&#xff0c;编译时可能会显示很多warning information&#xff0c;如下图红框中所示&#xff1a; 这些warning信息虽然不会影响代码的实际运行&#xff0c;…
阅读更多...
linux如何使用Xshell远程连接

linux如何使用Xshell远程连接

目录 1、创建虚拟机&#xff1a; 2、使用命令查看网段信息 拓展1&#xff1a;&#xff08;若网卡上没有网段信息&#xff0c;可以使用任意两种方法&#xff09;&#xff1a; 准备工作&#xff1a; 1、点击左上角的编辑后再点击虚拟网络编辑器。 2、打开以后&#xff0c…
阅读更多...
C++__string

C++__string

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 文章目录 前言 一、string是什么&#xff1f; 二、string的构造函数 1.string&#xff08;&#xff09;&#xff1b; 2.string&#xff08;const char * s&#xff09;&…
阅读更多...
PHP常用的数组函数

PHP常用的数组函数

PHP是一种流行的服务器端脚本语言&#xff0c;广泛用于Web开发。数组是PHP中最重要且最常用的数据类型之一&#xff0c;它提供了许多强大的数组函数&#xff0c;用于在数组上执行各种操作。在本文中&#xff0c;我们将深入解析PHP中一些常用的数组函数&#xff0c;以便更好地理…
阅读更多...
07.webpack的性能优化 -- 产出代码

07.webpack的性能优化 -- 产出代码

目标&#xff1a; 体积更小合理分包&#xff0c;不重复加载速度更快&#xff0c;使用内存更小 实现功能 小图片的base64编码提取公共代码bundle加hashIngorePlugin懒加载使用CDN使用productionScope Hosting 1. 使用production module.exports smart(webpackCommonConf, …
阅读更多...
MyBatis 操作数据库（构造动态 SQL）

MyBatis 操作数据库（构造动态 SQL）

前言 动态 SQL 是 Mybatis 的强⼤特性之⼀&#xff0c;能够完成不同条件下不同的 sql 拼接。 <if> 标签 我们在填写用户信息的时候经常会看到如下的界面&#xff0c;用户信息中包含必填信息和非必填信息&#xff0c;非必填信息是填和不填都可以的&#xff0c;那这样的话…
阅读更多...
PC端使子组件的弹框关闭

PC端使子组件的弹框关闭

子组件 <template><el-dialog title"新增部门" :visible"showDialog" close"close"> </el-dialog> </template> <script> export default {props: {showDialog: {type: Boolean,default: false,},},data() {retu…
阅读更多...
JVM虚拟机：CMS垃圾回收器的日志分析

JVM虚拟机：CMS垃圾回收器的日志分析

本文重点 本文我们将学习CMS垃圾回收器的日志 使用CMS java -Xms20M -Xmx20M -XX:PrintGCDetails -XX:UseConcMarkSweepGC 类名 日志格式 分析 上面的日志我们分为了两部分&#xff0c;上面表示新生代&#xff0c;下面表示老年代。 ParNew表示年轻代收集器&#xff0c;6144…
阅读更多...
基于springboot实现电子招投标系统【项目源码】

基于springboot实现电子招投标系统【项目源码】

基于springboot实现电子招投标系统演示 SpringBoot框架 SpringBoot是一个全新开源的轻量级框架。基于Spring4.0设计&#xff0c;其不仅继承了Spring框架原来有的优秀特性&#xff0c;而且还通过简化配置文件来进一步简化了Spring应用的整个搭建以及开发过程。另外在原本的Spri…
阅读更多...
更新文章分类

更新文章分类

CategoryController PutMappingpublic Result update(RequestBody Validated Category category){categoryService.update(category);return Result.success();} CategoryService //更新分类void update(Category category); CategoryServiceImpl Overridepublic void update(…
阅读更多...
C++之内建函数对象

C++之内建函数对象

C之内建函数对象 算术仿函数 #include<iostream> using namespace std; #include<functional>//内建函数对象头文件 //内建函数对象 算术仿函数void test() {// negate 一元仿函数 取反仿函数negate<int>n;cout << n(100) << endl;//plus 二元仿…
阅读更多...
基于FPGA的五子棋（论文+源码）

基于FPGA的五子棋（论文+源码）

1.系统设计 在本次设计中&#xff0c;整个系统硬件框图如下图所示&#xff0c;以ALTERA的FPGA作为硬件载体&#xff0c;VGA接口&#xff0c;PS/2鼠标来完成设计&#xff0c;整个系统可以完成人人对战&#xff0c;人机对战的功能。系统通过软件编程来实现上述功能。将在硬件设计…
阅读更多...
前端为什么要工程化

前端为什么要工程化

前端为什么要工程化 文章目录 前端为什么要工程化传统开发的弊端一个常见的案例更多问题 工程化带来的优势开发层面的优势团队协作的优势统一的项目结构统一的代码风格可复用的模块和组件代码健壮性有保障团队开发效率高 求职竞争上的优势 现在前端的工作与以前的前端开发已经完…
阅读更多...
【计算机毕业设计】Springboot 社区助老志愿服务系统-96682， 免费送源码，【开题选题+程序定制+论文书写+答辩ppt书写-原创定制程序】

【计算机毕业设计】Springboot 社区助老志愿服务系统-96682， 免费送源码，【开题选题+程序定制+论文书写+答辩ppt书写-原创定制程序】

Springboot 社区助老志愿服务系统 摘要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在图书馆管理的要求下&#xff0c;开发…
阅读更多...
最新文章

Copyright @ 2022~2023