A javascript selector

最新推荐文章于 2011-12-02 13:01:20 发布

stefli

最新推荐文章于 2011-12-02 13:01:20 发布

阅读量691

点赞数

分类专栏： Javascript 文章标签： javascript function layer div

本文链接：https://blog.csdn.net/stefli/article/details/2993470

版权

Javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

This is a selector,but there is a problem that it will show an error when you click the body quickly in IE. it's done in FF.i will modifiy it at spare time. If you have some advice,please let me know.

Thanks

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>^_^-Stefli's Selector</title>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
#layer {
    position:absolute; 
    background:#efefef; 
    width:400px; 
    height:400px; 
    top:0p; 
    left:0px;
}
</style>
</head>
<body>
<div id="layer"></div>
<script type="text/javascript">
var drag;
function Class() {
    this.id = 1;
    this.x;
    this.y;
    this.obj;
    
    eval(this.obj + "=this");
    this.initial = function() {
        this.obj = document.createElement("DIV");
        $("layer").appendChild(this.obj);
        with(this.obj) {
            id = this.id;
            this.obj.style.position = "absolute";
            this.obj.style.border = "1px solid #00f";
            this.obj.style.lineHeight = "0px";
            this.obj.style.display = "none";
            thisthis.id = this.id + 1;
        }
    }
    this.move = function(x, y) {
        this.x = x;
        this.y = y;
        this.obj.style.left = x;
        this.obj.style.top = y;
    }
    this.draw = function(e) {
        this.obj.style.display = "";
        var px = (e.clientX - this.x)>0?this.x:e.clientX;
        var py = (e.clientY - this.y)>0?this.y:e.clientY;
        if(e.clientX==this.x) {
            this.obj.style.borderLeft = "0px";
        } else {
            this.obj.style.borderLeft = "1px solid #00f";
        }
        if(e.clientY==this.y) {
            this.obj.style.borderTop = "0px";
        } else {
            this.obj.style.borderTop = "1px solid #00f";
        }
        this.obj.style.left = px;
        this.obj.style.top = py;
        this.obj.style.width = Math.abs(e.clientX - this.x);
        this.obj.style.height =  Math.abs(e.clientY - this.y);
    }
    this.clear = function() {
        $("layer").removeChild(this.obj);
    }
    this.initial();
}
function setup(e) {
    drag = true;
    a = new Class();
    ee = e?e:window.event;
    a.move(e.clientX, e.clientY);
}
function draw(e) {
    ee = e?e:window.event;
    if(drag) {
        a.draw(e);
    }
}
function clear() {
    drag = false;
    a.clear();
}
function $(id) {
    return document.getElementById(id);
}
$("layer").onmousedown = setup;
$("layer").onmousemove = draw;
$("layer").onmouseup = clear;
</script>
</body>
</html>
 

stefli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
A javascript selector

This is a selector,but there is a problem that it will show an error when you click the body quickly in IE. its done in FF.i will modifiy it at spare time. If you have some advice,please let me know
复制链接

扫一扫