js를 사용하여 화면의 특정 위치에 그림을 고정하세요!-JS 튜토리얼-php.cn

js를 사용하여 화면의 특정 위치에 그림을 고정하세요!

藏色散人

풀어 주다： 2022-08-07 10:47:44

앞으로

2274명이 탐색했습니다.

js를 사용하여 스크롤 막대의 스크롤 거리를 가져오고 화면의 특정 위치에 그림을 고정합니다.

아이디어:
1. 개체와 위쪽 및 왼쪽 사이의 거리를 가져옵니다.
2. 요소 개체 가져오기
3. 스크롤 막대가 스크롤될 때 스크롤 막대의 스크롤 거리를 가져옵니다.
4. 스크롤 막대가 스크롤될 때 함수를 실행합니다. 위쪽/왼쪽에서 개체의 거리입니다. 위쪽/왼쪽으로부터의 원래 거리 + 스크롤 막대 스크롤 픽셀 수가 됩니다.

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>

로그인 후 복사

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

로그인 후 복사

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;

로그인 후 복사

관련 권장 사항: [JavaScript 비디오 튜토리얼]

위 내용은 js를 사용하여 화면의 특정 위치에 그림을 고정하세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!