一个拖动鼠标写字的效果

按住鼠标左键不放,在页面中拖动即可写字 ; 同时按住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 条评论
登录 后参与评论

相关文章

来自专栏非典型技术宅

iOS动画系列之二:带时分秒指针的时钟动画(下)1. 创建CALayer2. 设置时分秒针3. 创建CADisplayLink4. 成稿

11710
来自专栏HT

HT for Web 中Painter的介绍及用法

鉴于许多同学对Painter不熟悉,所以撰写此文介绍下。Painter的中文意思是画家、漆工,那放到HT里是什么意思呢?很简单,这是HT特有的一种接口,允许开发...

20060
来自专栏编程微刊

前端js实现打印(导出)excel表格

60720
来自专栏hightopo

HT for Web 中Painter的介绍及用法

9620
来自专栏偏前端工程师的驿站

CSS魔法堂:再次认识font

一、前言                                 文字承载着站点内涵,而良好的字体、排版则为用户提供舒适的阅读体验。本文打算对字体稍微深...

322100
来自专栏Golang语言社区

Golang语言版ssh口令破解工具 --必须亲自敲代码,否则看了白看

使用说明: <img src="http://www.golangweb.com/forum.php?mod=image&aid=220&size=300x30...

433140
来自专栏拂晓风起

结合JSFL/actionscript 实现轮廓动画

11850
来自专栏Golang语言社区

转--Golang语言版 ssh口令破解工具

使用说明: ? iplist的格式为ip:port,如111.111.111.111:22 user.txt为用户名字典 password.txt为密码字典 g...

33670
来自专栏编程微刊

前端js实现打印(导出)excel表格

45120
来自专栏進无尽的文章

实践-跑马灯效果及实现过程解析

9710

扫码关注云+社区

领取腾讯云代金券