javascript实现鼠标点击生成文字特效的方法 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下javascript实现鼠标点击生成文字特效的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

<强>前言

最近在浏览一些博客的时候总是能够看的到,当我点击鼠标的时候鼠标位置就会出现文字然后往上方浮动。当时比较好奇,然后空闲时间就去百度了一下这种效果是怎么实现的,然后结合一些博客整理了一下。

<强>旧版本

<强> 1。单一的浮动效果强,旧版本的只有一种颜色,比较单调;
2。没有遵循:可以<强>运行的演示才是好演示的原则

<强>新版本

1。筛选了多种好看的颜色样式
2。复制代码到记事本改后缀。html可以直接运行

废话少说贴代码

鼠标点击特效

<>强效果图

然后如果是你想要的效果下面直接代码
鼠标点击文字特效代码片。

/*,鼠标点击文字特效,*/& lt; ! DOCTYPE  html>
　　& lt; html>
　　& lt; head>
　　,& lt; meta  charset=皍tf-8"比;
　　,& lt; title> Bootstrap 实例,安康;模态框(模态)插件& lt;/title>
　　,& lt; https://www.yisu.com/zixun/script  src=" http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js ">  
　　
　　点击任意空白处查看效果
　　
　　
　　<>脚本/*鼠标点击文字特效*/var f_idx=0;
　　var c_idx=0;
　　jQuery(文档)时函数($){
　　$(“身体”).click(函数(e) {
　　var字体=new Array(“富强”,“民主”,“文明”,“和谐”、“自由”,“平”等,“公正”,“法”治,“爱国”,“敬业”,“诚信”、“友善”);
　　var颜色=new Array (' # ff0000 ', ' # eb4310 ', ' # f6941d ', ' # fbb417 ', ' # ffff00 ', ' # cdd541 ', ' # 99 cc33 ', ' # 3 f9337 ', # 219167, # 239676, # 24998 d,“# 1 f9baa”, # 0080 ff, # 3366 cc, # 333399, # 003366, # 800080, # a1488e ', ' # c71585 ', ' # bd2158 ');
　　变量$ i=$(“<跨度/>”)。text(字体[f_idx]);
　　f_idx=(f_idx + 1) % font.length;
　　c_idx=(c_idx + 1) % color.length;
　　var x=e.pageX,
　　y=e.pageY;
　　美元i.css ({
　　“z - index”: 99999999999999999999999999999999999999999999999999999999999999999999999999,
　　“顶级”:y - 20,
　　“左”:x,
　　“位置”:“绝对”,
　　“粗细”:“大胆”,
　　“颜色”:颜色(c_idx)
　　});
　　$(“身体”).append ($ i);
　　美元i.animate ({
　　“顶级”:y - 180,
　　“不透明度”:0
　　},
　　1500年,
　　函数(){
　　美元i.remove ();
　　});
　　});
　　});>

<>强补充说明

1。此文章根据资料搜索整理。为了方便备份和别人测试,jquery上面已经引入的在线的,没有下载jquery的也可以查看效果展示。
2。如果需要修改为自己想要的文字和颜色自行在修改数组里的元素。
3。我们不生产源代码,我们只是源代码的修改工和搬运工。(写代码不是关键,关键是懂得学习其中的逻辑)

以上是“javascript实现鼠标点击生成文字特效的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!