点击网页鼠标处飞出文字特效jQuery

这个特效笔者还真找不出什么特别贴切的标题来描述，直接看看效果图吧。哦对了，这个特效的灵感是笔者自己浏览一些网页的时候，鼠标点击，就会弹出或是文字或是图片，觉得新鲜就做了一个小的demo，还需完善，仅供参考。

效果图

简单的讲解

span {position: absolute;user-select: none;font-size: 20px;
}

由于笔者采用span标签来包裹弹出的字，所有给它个绝对定位，不让用户选中（如果不这样，鼠标移到字上就会变形，难看）,设置个字体大小。

JS部分，由于是用jQuery实现的，故要引入jQuery，网上太多教程了这里不多说。

var fontAll = ['辛德拉','劫','卡萨丁','崔斯特','格雷福斯','安妮','阿木木','卡兹克','纳尔','德莱厄斯','德莱文','卡尔玛',];var colorAll = ['red','pink','yellow','blue','aqua','green','gold','brown','grey','orange',];

首先，你要定义两个数组，一个为弹出字体的内容，一个为弹出字体的颜色。定义两个数组是为了之后可以利用Math.random()随机选取颜色和内容。注意，弹出的字体不要太长，而且不要加与你网页背景色太过相近的颜色，显得很憨批。

$(document).click(function (e) {var $span = $('<span>' + fontAll[Math.floor(Math.random() * fontAll.length)] + '</span>');$('body').append($span);$span.css('color', colorAll[Math.floor(Math.random() * colorAll.length)])var width = $span.width()var height = $span.height()var init = e.pageY - height / 2;$span.css({left: e.pageX - width / 2 + 'px',top: init + 'px'});$span.animate({fontsize: 10 + 'px',top: init - 150 + 'px',opacity: .2}, 1000, function () {$span.css('display', 'none');})});

接下来就是重点了。先给document注册个点击事件，然后像上述格式一样定义一个jQuery对象并添加到body里面，再接着随机颜色。e.pageX,e.pageY为鼠标点击时，点击处距离窗口边框的x轴距离和y轴距离，可以通过定位的方式来把这个对象定位到鼠标处。这里要注意，这样生成的文字是以鼠标左上角为（0，0）的，有点像鼠标拖着文字呢，不好看。所以减去文字自身的宽高的一半，可以实现居中于鼠标的效果，animate()方法是jQuery中自定义动画用的，这里抄一下文档：

 animate(params,[speed],[easing],[fn])params,[speed],[easing],[fn]Options,Number/String,String,Functionparams:一组包含作为动画属性和终值的样式属性和及其值的集合speed:三种预定速度之一的字("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和"swing".fn:在动画完成时执行的函数，每个元素执行一次。

因为要让文字有飞出去的效果，所以要记录文字生成的时候的初始位置，然后再根据它修改top值，-100或者-200px都可以，这里所有的东西都是可以自己调整的，自己觉得好看即可。

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>空白点击出字</title><style>span {position: absolute;user-select: none;font-size: 20px;}</style><script src="jquery-3.5.1.js"></script><script>$(function () {var fontAll = ['辛德拉','劫','卡萨丁','崔斯特','格雷福斯','安妮','阿木木','卡兹克','纳尔','德莱厄斯','德莱文','卡尔玛',];var colorAll = ['red','pink','yellow','blue','aqua','green','gold','brown','grey','orange',];$(document).click(function (e) {var $span = $('<span>' + fontAll[Math.floor(Math.random() * fontAll.length)] + '</span>');$('body').append($span);$span.css('color', colorAll[Math.floor(Math.random() * colorAll.length)])var width = $span.width()var height = $span.height()var init = e.pageY - height / 2;$span.css({left: e.pageX - width / 2 + 'px',top: init + 'px'});$span.animate({fontsize: 10 + 'px',top: init - 150 + 'px',opacity: .2}, 1000, function () {$span.css('display', 'none');})});});</script>
</head>
<body>
</body>
</html>

总结

简单的一个特效，本例是文字，大家可以根据同样的思路弹出图片或者等等。觉得不错的点个赞吧~！

点击网页鼠标处飞出文字特效jQuery相关推荐

HTML5七夕情人节表白网页(粉色的情人节爱心飞出ui特效) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心
HTML5七夕情人节表白网页❤粉色的情人节爱心飞出ui特效❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这 ...
点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...
PAMIE:点击网页中的弹出窗口的按钮
在我们登录网页的时候,如果某账户刚刚登录,系统会有如下提示: 本文就是讲述如何用PAMIE处理这种POPUP window.主要是如何选择POPUP window以及点击上面的"OK&quo ...
HTML5七夕情人节表白网页制作【粉色的情人节爱心飞出ui特效】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
c# WPF listbox右键鼠标处弹出快捷菜单
原创右键鼠标在item上就弹出快捷菜单,空白处不弹出. 这个直接添加一个Item模板就行了 MouseRightButtonUp="listBox_MouseRightButtonD ...
鼠标点击网页空白处出现手机号
鼠标点击网页空白处出现手机号等文字话不多说上代码 <!DOCTYPE html> <html lang="en"><head><met ...
钱袋子动画（金币飞出，袋子内动态减少，钱袋子摇晃）
简述粗略构图,请发挥想象力哦,哈哈哈触发点击事件时金币飞出,钱袋子摇晃钱袋子里面的金币总量动态减少思想袋子内部动画就是上面波纹水平移动,金币总量垂直移动(transform:translat ...
分享111个JS文字特效，总有一款适合您
分享111个JS文字特效,总有一款适合您 111个JS文字特效下载链接:https://pan.baidu.com/s/1Ql-wGwfjovvu78bvpwD-8w?pwd=wqgg 提取码:wq ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...

点击网页鼠标处飞出文字特效jQuery

效果图

简单的讲解

源码

总结

点击网页鼠标处飞出文字特效jQuery相关推荐

最新文章

热门文章