雀雀JavaScript获取元素的位置

最新推荐文章于 2025-04-17 11:42:57 发布

雀雀coder

最新推荐文章于 2025-04-17 11:42:57 发布

阅读量216

点赞数

分类专栏：雀雀学JavaScript基础篇

本文链接：https://blog.youkuaiyun.com/weixin_41873431/article/details/80039986

版权

雀雀学JavaScript基础篇专栏收录该内容

6 篇文章

订阅专栏

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>

元素属性应用