• 一个拖动鼠标写字的效果


    转自:http://www.caihong.cc/?p=69

    按住鼠标左键不放,在页面中拖动即可写字 ; 同时按住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 {
     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 = 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>
    </head>
    <body onselectstart="javascript:return false">
    <div id="tips">提示:按住鼠标左键不放,在页面中拖动即可写字 ; 同时按住ctrl和鼠标左键不放,在页面中拖动即可把字擦去</div>
    </body>
    </html>

  • 相关阅读:
    APP的LOGO设计需求
    App 中使用 Iconfont 的整套方案
    UI流程总结
    sketch制作LOGO(一)---环形光晕
    Sketch插件--Rename It
    Sketch Measure使用教程
    04 流程控制
    03 python语法注释、用户交互、格式化输出、基本数据类型、运算符
    02编程语言及python初识
    第一课
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/1342401.html
Copyright © 2020-2023  润新知