Rumah > Artikel > hujung hadapan web > Gunakan js untuk membetulkan gambar pada kedudukan tertentu pada skrin!

Gunakan js untuk membetulkan gambar pada kedudukan tertentu pada skrin!

藏色散人ke hadapan: 2022-08-07 10:47:442252semak imbas

Gunakan js untuk mendapatkan jarak tatal bar skrol dan betulkan gambar pada kedudukan tertentu pada skrin

Idea:
1. Dapatkan jarak objek dari bahagian atas dan kiri; 2. Dapatkan objek elemen; ;
4. Bar tatal Fungsi dilaksanakan apabila menatal: jarak objek dari atas/kiri menjadi jarak asal dari atas/kiri dengan bilangan piksel yang ditatal oleh bar tatal.

kod html:

kod css:

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

kod js:

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

Cadangan berkaitan: [

 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 Tutorial video

】

Atas ialah kandungan terperinci Gunakan js untuk membetulkan gambar pada kedudukan tertentu pada skrin!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html JS 对象

Kenyataan：

Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Gunakan JavaScript untuk mensimulasikan permainan menaip!Artikel seterusnya：Gunakan JavaScript untuk mensimulasikan permainan menaip!

Artikel berkaitan

Lihat lagi