新葡亰496net 新葡亰编程 获取控件在网页中的绝对位置

获取控件在网页中的绝对位置

对此扭转的物件(平时是 div),大家普通能够利用 style.top
获取其离网页最上方(不是窗口最上方)的职位,但对于静态的的物件,比方网页上任风度翩翩开关,要博取其间距页面顶上部分和最左端的岗位就不那么轻松了。

矩形碰撞检查实验:

复制代码 代码如下:

选用 offsetTop、offsetLeft、offsetParent(为了合营,不能应用
parentElement)。

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
body {
margin: 0;
}
#wrap {
margin: 50px auto;
position: relative;
border: 1px solid #000;
width: 600px;
height: 500px;
}
#div {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
#div2 {
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”div2″></div>
<div id=”div”>文字</div>
</div>
<script type=”text/javascript”>
(function(){
var div = document.querySelector(‘#div’);
var maxX = div.offsetParent.clientWidth – div.offsetWidth;
var maxY = div.offsetParent.clientHeight – div.offsetHeight;
div.addEventListener(‘mousedown’, function(e) {
e.preventDefault();
var start = {x: e.clientX,y: e.clientY};
var elOffset = {x: div.offsetLeft,y: div.offsetTop};
document.addEventListener(‘mousemove’, move);
document.addEventListener(‘mouseup’, end);
function move(e){
var dis = {x:e.clientX – start.x,y:e.clientY – start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
x = x<0?0:(x>maxX?maxX:x);
y = y<0?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + “px”;
div.style.top = y + “px”;
if(getCollide(div,div2)){
div2.style.background = “green”;
} else {
div2.style.background = “yellow”;
}
}
function end(){
document.removeEventListener(‘mousemove’, move);
document.removeEventListener(‘mouseup’, end);
}
});
})();
//碰撞重返 true 不然 再次回到 false
function getCollide(el,el2){
var rect = el.getBoundingClientRect();
var rect2 = el2.getBoundingClientRect();
if(rect.right < rect2.left
||rect.left > rect2.right
||rect.bottom<rect2.top
||rect.top>rect2.bottom){
return false;
}
return true;
}
</script>
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”” >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title></title>
<style type=”text/css”>
body
{
height:2000px;
}
.float_mx{
background:#CCC;
width:100px;
height:100px;
display:none;
}
</style>
</head>
<body>
<div class=”float_mx”>
在这里增多内容
</div>
<script
src=””
type=”text/javascript”></script>
<script type=”text/javascript”>
(function($) {
$.fn.scrollBox = function(options){
var defaultOptions = {
speed: 0.1, //加速
time: 16, //移动速度
top: 200, //暗中同意顶上部分
align: ‘right’, //浮动地方,可选左、右
mix: 0 //边距
};
var options = $.extend(defaultOptions, options);
this.each(function(){
var obj = $(this);
init();
function init(){
obj.css(‘display’, ‘block’);
obj.css(‘position’, ‘absolute’);
obj.css(options.align, options.mix);
obj.css(‘top’, options.top+’px’);
obj.css(‘z-index’, ’99’);
move();
}
function back() {
acceleration = options.speed;
time = options.time;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x = Math.max(x1, x2);
var y = Math.max(y1, y2);
var speed = acceleration;
return {
l: x,
t: y,
s: speed
};
};

下面包车型大巴次第中,将赶回的值密闭成了类
CPos,此类独有多少个分子变量:x-表示距页面最左端的相距,y-表示距页面最上端的间距。

圆形碰撞检验:

function move(){
var tip = obj;
var old = options.top;
var pos = back().t;
pos = pos – $(tip).Coordinate().y + options.top;
pos = $(tip).Coordinate().y + pos / 10;
if (pos < options.top) {
pos = options.top;
}
if (pos != old) {
tip.css(‘top’,pos + “px”);
}
old = pos;
window.setTimeout(function(){move();}, options.time);
};
});
};
$.fn.Coordinate = function(){
var E = $(this)[0];
var C = E.offsetTop;
var B = E.offsetLeft;
var A = E.offsetWidth;
var D = E.offsetHeight;
while (E = E.offsetParent) {
C += E.offsetTop;
B += E.offsetLeft;
}
return {
x: B,
y: C,
w: A,
h: D
};
};
})(jQuery);
$(‘.float_mx’).scrollBox();
</script>
</body>
</html>

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图