QQ技术乐园 > 其他好玩 > 网页代码 > js点击特效代码:随机爱心五颜六色的特效

js点击特效代码:随机爱心五颜六色的特效

好玩的js点击特效代码:随机爱心五颜六色的特效

好玩的js点击特效代码:随机爱心五颜六色的特效

鼠标点击特效代码,随机出现五颜六色的爱心哦,代码直接加在<footer>中即可(或者<body>中任意位置)。

代码如下

<script type="text/javascript">
!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>

以上代码也可以直接加在</body>之前,都是一些简单 又有趣的代码,值得分享!

QQ技术乐园提醒:部分教程和软件中可能含有投递者个人宣传广告/QQ/QQ群等联系方式,如涉及交易请谨慎对待!

» 转载保留版权:QQ技术乐园 » js点击特效代码:随机爱心五颜六色的特效

» 本文链接地址:https://www.qqjsly.cn/wydm/111.html

QQ技术乐园资源网站资源来自网络收集,仅供学习和交流,请在下载后24小时内删除。如有侵权、不妥之处,请联系站长并出示版权证明以便删除!

本站非腾讯QQ官方网站 侵权删帖/违法举报/广告合作/资源投稿等事务请联系邮箱:516969467@qq.com 或 QQ516969467

QQ技术乐园,我们一直用心在做!