| 红尘梦| 红尘醉
网站鼠标单击显示爱心特效 JS代码分享+教程 - 站长资源网
  • 首页
  • 网站源码
    • 实用源码
    • 小说源码
    • 游戏源码
    • 导航源码
    • 影视源码
    • 企业门户
    • APP源码
    • 小程序源码
  • 程序模板
    • EMLOG模板
    • 织梦CMS模板
    • 杰奇CMS模板
    • 苹果CMS模板
    • WordPress模板
  • 编程学习
    • JS教程
    • CSS教程
    • HTML教程
    • JAVA学习
    • SQL学习
  • 福利分享
    • 软件分享
  • 技术教程
    • SEO教程
  • 随心笔记
  • 插件工具
    • JAVA工具
    • EMLOG插件
    • 采集规则
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 公告动态
    • 关于博主


登录后,享受更多优质服务哦
大哥! 个人中心退出登录
导航菜单
  • 首页
  • 网站源码
    • 实用源码
    • 小说源码
    • 游戏源码
    • 导航源码
    • 影视源码
    • 企业门户
    • APP源码
    • 小程序源码
  • 程序模板
    • EMLOG模板
    • 织梦CMS模板
    • 杰奇CMS模板
    • 苹果CMS模板
    • WordPress模板
  • 编程学习
    • JS教程
    • CSS教程
    • HTML教程
    • JAVA学习
    • SQL学习
  • 福利分享
    • 软件分享
  • 技术教程
    • SEO教程
  • 随心笔记
  • 插件工具
    • JAVA工具
    • EMLOG插件
    • 采集规则
  • 更多功能
    • 留言吐槽
    • 文章归档
    • 我的邻居
    • 公告动态
    • 关于博主
技术教程JS代码鼠标单击特效

网站鼠标单击显示爱心特效 JS代码分享+教程

2019/7/12 站长资源网  技术教程 2209 0

效果演示


1.png



教程说明


    一个很有意思的东西,鼠标单击显示出很多的小爱心,这种效果是用到了js代码,只需要在网站的全局文件,例如:底部文件里面加入js代码,就可以让全站达到这种效果,非常的漂亮,把下面的代码复制到你网站的底部文件里面即可,有需要的朋友可以去捣鼓玩玩



JS代码


<script>

!function(e, t, a) {

function r() {

for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");

requestAnimationFrame(r)

}

function n() {

var t = "function" == typeof e.onclick && e.onclick;

e.onclick = function(e) {

t && t(),

o(e)

}

}

function o(e) {

var a = t.createElement("div");

a.className = "heart",

s.push({

el: a,

x: e.clientX - 5,

y: e.clientY - 5,

scale: 1,

alpha: 1,

color: c()

}),

t.body.appendChild(a)

}

function i(e) {

var a = t.createElement("style");

a.type = "text/css";

try {

a.appendChild(t.createTextNode(e))

} catch(t) {

a.styleSheet.cssText = e

}

t.getElementsByTagName("head")[0].appendChild(a)

}

function c() {

return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"

}

var s = [];

e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||

function(e) {

setTimeout(e, 1e3 / 60)

},

i(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),

n(),

r()

} (window, document);

</script>


 点赞:1  打赏  分享  海报

  • 打赏支付宝扫一扫
  • 打赏微信扫一扫
  • 打赏企鹅扫一扫
作者头像 作者名称 作者性别
站长资源网
联系作者 作者主页

热门推荐

1 使用U盘一键安装电脑win10系统教程
2 K站是什么意思?怎么查询自己的网站有没有被K?
3 网站的域名后缀,会不会影响网站的排名?
4 robots.txt 是什么?它有什么用?
5 EMLOG模板开发者手册 基础文件和PHP调用标签
6 电影网站怎么样才能让百度快速收录?

评论列表

取消回复

随机文章

    • PTCMS小说程序 超精美漂亮的手机端模板 最新小说程序模板源码
      • 苹果CMS V10 大橙子vfed V3.1.5 多功能响应式模板 最新完美破解版
        • EMLOG高仿小刀资源网模板 2019最新修复美化版无任何BUG
          • PTCMS采集规则 81中文网最新可用后台小说采集规则
            • PTCMS采集规则 笔趣岛小说网最新可用后台小说采集规则
  • 分类

    • 网站源码
    • 程序模板
    • 插件工具
    • 技术教程
    • 福利分享
    • 编程学习
    • 随心笔记
    • 网络资讯
    • 商城专区
    • 广告商广告
  • 标签

    响应式 (3) 短视频去水印 (1) 手机商城源码 (1) 随机抽取 (1) 仿Win8 (1) var变量 (1) 宴会厅策划宣传类 (1) EMLOG模板开发手册 (1) 年会软件 (1) 资讯类源码 (2) 播放器源码 (1) 电子科技类 (2) 和平精英 (1) 熊掌号主资料展示 (1) 免费图片api (1) 三星自燃 (1) 二次元动漫风格 (1) 白色简约 (2) 资讯模版 (2) 跳转源码 (1) 腾讯地图api (1) seo教程 (3) EMLOG教程 (3) USDT支付平台搭建 (1) 化工原料类源码 (2) QL3X (1) 杰奇CMS采集规则 (1) 织梦CMS安装教程 (2) 艾K发卡 (1) 纯手机端源码 (1)
  • Emlog简约资源分享主题

    • 采用了简约单调的风格
    • 比较适合资源分享网
    • 一反常态的模板风格类型
    • 全站自适应资源网主题
    • 原创制作的第一款EMLOG模板
    0元

    需要就请骚扰我

    立即下载
  • 网站统计 I 当前在线:8人

    • 本站管理:1位
    • 用户总数:791位
    • 置顶文章:6篇
    • 日志总数:491篇
    • 微语总数:0条
    • 评论总数:6165条
    • 标签总数:655条
    • 页面总数:4页
    • 分类总数:33个
    • 链接总数:12条
    • 运行天数:1459天
    • 最后更新:1月4日
  • 用户登陆

    
    
    找回密码

    找回密码

    密码已找回?返回登陆

    用户注册

    
    
    စ
    
    已有账号?返回登陆
    Copyright © 2023站长资源网 程序:Emlog5.31 主题:Meta 3.54
    • 首页
    • 加群
    • 搜索
    • 模板
    • 用户

    大家都在搜

    • 儿童摄影类织梦模版
    • 苹果CMS
    • wordperss
    • 漫画系统
    • 凉城
    • 口腔医院
    • 口红机游戏
    • 三星自燃
    • H5微商城源码
    • 扒站工具
    • 农家乐类企业网站
    • EMLOG导航源码
    • 公司官网
    • 宴会厅策划宣传类
    • 机械产品
    • 餐饮模版
    • 
    • 