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 相关文章推荐
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
2014小学语文教学工作总结
2014/12/17 职场文书
英语投诉信范文
2015/07/03 职场文书
初中政教处工作总结
2015/08/12 职场文书
javascript函数式编程基础
2021/09/15 Javascript
Java存储没有重复元素的数组
2022/04/29 Java/Android
Echarts如何重新渲染实例详解
2022/05/30 Javascript