您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 文字特效 >

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

    时间:2014-06-08 00:01 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • 哈哈,有空了可以玩一下。鼠标画文字效果。鼠标移动速度越快,画出文字的间距就越大。 
        源码爱好者提示:按住鼠标左键不放,然后拖动鼠标就可画出文字! 同时按住Ctrl键和鼠标左键,可擦去文字。
    • <script type="text/javascript">
      var Is_Mouse_Down = false
      var Is_First=1
      function Create(evt){
      evt=evt?evt:window.event
      if(Is_Mouse_Down){
      if(evt.ctrlKey){
      Clean(evt)
      }
      else {
      Write(evt)
      }
      }
      }
      function Write(evt){
      evt=evt?evt:window.event
      var 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+=1
      if(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_Nian
      document.body.appendChild(Obj_Nian)
      }
      function Clean(evt){
      evt=evt?evt:window.event
      evt.srcObj=evt.srcElement?evt.srcElement:evt.target
      if(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=Create
      document.onmouseup=function(){Is_Mouse_Down=false}
      </script>
    拖动鼠标画出文字的JavaScript特效由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/wenzi/8542.html
    标签:网站源码