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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
javascript 必知必会之closure
Sep 21 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
js实现消息滚动效果
Jan 18 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
详解redux异步操作实践
Aug 15 Javascript
Vue组件系列开发之模态框
Apr 18 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
php排序算法实例分析
2016/10/17 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
Js+XML 操作
2006/09/20 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
javascript编写简易计算器
2017/05/06 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
django-csrf使用和禁用方式
2020/03/13 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
如何提高MySql的安全性
2014/06/19 面试题
介绍下static、final、abstract区别
2015/01/30 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
小学教师管理制度
2014/01/18 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书