Maison >interface Web >js tutoriel >Utilisez js pour fixer l'image à une certaine position sur l'écran !

Utilisez js pour fixer l'image à une certaine position sur l'écran !

藏色散人avant: 2022-08-07 10:47:442317parcourir

Utilisez js pour obtenir la distance de défilement de la barre de défilement et fixer l'image à une certaine position sur l'écran

Idées :
1. Obtenez la distance entre l'objet et le côté supérieur et gauche ;
2. Obtenez l'objet élément ;
3. Obtenez la distance de défilement de la barre de défilement lorsque la barre de défilement défile ;
4. Exécutez la fonction lorsque la barre de défilement défile : la distance de l'objet depuis le haut/la gauche ; devient la distance d'origine du haut/gauche + le nombre de pixels de défilement de la barre de défilement.

Code HTML :

<!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>

Code CSS :

*{
            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;
        }

Code js :

 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;

Recommandations associées : [Tutoriel vidéo JavaScript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html JS 对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Utilisez JavaScript pour simuler des jeux de frappe !Article suivant：Utilisez JavaScript pour simuler des jeux de frappe !

Articles Liés

Voir plus