JavaScript获取元素的位置
2018年4月22日星期日
具体内容
问题：如何让广告图片位置在固定位置不动
1. 取得初始位置
2. 页面滚动事件记录位置值
3. 初始位置值 + 移动后距离值 = 现在图片应该在的位置
4. 运行页面滚动事件
如示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告图片固定位置</title>
<style type="text/css">
#main{text-align:center; width:1014px; margin: 0 auto;}
#adver{
position:absolute;
left:10px;
top:30px;
z-index:2;
}
</style>
</head>
<body>
<div id="adver">
<img src="images/adv.jpg"/>
</div>
<div id="main">
<img src="images/main1.jpg"/>
<img src="images/main2.jpg"/>
<img src="images/main3.jpg"/>
</div>
<script>
var adverTop; //记录初始的Top值的位置
var adverLeft; //记录初始的Left值的位置
var adverObject = document.getElementById("adver");
function init() {
//如果currentStyle值存在的话就代表是IE浏览器
if (adverObject.currentStyle){
//初始化广告图片的顶点值的值(IE浏览器)
adverTop = parseInt(adverObject.currentStyle.top);
//初始化广告图片的左边的值(IE浏览器)
adverLeft = parseInt(adverObject.currentStyle.left);
}else {
//初始化广告图片的顶点值的值(普通浏览器)
adverTop = parseInt(document.defaultView.getComputedStyle(adverObject,null).top);
//初始化广告图片的左边的值(普通浏览器)
adverLeft = parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
}
}
/**
* 广告图片移动方法
*/
function move() {
//取得初始Top值
var sTop = parseInt(document.documentElement.scrollTop || document.body.scrollTop);
//取得初始Left值
var sLeft = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
//需要用初始值加上滚动后的值
adverObject.style.top = adverTop+sTop +"px";
adverObject.style.left = adverLeft+sLeft +"px";
}
//页面加载事件
window.onload = init;
//页面滚动事件
window.onscroll = move;
</script>
</body>
</html> |
元素属性应用