jQuery鼠标悬浮显示提示框 jquery鼠标悬浮事件文字

转载

davisl 2023-10-21 21:13:47

文章标签 jQuery鼠标悬浮显示提示框 javascript 定位 html Math 文章分类 jQuery 前端开发

这个特效笔者还真找不出什么特别贴切的标题来描述，直接看看效果图吧。哦对了，这个特效的灵感是笔者自己浏览一些网页的时候，鼠标点击，就会弹出或是文字或是图片，觉得新鲜就做了一个小的demo，还需完善，仅供参考。

效果图

jQuery鼠标悬浮显示提示框 jquery鼠标悬浮事件文字_定位

简单的讲解

span {
   position: absolute;
   user-select: none;
   font-size: 20px;
}

由于笔者采用span标签来包裹弹出的字，所有给它个绝对定位，不让用户选中（如果不这样，鼠标移到字上就会变形，难看）,设置个字体大小。

JS部分，由于是用jQuery实现的，故要引入jQuery，网上太多教程了这里不多说。

var fontAll = [
                '辛德拉',
                '劫',
                '卡萨丁',
                '崔斯特',
                '格雷福斯',
                '安妮',
                '阿木木',
                '卡兹克',
                '纳尔',
                '德莱厄斯',
                '德莱文',
                '卡尔玛',
            ];
            var colorAll = [
                'red',
                'pink',
                'yellow',
                'blue',
                'aqua',
                'green',
                'gold',
                'brown',
                'grey',
                'orange',
            ];

首先，你要定义两个数组，一个为弹出字体的内容，一个为弹出字体的颜色。定义两个数组是为了之后可以利用Math.random()随机选取颜色和内容。注意，弹出的字体不要太长，而且不要加与你网页背景色太过相近的颜色，显得很憨批。

$(document).click(function (e) {
     var $span = $('<span>' + fontAll[Math.floor(Math.random() * fontAll.length)] + '</span>');
     $('body').append($span);
     $span.css('color', colorAll[Math.floor(Math.random() * colorAll.length)])
     var width = $span.width()
     var height = $span.height()
     var init = e.pageY - height / 2;
     $span.css({
         left: e.pageX - width / 2 + 'px',
         top: init + 'px'
     });
     $span.animate({
         fontsize: 10 + 'px',
         top: init - 150 + 'px',
         opacity: .2
     }, 1000, function () {
         $span.css('display', 'none');
     })
 });

接下来就是重点了。先给document注册个点击事件，然后像上述格式一样定义一个jQuery对象并添加到body里面，再接着随机颜色。e.pageX,e.pageY为鼠标点击时，点击处距离窗口边框的x轴距离和y轴距离，可以通过定位的方式来把这个对象定位到鼠标处。这里要注意，这样生成的文字是以鼠标左上角为（0，0）的，有点像鼠标拖着文字呢，不好看。所以减去文字自身的宽高的一半，可以实现居中于鼠标的效果，animate()方法是jQuery中自定义动画用的，这里抄一下文档：

animate(params,[speed],[easing],[fn])
 params,[speed],[easing],[fn]Options,Number/String,String,Function
 params:一组包含作为动画属性和终值的样式属性和及其值的集合
 speed:三种预定速度之一的字("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
 easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和"swing".
 fn:在动画完成时执行的函数，每个元素执行一次。

因为要让文字有飞出去的效果，所以要记录文字生成的时候的初始位置，然后再根据它修改top值，-100或者-200px都可以，这里所有的东西都是可以自己调整的，自己觉得好看即可。

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空白点击出字</title>
    <style>
        span {
            position: absolute;
            user-select: none;
            font-size: 20px;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            var fontAll = [
                '辛德拉',
                '劫',
                '卡萨丁',
                '崔斯特',
                '格雷福斯',
                '安妮',
                '阿木木',
                '卡兹克',
                '纳尔',
                '德莱厄斯',
                '德莱文',
                '卡尔玛',
            ];
            var colorAll = [
                'red',
                'pink',
                'yellow',
                'blue',
                'aqua',
                'green',
                'gold',
                'brown',
                'grey',
                'orange',
            ];
            $(document).click(function (e) {
                var $span = $('<span>' + fontAll[Math.floor(Math.random() * fontAll.length)] + '</span>');
                $('body').append($span);
                $span.css('color', colorAll[Math.floor(Math.random() * colorAll.length)])
                var width = $span.width()
                var height = $span.height()
                var init = e.pageY - height / 2;
                $span.css({
                    left: e.pageX - width / 2 + 'px',
                    top: init + 'px'
                });
                $span.animate({
                    fontsize: 10 + 'px',
                    top: init - 150 + 'px',
                    opacity: .2
                }, 1000, function () {
                    $span.css('display', 'none');
                })
            });
        });
    </script>
</head>
<body>
</body>
</html>