一个拖动鼠标写字的效果

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

相关文章

来自专栏转载gongluck的CSDN博客

cocos2dx 钢琴

#include "PianoScene.h" #include "SimpleAudioEngine.h" USING_NS_CC; Scene* Pia...

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

CSS魔法堂:再次认识font

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

23010
来自专栏Golang语言社区

Golong 语言开发 go-websocket-sample 测试值得拥有

package main import ( "flag" "fmt" "io" "net/htt...

4395
来自专栏非典型技术宅

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

871
来自专栏Youngxj

Canvas画板

2554
来自专栏技术总结

学会不一样的Loading图

上述效果,其实很多app就单纯这样使用了,但是我们为了更美化,决定为其增加动态效果

1054
来自专栏Golang语言社区

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

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

41114
来自专栏拂晓风起

结合JSFL/actionscript 实现轮廓动画

1035
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(6)---定义单元格的外观

在Spread中每个单元格都可以被看作一个独立的对象,开发人员不仅可以设置单元格的类型,而且可以为每个单元格设置不同的外观属性。 设置单元格的颜色 你可以为一个...

1889
来自专栏菩提树下的杨过

Flash/Flex学习笔记(37):不用系统组件(纯AS3)的视频播放器--只有8.82K

以前为了赶项目,利用系统组件制作过一款视频播放器(见Flash/Flex学习笔记(6):制作基于xml数据源的flv视频播放器),但是系统组件实在是太大了,最终...

20010

扫码关注云+社区