当前位置：网站首页>[positioning in JS]

[positioning in JS]

2022-07-05 03:33:00 【renrenrenrenqq】

js Middle positioning

1. Mouse events

clientX： When a mouse event occurs （ Whether it's onclick, still omousemove,onmouseover etc. ）, Mouse relative to browser （ This is the effective area of the browser ）x Position of the shaft ;
clientY： When a mouse event occurs , Mouse relative to browser （ This is the effective area of the browser ）y Position of the shaft ;
screenX： When a mouse event occurs , The mouse is relative to the display screen x Position of the shaft ;
screenY： When a mouse event occurs , The mouse is relative to the display screen y Position of the shaft ;
offsetX： When a mouse event occurs , The mouse is relative to the event source x Position of the shaft
offsetY： When a mouse event occurs , The mouse is relative to the event source y Position of the shaft
pageX： When a mouse event occurs , Mouse relative to browser x Position of the shaft
pagey： When a mouse event occurs , Mouse relative to browser Y Position of the shaft
for instance

<script>
        let div= document.querySelector('div')
        div.addEventListener('click',function(event){
    
            console.log('screenX:',event.screenX)
            console.log('clientX:',event.clientX)
            console.log('offsetX:',event.offsetX)
            console.log('pageX:',event.pageX)

        })
    </script>

Exhibition ：

If the page does not have a scroll bar client value =page value
The following figure shows the values with scroll bars
Insert picture description here
client The value is the viewport size
page The value is the browser size

2. Application

1. A picture appears at the mouse click

img style="left:0px;top: 0px;" src="./html-01/images/ house .png" alt=""> -->
<!-- <script>
        let img=document.querySelector('img')
        document.onclick=function(event){
    
img.style.display='block'
        }
        document.onmousemove=function(event){
    
            
            img.style.left=event.offsetX+'px'
            img.style.top=event.offsetY+'px'
        }
    </script> -->

2. Animation appears when the mouse is dragged

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #img{
    
            position: absolute;
        }
        body{
    
            height: 1000px;
            width: 1000px;

        }
    </style>
</head>
<body>
<img id="img" src="./html-01/images/ house .png" alt="">
<script src="common.js"></script>
<script>

var img=document.getElementById("img");
document.onmousemove = function(event){
    
  // Solve compatibility problems 
    event = event||window.event;
    // Get the coordinates of the mouse 
    //client Visible window coordinates 
    // var X=event.clientX;
    // var Y=event.clientY;
    //div The offset of is relative to the whole page 
    // var X=event.pageX;//IE8 Do not apply 
    // var Y=event.pageY;

    // Firefox and other browsers think that the browser's scroll bar is html Of 
     var st=document.body.scrollTop||document.documentElement.scrollTop;
    var sl=document.body.scrollLeft||document.documentElement.scrollLeft;

    var X=event.clientX;
    var Y=event.clientY;
    // Set picture coordinates 
    img.style.left=X+sl+"px";
    img.style.top=Y+st+"px";
}


</script>
</body>
</html>