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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。