html页面点击出现爱心效果
样式
js代码
先引入jq代码
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
评论区
请写下您的评论...
猜你喜欢
blog
h标签生成目录结构实现点击定位平滑移动
前端(h5)
1847
1.生成树状目录结构基于上篇文章,模拟使用线性顺序的h标签生成了树状的目录结构,只是数据结构的变化,本文将使用实际案例,实现生成目录结构并实现点击定位平滑移动。2.案例点击目录结构的title,页面
blog
web前端html页面添加键盘事件
前端(h5)
2321
web前端html页面添加键盘事件$(document).keydown(function(event){if(event.keyCode==13){document.getElementById
前端(h5)
2949
1.锚点定位很简单两行搞定:ahref="#anchorName"点击跳转到anchorName的位置/aaname="anchorName"anchorName/a2.js代码实现,并带滑动效果
javascript js html
1240
展示将文章中目标区域的h标签,生成目录结构具体代码下载下来看看吧~
blog
前端实现页面滚动div固定
前端(h5)
2046
前端实现页面滚动div固定例:js实现vartop1=$(".scroll").offset().top; window.onscroll=function(){ varwin_top
框架
2481
如果你的eclipse安装了springboot插件可以通过下面方式1.选择springboot项目右击选择spring-adddevtools2.点击后pom文件中会出现一个依赖
file
html纯js实现图片懒加载(测试代码)
html图片懒加载
1291
纯js实现图片懒加载lazyLoading.html测试页面
blog
32个java面试必考点
java基础
1760
32个java面试必考点
最新发表
归档
2018-11
12
2018-12
33
2019-01
28
2019-02
28
2019-03
32
2019-04
27
2019-05
33
2019-06
6
2019-07
12
2019-08
12
2019-09
21
2019-10
8
2019-11
15
2019-12
25
2020-01
9
2020-02
5
2020-03
16
2020-04
4
2020-06
1
2020-07
7
2020-08
13
2020-09
9
2020-10
5
2020-12
3
2021-01
1
2021-02
5
2021-03
7
2021-04
4
2021-05
4
2021-06
1
2021-07
7
2021-08
2
2021-09
8
2021-10
9
2021-11
16
2021-12
14
2022-01
7
2022-05
1
2022-08
3
2022-09
2
2022-10
2
2022-12
5
2023-01
3
2023-02
1
2023-03
4
2023-04
2
2023-06
3
2023-07
4
2023-08
1
2023-10
1
2024-02
1
2024-03
1
2024-04
1
标签
算法基础
linux
前端
c++
数据结构
框架
数据库
计算机基础
储备知识
java基础
ASM
其他
深入理解java虚拟机
nginx
git
消息中间件
搜索
maven
redis
docker
dubbo
vue
导入导出
软件使用
idea插件
协议
无聊的知识
jenkins
springboot
mqtt协议
keepalived
minio
mysql
ensp
网络基础
xxl-job
rabbitmq
haproxy
srs
音视频
webrtc
javascript
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。