看到有些网站点击页面任意地方都会弹出文字出来 感觉很炫酷 但其实实现方法很简单 哇哈哈哈~~~

// 调用 ( e, 消失毫秒, 数组, 向上漂浮距离)
$(document).click(function(e){
var list = ['学而时习之', '不亦说乎', '有朋自远方来', '不亦乐乎', '人不知而不愠', '不亦君子乎', '三人行 必有我师焉', '择其善者而从之', '其不善者而改之', '学而不思则罔', '思而不学则殆'];
textUp( e, 2000, list, 200 )
})
function textUp( e, time, arr, heightUp ){
var lists = Math.floor(Math.random() * arr.length);
var colors = '#'+Math.floor(Math.random()*0xffffff).toString(16);
var $i = $('<span />').text( arr[lists] );
var xx = e.pageX || e.clientX + document.body.scroolLeft;
var yy = e.pageY || e.clientY + document.body.scrollTop; $('body').append($i);
$i.css({
top: yy,
left: xx,
color: colors,
transform: 'translate(-50%, -50%)',
display: 'block',
position: 'absolute',
zIndex: 999999999999
})
$i.animate({
top: yy - ( heightUp ? heightUp : 200 ),
opacity: 0
}, time, function(){
$i.remove();
})
}

这边穿梭进入演示空间

JS jQuery 点击页面漂浮出文字的更多相关文章

  1. JS jQuery 点击页面弹出文字

    <style> .animate{ animation:myfirst 3s; -moz-user-select:none;/*火狐*/ -webkit-user-select:none; ...

  2. js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值

    js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值本文介绍jquery/js获取当前页面url地址的方法,在jquery与js中获取当前页面url方法是一样的,因为jque ...

  3. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. jQuery点击图片弹出放大可拖动图片查看

    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...

  5. jQuery点击页面其他部分隐藏下拉菜单

    一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...

  6. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

  7. jquery 点击页面流畅弹出预定文字

    js代码: <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script&g ...

  8. js 鼠标点击页面出现文字

    <script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { ...

  9. jQuery点击图片弹出大图遮罩层

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...

随机推荐

  1. xshell远程打开Linux图形界面加速方法:

    https://blog.csdn.net/zyy247796143/article/details/82143832 服务器安装: yum install Xvfb    :在安装完谷歌浏览器后,安 ...

  2. WPF 释放嵌入资源

    资源文件名称:默认命名空间.文件名 || 默认命名空间.文件夹名.文件名 /// <summary> /// 提取文件 /// </summary> /// <param ...

  3. SGDClassifier梯度下降分类方法

    SGDClassifier梯度下降分类方法 这个分类器跟其他线性分类器差不多,只是它用的是mini-batch来做梯度下降,在处理大数据的情况下收敛更快 1.应用 SGD主要应用在大规模稀疏数据问题上 ...

  4. http中长连接和websocket的长连接的区别

    一.什么是http协议 HTTP是一个应用层协议,无状态的,端口号为80.主要的版本有1.0/1.1/2.0.   HTTP/1.* 一次请求-响应,建立一个连接,用完关闭: HTTP/1.1 串行化 ...

  5. LIS 51Nod 1134 最长递增子序列

    给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素是递增的) 例如:5 1 6 8 2 4 5 10,最长递增子序列是1 2 4 5 10.   Input 第1行:1个 ...

  6. 4级搭建类401-Oracle 19c Non-CDB DG搭建(Linux 主备一对一 LGWR ASYNC)公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列除特定项目目前不对外发布,仅作为博客记录,其他公开.如学员在 ...

  7. Unity踩坑记录

    最近开始学习Unity,因为会一点儿C#,Delphi,Python,三种都是半桶水都算不上的级别. 首先排除了Python,其次delphi是我最喜欢的,奈何它目前我能了解到的引擎都很老了,dilp ...

  8. linux基础之CentOS启动流程

    一.基本概念 内核设计流派: 单内核设计:Linux //所有功能集成于同一个程序 微内核设计:Windows,Solaris //每种功能使用一个单独子系统实现 Linux内核特点: 支持模块化:. ...

  9. C++——标准模板库

    1.泛型程序设计:将程序尽可能写的通用,将算法从特定的数据结构中抽象出来,成为通用的:C++模板为泛型程序设计奠定了关键的基础:STL是泛型程序设计的一个范例:容器container.迭代器itera ...

  10. 右键添加IDEA打开

    在安装IntelliJ IDEA时可能没有选择文件用idea打开的选项,现在有这个需求. 下面就演示一下,如何添加文件右键用idea打开! 1. 打开注册表 win+R键输入regedit 2. 找到 ...