网页鼠标点击任何一个地方弹出文字动画效果图文教程

访问别人的网站看到网页鼠标点击任何一个地方会弹出文字效果挺好看,测试了百度上的别人写的代码后简单写个教程记录下,给需要的新手小白一丢丢帮助吧

复制粘贴代码到网页<html></html>标签中的任何一个地方

<script type="text/javascript"> 
/* 鼠标特效 */ 
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        /* 这边定义点击要显示的文字 */ 
        var a = new Array("欢迎访问阿豪运维笔记"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

文字效果预览

image.png

OK,教程已结束,记录下以免下次用到,同时也给新手小白一丢丢帮助,多折腾,多收获,不怕出错就怕不出错,有问题留言咨询反馈 ~~~

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作有参考学习价值
喜欢请点击上方【分享】,如果对您有帮助可点击上方【打赏】打赏本站。谢谢大家对阿豪运维笔记的支持。

文章作者: 阿豪运维笔记(阿豪同学)
本文链接:
文章版权:站长码字很辛苦,除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码