拖动鼠标能画出文字，还能擦除

2024-09-05 12:22:16

字体：大中小

来源：转载

供稿：网友

很有意思的鼠标文字特效，拖动鼠标就可以画出文字来，还可以擦除文字，是不是很有趣，像画图板一样，虽然没有在哪里见过这效果，但对学习还是很有帮助的，不是吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>鼠标画字</title><style type="text/css">* {-moz-user-select:none;border:0px;}#tips {width:820px;padding-top:10px;padding-bottom:10px;background:#888888;color:#FFFFFF;text-align:center;margin:auto;font-size:10.5pt;}</style><script type="text/javascript">var Is_Mouse_Down = falsevar Is_First=1function Create(evt){evt=evt?evt:window.eventif(Is_Mouse_Down){if(evt.ctrlKey){Clean(evt)}else {Write(evt)}}}function Write(evt){evt=evt?evt:window.eventvar Obj_Nian=document.createElement("DIV")Obj_Nian.style.position="absolute"Obj_Nian.style.left=evt.clientX-10+"px"Obj_Nian.style.top=evt.clientY-10+"px"switch(Is_First){case 1:Obj_Nian.innerHTML="源";break;case 2:Obj_Nian.innerHTML="码";break;case 3:Obj_Nian.innerHTML="爱";break;case 4:Obj_Nian.innerHTML="好";break;case 5:Obj_Nian.innerHTML="者";break;default:Obj_Nian.innerHTML="Error";break;}Is_First+=1if(Is_First==7){Is_First=1}Color_Nian="RGB("+Math.floor(Math.random()*100)+"%,"+Math.floor(Math.random()*100)+"%,"+Math.floor(Math.random()*100)+"%)"Obj_Nian.style.color=Color_Niandocument.body.appendChild(Obj_Nian)}function Clean(evt){evt=evt?evt:window.eventevt.srcObj=evt.srcElement?evt.srcElement:evt.targetif(evt.srcObj.tagName=="DIV" && (evt.srcObj.innerHTML=="源" || evt.srcObj.innerHTML=="码" || evt.srcObj.innerHTML=="爱" || evt.srcObj.innerHTML=="好" || evt.srcObj.innerHTML=="者")){evt.srcObj.innerHTML="" }}document.onmousedown=function(){Is_Mouse_Down=true}document.onmousemove=Createdocument.onmouseup=function(){Is_Mouse_Down=false}</script></head><body onselectstart="javascript:return false"><div id="tips">提示：按住鼠标左键在页面中拖动即可写字; 同时按住ctrl和鼠标左键不放，可擦去文字！</div></body></html>

上一篇：鼠标跟随——三色彩带特效

下一篇：用JS监测鼠标是否移动

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注