在屏幕上涂鸦

这是jq的一个小案例
在黑板上面涂鸦
首先看看样式部分代码

<div style="width:100%;height:100%;position:absolute;left:0;top:0;z-index:3;" class="da"></div>
    <div style="position:absolute;right:0;bottom:0;">按下右键-更多选项</div>
    <div style="position:absolute;left:0;bottom:0;" class="bishu"></div>

    <div class="dee"></div>
<div style="border:1px solid #000;position:absolute;left:0;top:0;width:60px;background-color:#fff;z-index:6;display:none;" class="rightmenu">
        <div onclick='if(!ys){fdd=0;$(".dee").html("")}'>清空画板</div>
        <div onclick="color='#f00'">红色笔</div>
        <div onclick="color='#080'">绿色笔</div>
        <div onclick="color='#ff0'">黄色笔</div>
        <div onclick="color='#fff'">白色笔</div>
        <div onclick="color='#00f'">蓝色笔</div>
        <div onclick="color='#000'">黑色笔</div>
        <div onclick="color='#0f0'">亮绿色笔</div>
        <!--<div onclick="ysks()">演示开始</div>
        <div onclick="ysjs()">演示结束</div>-->
        <div onclick="size=20">大号笔</div>
        <div onclick="size=15">中号笔</div>
        <div onclick="size=10">小号笔</div>
 </div>

先给右击的写好样式再给他隐藏起来
再看看jq代码

<script type="text/javascript">
        var color = "#000"
        var fdd = 0; size = 15; bishu = 0
        $(".da").mousedown(function (event) {//当按下鼠标按钮时，隐藏或显示元素：
            var event = event || window.event
            if (event.which == 1) {
                bishu++
                $(".da").mousemove(function (event) {//获得鼠标指针在页面中的位置：
                    var event = event || window.event
                    fdd += 1
                    $(".dee").append("<div style='left:" + event.clientX + "px;top:" + event.clientY + "px;position:absolute;width:" + size + "px;height:" + size + "px;background-color:" + color + ";border-radius:50%' class='dian dian" + fdd + " bishu" + bishu + "' dian='" + fdd + "'></div>")
                    $(".bishu").html("画点：" + fdd)
                })
                //$(".cx").show()
            }
        })
        //当松开鼠标按钮时，隐藏或显示元素：
        $(".da").mouseup(function () {
            $(".da").unbind("mousemove")
        })

        //把原本右击的隐藏起来
        $(document).contextmenu(function () { return false })

        //设置右击div的位置
        $(".da").mousedown(function (event) {
            var event = event || window.event
            if (event.which == 3) {
                $(".rightmenu").css("left", event.clientX + "px")
                $(".rightmenu").css("top", event.clientY + "px")
                $(".rightmenu").css("display", "")
            } else {
                $(".rightmenu").css("display", "none")
            }
        })

        //点击后隐藏
        $(".rightmenu").click(function () {
            $(".rightmenu").css("display", "none")
        })

        //清空黑板
        var ys = false
        function ysks() {
            if (!ys) { $(".dian").hide(); ys = true; ysopen() }
        }
    </script>