拖動鼠標能畫出文字，還能擦除

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   class="lriouxw"   id="tips">提示：按住鼠標左鍵在頁面中拖動即可寫字; 同時按住ctrl和鼠標左鍵不放，可擦去文字！</div></body></html>

上一篇：鼠標跟隨——三色彩帶特效

下一篇：用JS監測鼠標是否移動

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注