<style>
.animate{
animation:myfirst 3s;
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
@keyframes myfirst{
0% { transform: scale(1); }
10% { transform: scale(1.2); }
20% { transform: scale(1); }
30% { transform: scale(1.2); }
40% { transform: scale(1); }
50% { transform: scale(1.2); }
60% { transform: scale(1); }
70% { transform: scale(1.2); }
80% { transform: scale(1); }
90% { transform: scale(1.2); }
100% { transform: scale(1); }
}
</style> <script>
$(document).click(function(e){
var list = ['学而时习之', '不亦说乎', '有朋自远方来', '不亦乐乎', '人不知而不愠', '不亦君子乎', '三人行 必有我师焉', '择其善者而从之', '其不善者而改之', '学而不思则罔', '思而不学则殆'];
var lists = Math.floor(Math.random() * list.length);
var colors = '#'+Math.floor(Math.random()*0xffffff).toString(16);
var $i = $('<span class="animate" />').text( list[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,
opacity: .5
}, 3000, function(){
$i.remove();
})
})
</script>

这边穿梭进入演示空间

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

  1. JS jQuery 点击页面漂浮出文字

    看到有些网站点击页面任意地方都会弹出文字出来 感觉很炫酷 但其实实现方法很简单 哇哈哈哈~~~ // 调用 ( e, 消失毫秒, 数组, 向上漂浮距离) $(document).click(funct ...

  2. jquery点击按钮弹出图片

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

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

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

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

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

  5. js实现点击按钮弹出上传文件的窗口

    转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...

  6. jQuery点击图片弹出放大特效下载

    效果体验:http://hovertree.com/texiao/jqimg/1/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  7. jquery 点击图片弹出遮罩层查看大图

    <div class="photobox"> <ul> <li data-date="'+data[i].id+'"> &l ...

  8. 请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  9. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

随机推荐

  1. 解决Mac无法写入U盘问题

    注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/upan-to- ...

  2. centos7&python3.6uwsgi安装

    yum install python3-devel.x86_64 pip install uwsgi

  3. c++并发编程之进程创建(给那些想知道细节的人)

    关于多进程创建,此处只讲解一个函数fork(). 1.进程创建 先上代码: #include"iostream" #include<unistd.h> //unix标准 ...

  4. C#效率优化(4)-- 编译器对数组遍历的优化

    在平时开发过程中,数组是我们使用频率最高的类型之一,在使用定长列表时,数组可以说是最佳方案,这也是我们最熟悉的数据结构之一. 在C#中使用数组,可以获取在内存上连续的相同类型的一组变量,在连续访问时可 ...

  5. oracke数据库分区新增

    1.发现一些过程执行报错,报错原因是'ora-14400插入的分区关键字未映射到任何分区',原来是2020年库表的时间子分区未扩展: 2.扩展子分区的语句是 ALTER TABLE 表名 MODIFY ...

  6. Flink架构,源码及debug

    序 工作中用Flink做批量和流式处理有段时间了,感觉只看Flink文档是对Flink ProgramRuntime的细节描述不是很多, 程序员还是看代码最简单和有效.所以想写点东西,记录一下,如果能 ...

  7. Navigation Nightmare POJ - 1984 带权并查集

    #include<iostream> #include<cmath> #include<algorithm> using namespace std; ; // 东 ...

  8. RN开发-修改工程名

    需要修改如下文件:MainActivity.java , strings.xml , AndroidManifest.xml , build.gradle , package.json 1 packa ...

  9. LAMP(六)之以CentOS6自带的rpm包组合安装lamp

    1.Centos7部署应用wordpress 1. 安装php.php-mysql.mariadb yum install php php-mysql mariadb-server 2. 测试 cd ...

  10. setTimeout(call,0)作用

    setTimeout(call,0)作用  经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用, ...