تعیین cursor برای هر لبه [بایگانی]

SCoder

شنبه 31 مرداد 1394, 18:09 عصر

دوست عزیز من در این فایل html یک class بنام Bound نوشتم که با گرفتن pos.x , pos.y از div , همچنین width , height , border اون div در متد containsBorder محل border این div در صفحه رو شناسایی میکنه و اگر موس روی border اون div باشه این متد true می دهد****** نکته : این متد موقیعت x, y موس را به عنوان پارامتر می گیرد ***
و یک متد دیگر مشابه این متد در این کلاس بنام contains وجود دارد که بمانند تد قبلی x,y موس را می گیرد و اگر موس روی div (شامل border)بیاید true میدهد و از این دو متد می توان در handleInput در قسمت window.onload به document.body این را bind کرد ...

یک راه دیگر هم وجود دارد آن هم این است که دو div به وجود بیاوریم و یکی را زیر دیگری قرار دهیم و سپس به div زیری با css یک استایل cursor بخصوص بدهیم و div زیری را کمی بزرگتر از div رویی تعریف کنیم که به مانند border به نظر بیاید ...و با استفاده از javascript هر وقت div رویی تغییر size داد div زیری را هم به همان مقدار تغییر بدهیم....
موفق باشید ....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Default</title>
<meta http-equiv="content-type" content="text/xml;charset=utf-8" />
<meta name="keywords" content="" />
<meta name="language" content="Farsi" />
<link rel="icon" href="" type="image/jpeg" />
<link rel="shortcu icon" href="" type="image/jpeg" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
//<![CDATA[//this line if for xhtml validation
//----------------------
//------Bound Class-----
//----------------------
/**
Desc : this is a Bound class which take an obj
and create an bounding imaginary box around it and
this class has a method which is "contains" returns true if it contins
the pos you give to it
Writer : SCoder
Date : 2015
*/
function Bound(obj)
{
if(typeof obj === 'undefined')
{
throw {
name : 'Argument Error',
message : 'you must give this class an obj to contain it'
}
}
this.obj = obj;

//--------------------
//
// ----Methods-----
//
//--------------------
this.contains = function(x,y)
{
return (x >= this.x) && (x <= (this.x+this.width+2*this.border)) && (y >= this.y) && (y <= (this.y+this.height+2*this.border));
}
this.containsBorder = function(x,y)
{
return ((x >= this.x-this.border) && (x <= (this.x+2*this.border)) && (y >= this.y-this.border) &&
(y <= (this.y+this.height+2*this.border))) ||
((x >= this.x) && (x <= this.x+this.width) && ((y >= this.y-this.border) && (y <= this.y+2*this.border) ||
( (y >=this.y+this.height-this.border) && (y <= this.y+this.height+2*this.border)))) ||
((x >= this.x+this.width) && (x <= this.x+this.width+2*this.border) && (y >= this.y-this.border) &&
(y <= this.y+this.height+2*this.border));
}
}
Object.defineProperty(Bound.prototype,"x",{
get : function()
{
return this.obj.pos.x;
}
});
Object.defineProperty(Bound.prototype,"y",{
get : function()
{
return this.obj.pos.y;
}
});
Object.defineProperty(Bound.prototype,"width",{
get : function()
{
return this.obj.width;
}
});
Object.defineProperty(Bound.prototype,"height",{
get : function()
{
return this.obj.height;
}
});
Object.defineProperty(Bound.prototype,"border",{
get : function()
{
return this.obj.border;
}
});

//----------------------
//-------div object-----
//----------------------
var div = {
DIV : null,
pos : {
x : window.innerWidth/2-200,//the pos on page
y : window.innerHeight/2-200,// the pos y on page
},
border : 5,
width : 320,
height : 200,
create : function()
{
this.DIV = document.createElement('div');
this.DIV.style.position = 'absolute';
this.DIV.style.left = this.pos.x+'px';
this.DIV.style.top = this.pos.y+'px';
this.DIV.style.width = this.width+'px';
this.DIV.style.height = this.height+'px';
this.DIV.style.border = this.border+'px solid red';
//this.DIV.style.
document.body.appendChild(this.DIV);
}

};
// ---------------------
// ----- controler -----
// ---------------------
window.onload = function(){
document.body.onmousemove = handle;
div.create();
var bounding = new Bound(div);
function handle(e)
{
if(!e)
e = window.event;
if(bounding.containsBorder(e.pageX,e.pageY))
{
//means the mouse is on the div
div.DIV.style.cursor = 'cell';
}
else
div.DIV.style.cursor = 'default';
}
}
//]]>
</script>
</head>
<body>
<h3 align = 'center'> اگر موس را یه حاشیه نزدیک کنید تغییر را مشاهده می کنید </h3>
</body>
</html>