홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

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

저자：Eve Cole 업데이트 시간：2022-08-10 11:30:28

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

아이디어:
1. 상단과 왼쪽에서 물체까지의 거리를 구합니다.
2. 요소 객체를 가져옵니다.
3. 스크롤 막대가 스크롤될 때 스크롤 막대의 스크롤 거리를 가져옵니다.
4. 스크롤 막대가 스크롤될 때 기능이 실행됩니다. 위쪽/왼쪽에서 개체의 거리는 위쪽/왼쪽에서 원래 거리 + 스크롤 막대가 스크롤한 픽셀 수가 됩니다.

HTML 코드:

<!DOCTYPE HTML>
<html>
<머리>
    <meta charset="UTF-8">
    <제목></제목>
</head>
<본문>
    <div ID="왼쪽">
        <img src="images/z1.jpg" alt=""/>
    </div>
    <div id="오른쪽">
        <img src="images/z2.jpg" alt=""/>
    </div>
</body>
</html>

CSS 코드:

*{
            여백: 0;
            패딩: 0;
        }
        몸{
            너비: 2000px;
            높이: 2000px;
        }
        .왼쪽{
            위치: 절대;
            너비: 110px;
            높이: 110px;
            상단: 100px;
            왼쪽: 50px;
        }
        .오른쪽{
            위치: 절대;
            너비: 110px;
            높이: 110px;
            상단: 100px;
            왼쪽: 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("왼쪽");
            objRight=document.getElementById("오른쪽");
            leftT=document.defaultView.getCompulatedStyle(objLeft,null).top;
            leftL=document.defaultView.getCompulatedStyle(objLeft,null).left;
            rightT=document.defaultView.getCompulatedStyle(objRight,null).top;
            rightL=document.defaultView.getCompulatedStyle(objRight,null).left;

        }
        //스크롤 막대 함수로 스크롤된 픽셀 수를 가져옵니다. 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=장소;
        window.onscroll=move;

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

위의 내용은 js를 사용하여 화면의 특정 위치에 그림을 고정하는 것입니다! 더 자세한 사항은 PHP 중국어 홈페이지의 다른 관련 글을 참고해주세요!
관련 기사