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 相关文章推荐
javascript 获取select下拉列表值的代码
Sep 07 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
vue v-model的用法解析
Oct 19 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
angular分页指令操作
2017/01/09 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
信息专业大学生自我评价分享
2014/01/17 职场文书
社区党务公开实施方案
2014/03/18 职场文书
学历公证书范本
2014/04/09 职场文书
合伙协议书
2014/04/23 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
教师年度考核个人总结
2015/02/12 职场文书
员工担保书范本
2015/09/22 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
Windows server 2012搭建FTP服务器
2022/04/29 Servers