炫酷JavaScript鼠标跟随特效

再努力"亿"点点2025-09-04 21:17

事件类型：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="你好你好你好">
<script>
  let _input=document.querySelector('input')
    //聚焦
    _input.onfocus=function(){
        if(_input.value=="你好你好你好"){
            _input.value=''
        }

    }
    //失去焦点
     _input.onblur=function(){
        if(_input.value==""){
             _input.value='你好你好你好'
        }
    }
    //value值改变失去焦点才会触发
    _input.onchange=function(){
        console.log(_input.value)
    }
    //表单输入实时触发
    _input.oninput=function(){
        console.log(_input.value)
    }
</script>
</body>
</html>

聚焦：

当光标点击输入框时将清空里面的内容：

javascript 复制代码 
 _input.onfocus=function(){
        if(_input.value=="你好你好你好"){
            _input.value=''
        }

失去焦点：

当光标离开输入框就会显示原有的内容：

javascript 复制代码 
   _input.onblur=function(){
        if(_input.value==""){
             _input.value='你好你好你好'
        }
    }

当用户输入内容并且失去焦点时将会触发：

javascript 复制代码 
  _input.onchange=function(){
        console.log(_input.value)
    }

表单实时触发：

在输入框中输入什么控制台就会输出什么：

javascript 复制代码 
  _input.oninput=function(){
        console.log(_input.value)
    }

表单验证：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form action="">
        <div>用户名：<input type="text" name="username" placeholder="手机号">
        <span class="usererr"></span>
        </div>
        <div>密码：<input type="text" name="pwd" placeholder="大小写">
        <span class="pwderr"></span>
        </div>
        <div><input type="submit" value="注册"></div>
    </form>
</div>
<script>
    let phone_reg=/^\d{11}$/;
    let pwd_reg=/^\d{11}$/
    let _username=document.querySelector('input[name=username]')
    let _usererr=document.querySelector('.usererr')
    let _pwd=document.querySelector('input[name=pwd]')
    let _pwderr=document.querySelector('.pwderr')
    let _form=document.querySelector('form')

    _username.onblur = function() {
        checkuser()
    }
    _pwd.onblur = function() {
        checkpwd()
    }

    //验证用户名
    function checkuser(){
        //每次验证之前先清空提示
         _usererr.innerHTML=''
        //非空验证
        if(_username.value==""){
            _usererr.innerHTML='用户名不能为空'
            return false
        }
        //格式验证
        if(!phone_reg.test(_username.value)){
            _usererr.innerHTML='格式不正确'
            return false
        }
        return true
    }

     //验证密码
    function checkpwd(){
        //每次验证之前先清空提示
         _pwderr.innerHTML=''
        //非空验证
        if(_pwd.value==""){
            _pwderr.innerHTML='密码不能为空'
            return false
        }
        //格式验证
        if(!pwd_reg.test(_pwd.value)){
            _pwderr.innerHTML='格式不正确'
            return false
        }
        return true
    }

    //表单提交事件
    _form.onsubmit = function() {
        //return checkuser()&&checkpwd()
        //如果用户名没有填写或不正确光标聚焦到用户输入框
        if(!checkuser()){
            _username.focus()
            return false
        }
        //如果密码没有填写或不正确光标聚焦到密码输入框
          if(!checkpwd()){
            _pwd.focus()
            return false
        }
        return true
    }
</script>
</body>
</html>

先设置用户名和密码的样式这里都用11位数字代替：

javascript 复制代码 
let phone_reg=/^\d{11}$/;
    let pwd_reg=/^\d{11}$/

用户名验证：

首先把用户输入框清空，当用户输入为空时将会提示'用户名不能为空'，格式不正确时也会提示格式不正确：

javascript 复制代码 
 function checkuser(){
         _usererr.innerHTML=''
        if(_username.value==""){
            _usererr.innerHTML='用户名不能为空'
            return false
        }
        if(!phone_reg.test(_username.value)){
            _usererr.innerHTML='格式不正确'
            return false
        }
        return true
    }

密码验证也是一样的：

javascript 复制代码 
  function checkpwd(){
        //每次验证之前先清空提示
         _pwderr.innerHTML=''
        //非空验证
        if(_pwd.value==""){
            _pwderr.innerHTML='密码不能为空'
            return false
        }
        //格式验证
        if(!pwd_reg.test(_pwd.value)){
            _pwderr.innerHTML='格式不正确'
            return false
        }
        return true
    }

如果用户名或密码没有填写光标将自动聚焦到输入框上：

在函数运行前需要先调用函数：

javascript 复制代码 
    _username.onblur = function() {
        checkuser()
    }
    _pwd.onblur = function() {
        checkpwd()
    }
javascript 复制代码 
_form.onsubmit = function() {
        //return checkuser()&&checkpwd()
        if(!checkuser()){
            _username.focus()
            return false
        }
          if(!checkpwd()){
            _pwd.focus()
            return false
        }
        return true

鼠标事件：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点击</button>
<script>

    //双击事件
    let _btn=document.querySelector('button');
    _btn.ondblclick=function(){
        console.log('双击')
    }

    //悬浮事件
    _btn.onmouseenter=function(){
        console.log('鼠标悬浮')
    }

    //离开事件
    _btn.onmouseout=function(){
        console.log('鼠标离开')
    }

    //移动事件
    _btn.onmousemove=function(){
        console.log('鼠标移动')
    }

    //摁下事件
     _btn.onmousedown=function(){
        console.log('鼠标摁下')
    }

    //弹起事件
     _btn.onmouseup=function(){
        console.log('鼠标弹起')
    }
</script>
</body>
</html>

双击鼠标控制台就会打印：

javascript 复制代码 
let _btn=document.querySelector('button');
    _btn.ondblclick=function(){
        console.log('双击')
    }

当鼠标悬浮在按钮上就会打印：

javascript 复制代码 
  _btn.onmouseenter=function(){
        console.log('鼠标悬浮')
    }

鼠标离开事件：

javascript 复制代码 
  _btn.onmouseout=function(){
        console.log('鼠标离开')
    }

鼠标移动事件：

javascript 复制代码 
 _btn.onmousemove=function(){
        console.log('鼠标移动')
    }

鼠标按下事件：

javascript 复制代码 
 _btn.onmousedown=function(){
        console.log('鼠标摁下')
    }

鼠标弹起事件：

javascript 复制代码 
   _btn.onmouseup=function(){
        console.log('鼠标弹起')
    }

鼠标跟随效果：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script> function randomColor(){
        let a=parseInt(Math.random()*256);
        let b=parseInt(Math.random()*256);
        let c=parseInt(Math.random()*256);
        return `rgb(${a},${b},${c})`
    }

    document.onmousemove=function (event){
        //获取鼠标坐标
        let dx=event.pageX;
        let dy=event.pageY;
        //构造一个圆
        let _div=document.createElement("div");
        let num=parseInt(Math.random()*10+50);
        _div.style.width=num+'px';
        _div.style.height=num+'px';
        _div.style.background=randomColor()
        _div.style.borderRadius='50%'
        //圆的位置跟随鼠标移动
         _div.style.position='absolute';
        _div.style.left=(dx-num/2)+'px';
        _div.style.top=(dy-num/2)+'px';

        //追加
        document.body.append(_div);

        //延迟删除
        setTimeout(function(){
          _div.remove();
        },500)

    }


</script>
</body>
</html>

获取鼠标点击时的坐标：

javascript 复制代码 
let dx=event.pageX;
        let dy=event.pageY;

构造一个圆形：

javascript 复制代码 
 let _div=document.createElement("div");
        let num=parseInt(Math.random()*10+50);
        _div.style.width=num+'px';
        _div.style.height=num+'px';
        _div.style.background=randomColor()
        _div.style.borderRadius='50%'

圆的背景颜色：

javascript 复制代码 
function randomColor(){
        let a=parseInt(Math.random()*256);
        let b=parseInt(Math.random()*256);
        let c=parseInt(Math.random()*256);
        return `rgb(${a},${b},${c})`
    }

给圆加一个绝对定位，左边和顶部的距离都是x,y轴到圆边距的距离

javascript 复制代码 
_div.style.position='absolute';
        _div.style.left=(dx-num/2)+'px';
        _div.style.top=(dy-num/2)+'px';

把div追加到body里面：

javascript 复制代码 
document.body.append(_div);

延迟删除：

javascript 复制代码 
setTimeout(function(){
          _div.remove();
        },500)

位置：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .app {
            width: 300px;
            height: 300px;
            background-color: #ac9090;
            position: relative;
            overflow: auto;
        }
        .first{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-left: 50px;
        }
        .second{
            width: 200px;
            height: 200px;
            margin-left: 50px;
            background-color: #2c0b0e;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="first"></div>
        <div class="second"></div>
    </div>
    <script>
        /**
         * 位置:一个元素在某个文档的坐标(和滚动条无关)
         * offsetTop:相对于最近的已经定位祖先元素的偏移量
         *           如果祖先元素没有定位，相对于浏览器
        */

        let _app=document.querySelector('.app')
        let _first=document.querySelector('.first')
        let _second=document.querySelector('.second')
        console.log(_app.offsetLeft,_app.offsetTop)
        console.log(_first.offsetLeft,_first.offsetTop)
        console.log(_second.offsetLeft,_second.offsetTop)
    </script>
</body>
</html>

因为app没有祖先元素所以是相对浏览器的偏移量：左边和顶部都是8

javascript 复制代码 
console.log(_app.offsetLeft,_app.offsetTop)

因为first的祖先是app所以相对app的左边距离是50，而顶部距离为0：

javascript 复制代码 
console.log(_first.offsetLeft,_first.offsetTop)

second的是在first的下面所以它定义的宽度与first相同但是距离app的高度是first的高度：

javascript 复制代码 
console.log(_second.offsetLeft,_second.offsetTop)

放大镜：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 原图: 720*720
           大图与小图比例=大放大镜与小大镜比例
        */
        .app{
            display: flex;
        }
        .app>div{
            width:360px;
            height:360px;
            margin-right: 50px;
        }

        .left{
            border: 1px solid black;
            position: relative;
        }
        .left img{
            width: 360px;
        }
        .right{
            border: 1px solid rgb(86, 88, 192);
            overflow: hidden;
            position: relative;
        }
        .right>img{
            position: absolute;
        }
        .mark{
            width:138px ;
            height:138px;
            background-color:white;
            opacity: 0.5;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="left">
            <div>
                <img src="./洗手台.jpg" alt="">
            </div>
            <div class="mark"></div>
        </div>
        <div class="right">
            <img src="./洗手台.jpg" alt="">
        </div>
    </div>
    <script>
        let _left=document.querySelector('.left');
        let _mark=document.querySelector('.mark');
        let _img=document.querySelector('.right>img');
        //进入显示放大镜
        _left.onmouseenter=function(){
            _mark.style.display='block';
        }
        //离开隐藏放大镜
         _left.onmouseleave=function(){
            _mark.style.display='none';
        }

        _left.onmousemove=function(event){
            //计算放大镜坐标
            let dx=event.pageX-_left.offsetLeft-_mark.offsetWidth/2;
         //到左边
            if (dx<=0){
                dx=0
            }
              //到右边
            if (dx>=_left.clientWidth-_mark.offsetWidth){
                dx=_left.clientWidth-_mark.offsetWidth
            }


            let dy=event.pageY-_left.offsetTop-_mark.offsetHeight/2;
            //到上边
            if (dy<=0){
                dy=0
            }
              //到下边
            if (dy>=_left.clientHeight-_mark.offsetHeight){
                dy=_left.clientHeight-_mark.offsetHeight
            }
            _mark.style.left=dx+'px';
            _mark.style.top=dy+'px';

            _img.style.left=-dx*2+'px';
            _img.style.top=-dy*2+'px';
        }
    </script>
</body>
</html>

鼠标进入图片时显示放大镜：

javascript 复制代码 
 _left.onmouseenter=function(){
            _mark.style.display='block';
        }

鼠标离开图片时放大镜隐藏：

javascript 复制代码 
 _left.onmouseleave=function(){
            _mark.style.display='none';
        }

计算到左边和到右边的距离，让放大镜不会脱离图片：

javascript 复制代码 
   let dx=event.pageX-_left.offsetLeft-_mark.offsetWidth/2;
            if (dx<=0){
                dx=0
            }
            if (dx>=_left.clientWidth-_mark.offsetWidth){
                dx=_left.clientWidth-_mark.offsetWidth
            }

上面和下面也是一样：

javascript 复制代码 
if (dy<=0){
                dy=0
            }
              //到下边
            if (dy>=_left.clientHeight-_mark.offsetHeight){
                dy=_left.clientHeight-_mark.offsetHeight
            }

  1. _mark.style.left = dx + 'px'

    • 设置 _mark 元素的水平位置（left）为变量 dx 的值加上单位 px。

    • dx 应为数值类型，表示像素偏移量。

  2. _mark.style.top = dy + 'px'

    • 设置 _mark 元素的垂直位置（top）为变量 dy 的值加上单位 px。

    • dy 应为数值类型，表示像素偏移量。

  3. _img.style.left = -dx * 2 + 'px'

    • 设置 _img 元素的水平位置（left）为 -dx * 2 的值加上单位 px。

    • 负值表示向左移动，且移动距离是 dx 的两倍。

  4. _img.style.top = -dy * 2 + 'px'

    • 设置 _img 元素的垂直位置（top）为 -dy * 2 的值加上单位 px。

    • 负值表示向上移动，且移动距离是 dy 的两倍。

javascript 复制代码 
 _mark.style.left=dx+'px';
            _mark.style.top=dy+'px';

            _img.style.left=-dx*2+'px';
            _img.style.top=-dy*2+'px';

鼠标拖拽：

  • 拖拽开始时绑定onmousemove事件
  • 拖拽结束时通过onmouseup解除移动监听
  • 防止鼠标松开后元素继续跟随鼠标移动
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .app{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="app">

</div>
<script>
    let _app=document.querySelector('.app')
    _app.onmousedown=function(event) {
        //计算鼠标在app的坐标
        let dx=event.pageX - _app.offsetLeft;
        let dy=event.pageY - _app.offsetTop;
        _app.onmousemove=function(event) {
            _app.style.position = 'absolute';
            _app.style.left=event.pageX-dx + 'px';
            _app.style.top=event.pageY-dy + 'px';
        }
        _app.onmouseup=function() {
            _app.onmousemove = null;
        }
    }
</script>
</body>
</html>

计算鼠标的坐标：

javascript 复制代码 
let dx=event.pageX - _app.offsetLeft;
        let dy=event.pageY - _app.offsetTop;

元素通过position: absolute定位，根据鼠标移动事件更新left和top样式属性。event.pageX和event.pageY获取鼠标当前页面坐标。

javascript 复制代码 
 _app.onmousemove=function(event) {
            _app.style.position = 'absolute';
            _app.style.left=event.pageX-dx + 'px';
            _app.style.top=event.pageY-dy + 'px';
        }
  • 当在_app元素上触发mouseup事件时，会将onmousemove事件处理器设为null，从而解除之前绑定的鼠标移动事件监听。
javascript 复制代码 
 _app.onmouseup=function() {
            _app.onmousemove = null;
        }
相关推荐
Zuckjet_10 分钟前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_8638014616 分钟前
探索 12 种 3D 文件格式：综合指南
前端·3d
西阳未落43 分钟前
C++基础（21）——内存管理
开发语言·c++·面试
我的xiaodoujiao1 小时前
Windows系统Web UI自动化测试学习系列2--环境搭建--Python-PyCharm-Selenium
开发语言·python·测试工具
callJJ1 小时前
从 0 开始理解 Spring 的核心思想 —— IoC 和 DI(2)
java·开发语言·后端·spring·ioc·di
珍宝商店2 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown2 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy2 小时前
【JavaScript 性能优化实战】第六篇：性能监控与自动化优化
javascript·性能优化·自动化
hsjkdhs3 小时前
万字详解C++之构造函数析构函数
开发语言·c++
gnip3 小时前
实现AI对话光标跟随效果
前端·javascript
热门推荐
01Multisim使用教程详尽版--(2025最新版)02UV 工具安装与国内镜像源配置指南03GitHub 镜像站点0446个Nano-banana 精选提示词，持续更新中05Spec-Kit 使用指南06UV安装并设置国内源07保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）08VsCode远程Copilot无法使用Claude Agent问题092025年华为杯研赛数学建模竞赛C题完整参考论文 （含模型、MATLAB和Python代码）10KGG转MP3工具|非KGM文件|解密音频