Javascript实现鼠标点击冒泡特效
本文实例为大家分享了js鼠标点击冒泡的具体代码,供大家参考,具体内容如下
一个用JS写的鼠标左击特效
点击鼠标左键会出现红心”❤”或者字符表情“(๑•́₃•̀๑)”…
常用Emoji
可以自行替换,如需复制,请从底部链接移步至Github
代码
onload=function(){ varclick_cnt=0; var$html=document.getElementsByTagName("html")[0]; var$body=document.getElementsByTagName("body")[0]; $html.onclick=function(e){ var$elem=document.createElement("b"); $elem.style.color="#E94F06"; $elem.style.zIndex=9999; $elem.style.position="absolute"; $elem.style.select="none"; varx=e.pageX; vary=e.pageY; $elem.style.left=(x-10)+"px"; $elem.style.top=(y-20)+"px"; clearInterval(anim); switch(++click_cnt){ case10: $elem.innerText="OωO"; break; case20: $elem.innerText="(๑•́∀•̀๑)"; break; case30: $elem.innerText="(๑•́₃•̀๑)"; break; case40: $elem.innerText="(๑•̀_•́๑)"; break; case50: $elem.innerText="( ̄へ ̄)"; break; case60: $elem.innerText="(╯°口°)╯(┴—┴"; break; case70: $elem.innerText="૮(ᵒ̌皿ᵒ̌)ა"; break; case80: $elem.innerText="╮(。>口<。)╭"; break; case90: $elem.innerText="(งᵒ̌皿ᵒ̌)ง⁼³₌₃"; break; case100: case101: case102: case103: case104: case105: $elem.innerText="(ꐦ°᷄д°᷅)"; break; default: $elem.innerText="❤"; break; } $elem.style.fontSize=Math.random()*10+8+"px"; varincrease=0; varanim; setTimeout(function(){ anim=setInterval(function(){ if(++increase==150){ clearInterval(anim); $body.removeChild($elem); } $elem.style.top=y-20-increase+"px"; $elem.style.opacity=(150-increase)/120; },8); },70); $body.appendChild($elem); }; };
预览
Github地址:JSClickBubble
更多JavaScript精彩特效分享给大家:
Javascript菜单特效大全
javascript仿QQ特效汇总
JavaScript时钟特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。