首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一个拖动鼠标写字的效果

一个拖动鼠标写字的效果

作者头像
练小习
发布2017-12-29 11:33:20
1K0
发布2017-12-29 11:33:20
举报
文章被收录于专栏:练小习的专栏练小习的专栏

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档