javascript实现鼠标点击生成文字特效


Posted in Javascript onDecember 24, 2019

前端实用脚本(鼠标点击生成文字特效)

你好! 这是你第一次写 博客 目的是为了记录常用到的技术知识以供同行参考学习和方便自己以后查阅

前言

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

旧版本

1.单一的浮动效果 ,旧版本的只有一种颜色,比较单调;
2.没有遵循 : 可以run的demo才是好demo的原则

新版本

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

废话少说 贴代码

鼠标点击特效

效果图

javascript实现鼠标点击生成文字特效

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

/* 鼠标点击文字特效 */
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Bootstrap 实例 - 模态框(Modal)插件</title>
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
</head>
<body style="width: 100%;height: 100%;">
<div style="width: 1080px;height: 1080px;">
<h2>点击任意空白处查看效果</h2>
</div>

<script>
/* 鼠标点击文字特效 */
 var f_idx = 0;
 var c_idx = 0;
 jQuery(document).ready(function($) {
  $("body").click(function(e) {
   var font = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
 var color = new Array('#ff0000','#eb4310','#f6941d','#fbb417','#ffff00','#cdd541','#99cc33','#3f9337','#219167','#239676','#24998d','#1f9baa','#0080ff','#3366cc','#333399','#003366','#800080','#a1488e','#c71585','#bd2158');
   var $i = $("<span />").text(font[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 ,
    "top": y - 20,
    "left": x,
    "position": "absolute",
    "font-weight": "bold",
    "color": color[c_idx]
   });
   $("body").append($i);
   $i.animate({
     "top": y - 180,
     "opacity": 0
    },
    1500,
    function() {
     $i.remove();
    });
  });
 });
</script>
</body>

</html>

补充说明

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
详解vue 数组和对象渲染问题
Sep 21 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 #Javascript
javascript实现点击星星小游戏
Dec 24 #Javascript
JS实现小星星特效
Dec 24 #Javascript
JS实现星星海特效
Dec 24 #Javascript
JS实现图片切换特效
Dec 23 #Javascript
JS实现简易留言板特效
Dec 23 #Javascript
JS实现关闭小广告特效
Jan 29 #Javascript
You might like
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
wxPython实现带颜色的进度条
2019/11/19 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
了解一下python内建模块collections
2020/09/07 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
机械专业毕业生推荐信范文
2013/11/25 职场文书
企业车辆管理制度
2014/01/24 职场文书
医疗纠纷协议书
2014/04/16 职场文书
创业培训计划书
2014/05/03 职场文书
班级团队活动方案
2014/08/14 职场文书
交通违章检讨书
2014/09/21 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
小学少先队活动总结
2015/05/08 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
JavaScript异步操作中串行和并行
2021/11/20 Javascript
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers