前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >WordPress给网站添加鼠标点击爱心弹出效果

WordPress给网站添加鼠标点击爱心弹出效果

作者头像
子润先生
修改于 2021-07-07 02:28:12
修改于 2021-07-07 02:28:12
90200
代码可运行
举报
运行总次数:0
代码可运行

一、部署JS代码(将以下代码保存为js文件,文件名:love.js,然后直接引入使用,点击页面任意位置就可以看到效果了)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);


二、引用JS文件
找到主题的footer.php文件中引用js文件,添加以下代码即可
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://www.yangxinzhen.com/love.js"></script>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Wordpress鼠标点击出现爱心
同上文,眼馋各大博主博客令人眼前一亮的设计,想要给自己博客也打扮打扮,今天就来弄弄鼠标点击出现爱心的效果吧!
宋天伦
2020/07/16
7600
给博客左下角添加蒲公英特效以及鼠标点出小心心特效
没事就爱瞎折腾,高级 js 课程也学的差不多了,虽然是一个后端开发,但是自己的网站总不能找别人来写样式或者其他的东西吧。日常维护添加还要是自己的,不忘初心,不能忘记建立博客的目的是什么,送上一个适合放在网站或者博客左下角的特效,有点文艺范,以及鼠标点出小心心 js 特效。 //鼠标点击特效 <script type="text/javascript"> (function(window,document,undefined){ var hearts = [];
沈唁
2018/05/24
7980
css更改鼠标指针样式,几种鼠标点击效果
平常,我们在浏览界面时,会发现鼠标的样式有所不同,鼠标的样式变化和cursor属性有关。cursor属性的几个关键字:default、pointer、wait、help、text、crosshair。
不愿意做鱼的小鲸鱼
2022/09/24
4.9K0
css更改鼠标指针样式,几种鼠标点击效果
编写静态网页_简单html静态网页代码 首页
【完整资源包下载】包含图片、音效等 如果想白嫖可以私信或者发邮件fzx2003zhixue@163.com(回复时间可能比较长……但是看到的话都会回复的~)
全栈程序员站长
2022/11/04
3.7K0
编写静态网页_简单html静态网页代码 首页
鼠标点击爱心效果
代码如下: <script> /* 鼠标点击爱心特效 * luymm */ !function (e, t, a) { function r() { for (var e = 0; e <
用户1040278
2022/10/21
1.8K0
博客园美化大全
1.1、自动生成目录 首先得有js权限 (1)页脚js代码 <script type="text/javascript"> /* 功能:生成博客目录的JS工具 测试:IE8,火狐,google测试通过 zhang_derek 2018-01-03 */ var BlogDirectory = { /* 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) */ getElementPosition:functi
zhang_derek
2018/05/30
1.9K0
博客园博客排版(js样式实例)
昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,当然要分享给各位;
Dawnzhang
2018/10/18
3.7K0
博客园博客排版(js样式实例)
【NexT主题美化】点击页面浮现24字核心价值观
在许多时候,我们希望用户点击页面时会有一定的反馈(如浮现字幕、放烟花)。这次,我们来实现一下如何使用户点击页面时,弹出24字核心价值观。
pai233
2022/01/12
4980
【NexT主题美化】点击页面浮现24字核心价值观
hexo搭建github个人博客
写一个shell文件,把上面的命令写到里面,这样就不用每次都敲一遍了,嘿嘿。。。例如:创建preview.sh,内容如下,这样就可以直接预览了:
七点一刻
2022/06/14
3640
hexo搭建github个人博客
页面点击特效源码解析
这次给大家分享一个被广泛应用在个人网站中的骚骚的效果,就是鼠标左键点击出现小心心,来看下效果 :
石璞东
2020/04/21
1.2K0
Hexo博客主题优化
在 themes/*/source/css/_custom/custom.styl 中添加如下代码:
达达前端
2019/07/03
8480
Hexo博客主题优化
鼠标点击特效
展示: (function() { window.onclick = function(event) { var heart = document.
ProsperLee
2018/10/24
3.5K0
鼠标点击特效
自建Alist共享网盘网站
一、背景 由于百度网盘下载限速,所以就用了天翼云,坚果云,阿里云等,结果每次都要登录,就很拉跨, 所以在这里部署一套共享alist网盘,实现随时随地,只要有网,开箱即用。 二、docker部署 官方地址 1.安装 # 端口自定义即可 docker run -d --restart=always -v /etc/alist:/opt/alist/data -p 5244:5244 --name="alist" xhofe/alist:latest 2.密码化密码 docker exec -it alis
懿曲折扇情
2022/09/06
3.4K0
自建Alist共享网盘网站
hexo优化
本博客采用hexo-theme-next主题,大部分的主题可能只是文件的后缀名不相同,文件名相同,可以使用subline Text 3或者其他编辑器修改配置文件等。
用户9022575
2021/10/04
2780
爱心
想浪漫一点吗,今天教大家用前端编写一个爱心,就用简单的HTML、CSS和 JavaScript,创造一个简洁而浪漫的动画效果
找Bug
2025/03/27
860
爱心
个人博客主题美化
个人博客主题美化 选择主题 Hexo默认的主题是landscape,推荐以下主题: snippet Hiero JSimple BlueLake 详见:https://github.com/searc
小小咸鱼YwY
2019/09/11
1.3K0
个人博客主题美化
typecho博客魔改常用代码
如果出现不显示效果的情况,因为此代码基于 jquery,请在网页头部加入如下代码:
王荣胜
2020/03/13
2.4K0
typecho博客魔改常用代码
【新年气象】WordPress 主题添加花瓣飘落特效
第一步,将”hua.php””snowfall.js”文件上传到当前主题根目录hua文件夹中
小狐狸说事
2022/11/28
6460
个人博客美化教程
(注意这个是joe主题的示例,如果是其它博客的需要将.joe_header__above-logo替换为自己主题logo的组件名词)
Blank.
2023/04/13
1.1K0
个人博客美化教程
Hexo博客框架初识入门到进阶.md
[TOC] 1.Hexo介绍 Q:什么是 Hexo? A:Hexo 是一个快速、简洁且高效的博客框架,Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网
全栈工程师修炼指南
2020/10/23
1.5K0
Hexo博客框架初识入门到进阶.md
相关推荐
Wordpress鼠标点击出现爱心
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档