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构造器的实现代码小结
May 16 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
Js代码中的span拼接问题解决
Nov 22 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
php date()日期时间函数详解
2010/05/16 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
师范生实习的个人自我鉴定
2013/10/20 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
医学求职信
2014/05/28 职场文书
党章培训心得体会
2014/09/04 职场文书
先进教师事迹材料
2014/12/16 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
2015年教师业务工作总结
2015/05/26 职场文书