网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 鼠标特效 >> 正文
最新文章
· jQuery鼠标悬停显示提示信息窗口
· 网页上记录鼠标的点击次数
· Js模拟的Windows上下文右键菜单代码
· 一个挺漂亮的鼠标跟随效果
· 用方向键来控制图片移动
· 实时动态获得鼠标在网页中X、Y坐标
· JavaScript取得按下键盘的方向键是哪
· Js用按钮检测鼠标是单击还是双击
· 给网页定义快捷键
· 鼠标跟随提示效果
热门文章
 jQuery鼠标悬停显示提示信息窗口
 用方向键来控制图片移动
 Js用按钮检测鼠标是单击还是双击
 Js模拟的Windows上下文右键菜单代码
 JavaScript取得按下键盘的方向键是
 网页上记录鼠标的点击次数
 实时动态获得鼠标在网页中X、Y坐标
 在网页中实现写字和橡皮擦的特效
 一个挺漂亮的鼠标跟随效果
 鼠标跟随提示效果
相关文章
没有相关文章
在网页中实现写字和橡皮擦的特效
来源:轩魂国度 更新时间:2009/5/12 16:53:26 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<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"><span href="tag.php?name=%CC%E1%CA%BE" onclick="tagshow(event)" class="t_tag">提示</span></span>:按住鼠标左键不放,在页面中<span href="tag.php?name=%CD%CF%B6%AF" onclick="tagshow(event)" class="t_tag">拖动</span>即可写字 ; 同时按住ctrl和鼠标左键不放,在页面中拖动即可把字擦去</div>
</body>

△运行 ☉预览 #复制 +收藏
特效说明:
在网页中实现写字和橡皮擦的特效
  • 上一篇文章: 没有了
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号