jQuery点击出现爱心特效_JavaScript

上一篇: JavaScript Canvas实现井字棋游戏下一篇:详细谈谈JavaScript中循环之间的...

jQuery点击出现爱心特效

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了jQuery点击出现爱心特效，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了jquery点击出现爱心特效的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE htML>
<html lang="en">

    <head>
        <;meta charset="UTF-8" />
        <tITle>爱心效果</title>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <style type="text/css">
            #love {
                width: 30px;
                height: 30px;
                /*border: 1px solid red;*/
                position: absolute;
            }
            
            #First {
                width: 15px;
                height: 26px;
                background-color: red;
                position: absolute;
                right: 3.2px;
                bottom: 0;
                transform: rotate(45deg);
                border-radius: 10px 10px 1px 1px;
                opacity: 1;
            }
            
            #second {
                width: 15px;
                height: 26px;
                background-color: red;
                position: absolute;
                left: 3.2px;
                bottom: 0;
                transform: rotate(-45deg);
                border-radius: 10px 10px 1px 1px;
                opacity: 1;
            }
        </style>
    </head>

    <body></body>

    <script type="text/javascript">
        function random(lower, upper) {
            return Math.floor(Math.random() * (upper - lower)) + lower;
        }
        VAR body = document.getelementsbytagname("body")[0];
        document.onclick = function(e) {
            var num = random(0, 19);
            // 颜色数组
            var color = ["peru", "goldenrod", "yellow",
                "chartreuse", "palevioletred", "deeppink",
                "pink", "palegreen", "plum",
                "darkorange", "powderblue", "orangered",
                "orange", "orchid", "red",
                "aqua", "salmon", "gold", "lawngreen"
            ]

            var divmain = document.createElement("div");
            var first = document.createElement("div");
            var second = document.createElement("div");
            // 给div加属性
            divmain.setattribute("id", "love");
            divmain.setAttribute("class", "love");
            first.setAttribute("id", "first");
            second.setAttribute("id", "second");
            // 向最外层内添加内层div
            divmain.appendChild(first);
            divmain.appendChild(second);
            // 根据鼠标位置来确定div的位置
            //divmain.style.top = e.pageY + "px";
            //divmain.style.left = e.pageX + "px";
            divmain.style.cssText = "top:" + e.pageY + "px;left:" + e.pageX + "px";

            // 给心形div加@R_512_1634@
            first.style.backgroundColor = color[num];
            second.style.backgroundColor = color[num];
            body.appendChild(divmain);

            $(".love").aniMATE({
                opacity: "0",
                top: "-=50px"
            }, 1500);

        }

        // 利用定时器来清除页面的垃圾
        setInterval(function() {
            var div = document.getElementsByclassname("love");
            var len = div.length;
            var num;
            for(var i = len - 1; i >= 0; i--) {
                num = parseInt(div[i].style.opacity);
                if(num <= 0) {
                    div[i].remove();
                }
            }

        }, 3500);
    </script>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

您可能感兴趣的文章:@H_126_15@
使用snowfall.jquery.js实现爱心满屏飞的效果
jquery+html5烂漫爱心表白动画代码分享
jQuery结合HTML5制作的爱心树表白动画

脚本宝典总结

以上是脚本宝典为你收集整理的jQuery点击出现爱心特效全部内容，希望文章能够帮你解决jQuery点击出现爱心特效所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: JavaScript Canvas实现井字棋游戏下一篇:详细谈谈JavaScript中循环之间的...

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16

其他相关热搜词更多

php java python 程序员 load post-format-gallery div String 参数开发 List cap Map Class 工具安装 SQL 数据库资源 this