拖动鼠标画出文字的JavaScript特效

2024-09-05 12:21:16

字体：大中小

来源：转载

供稿：网友

哈哈，有空了可以玩一下。鼠标画文字效果。鼠标移动速度越快，画出文字的间距就越大。
　　源码爱好者提示：按住鼠标左键不放，然后拖动鼠标就可画出文字！同时按住Ctrl键和鼠标左键，可擦去文字。

<!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:850px;padding-top:8px;padding-bottom:8px;background:#999999;color:#FFFFFF;text-align:center;margin:auto;font-size:14px;}</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;case 6: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=="者")){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走马灯

下一篇：三行文字成批间隙滚动的走马灯效果

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注