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> |
元素属性应用