一个拖动鼠标写字的效果

按住鼠标左键不放,在页面中拖动即可写字 ; 同时按住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 = 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>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏walterlv - 吕毅的博客

Introducing MSTestEnhancer to make unit test result easy to read

发布于 2018-03-05 06:21 更新于 2018-08...

481
来自专栏小L的魔法馆

C++练习--创建Boat类和Car类(含友元)

2835
来自专栏Java后端技术

Shiro+Redis实现tomcat集群session共享

  当我们使用了nginx做项目集群以后,就会出现一个很严重的问题亟待解决,那就是:tomcat集群之间如何实现session共享的问题,如果这个问题不解决,就...

1221
来自专栏Java学习123

五种Spring事务配置的方式

2706
来自专栏杂烩

分布式服务框架之Dubbo整合Spring项目(二)

652
来自专栏曾大稳的博客

Android view绘制流程分析

我们刚接触android开发的时候,应该都是从写布局开始的,在写布局的时候一般组长都要求我们少嵌套,这个是为什么呢?这个就要从我们今天要分析的invalidat...

1153
来自专栏章鱼的慢慢技术路

通过C#脚本实现旋转的立方体

1243
来自专栏Kubernetes

Kubernetes Scheduler源码分析

本文是对Kubernetes 1.5的Scheduler源码层面的剖析,包括对应的源码目录结构分析、kube-scheduler运行机制分析、整体代码流程图、核...

5708
来自专栏Android中高级开发

Android开发之漫漫长途 Ⅴ——Activity的显示之ViewRootImpl的PreMeasure、WindowLayout、EndMeasure、Layout、Draw

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索...

903
来自专栏曾大稳的博客

Android View绘制流程分析

我们刚接触android开发的时候,应该都是从写布局开始的,在写布局的时候一般组长都要求我们少嵌套,这个是为什么呢?这个就要从我们今天要分析的invalidat...

842

扫码关注云+社区