Verwenden Sie js, um das Bild an einer bestimmten Position auf dem Bildschirm zu fixieren!-js-Tutorial-php.cn

Verwenden Sie js, um das Bild an einer bestimmten Position auf dem Bildschirm zu fixieren!

藏色散人

Freigeben： 2022-08-07 10:47:44

nach vorne

2308 Leute haben es durchsucht

Verwenden Sie js, um den Bildlaufabstand der Bildlaufleiste zu ermitteln und das Bild an einer bestimmten Position auf dem Bildschirm zu fixieren.

Ideen:
1. Ermitteln Sie den Abstand zwischen dem Objekt und der oberen und linken Seite ;
2. Holen Sie sich das Elementobjekt;
3. Holen Sie sich den Bildlaufabstand der Bildlaufleiste, wenn die Bildlaufleiste scrollt.
4. Führen Sie die Funktion aus, wenn die Bildlaufleiste scrollt: den Abstand des Objekts von oben/links wird zum ursprünglichen Abstand von oben/links + der Anzahl der Bildlaufpixel der Bildlaufleiste.

HTML-Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="left">
        <img src="images/z1.jpg" alt=""/>
    </div>
    <div id="right">
        <img src="images/z2.jpg" alt=""/>
    </div>
</body>
</html>

Nach dem Login kopieren

CSS-Code:

*{
            margin: 0;
            padding: 0;
        }
        body{
            width: 2000px;
            height: 2000px;
        }
        .left{
            position: absolute;
            width: 110px;
            height: 110px;
            top: 100px;
            left: 50px;
        }
        .right{
            position: absolute;
            width: 110px;
            height: 110px;
            top: 100px;
            left: 1360px;
        }

Nach dem Login kopieren

js-Code:

 var leftT;//左侧p距离顶部距离
        var leftL;//左侧p距离左侧距离
        var rightT;//右侧p距离顶部距离
        var rightL;//右侧p距离左侧距离

        var objLeft;//左侧p文档对象
        var objRight;//右侧p文档对象

        function place(){
            objLeft=document.getElementById("left");
            objRight=document.getElementById("right");
            leftT=document.defaultView.getComputedStyle(objLeft,null).top;
            leftL=document.defaultView.getComputedStyle(objLeft,null).left;
            rightT=document.defaultView.getComputedStyle(objRight,null).top;
            rightL=document.defaultView.getComputedStyle(objRight,null).left;

        }
        //获取滚动条滚动的像素数
        function move(){
            var scrollT=document.documentElement.scrollTop;
            var scrollL=document.documentElement.scrollLeft;
            //设置左侧p距离顶部的像素
            objLeft.style.top=parseInt(leftT)+scrollT+"px";
            objLeft.style.left=parseInt(leftL)+scrollL+"px";
            objRight.style.top=parseInt(rightT)+scrollT+"px";
            objRight.style.left=parseInt(rightL)+scrollL+"px";
        }
        window.onload=place;
        window.onscroll=move;

Nach dem Login kopieren

Verwandte Empfehlungen: [JavaScript-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um das Bild an einer bestimmten Position auf dem Bildschirm zu fixieren!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!