Auslesen von pagex, clientx, screenx, scrolltop positionen
Dieser Code liest deine
pagex,
clientx,
screenx,
scrolltop
Positionen aus und zeigst es deutlich auf den Bildschirm an , kein console.logt
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<script src="/js_webseite/jquery.js"></script>
<meta charset=utf-8 />
<title>client - page - screen</title>
<style>
body{
height:4000px;
width:120%;
}
table{
position:fixed;
width:80%;
left:10%;
top:160px;
background:#eee;
margin:0 auto;
border-spacing:5px 10px;
}
table td{
border:1px solid black;
padding:3px 10px;
}
table th{
background:grey;
color:white;
}
span{
position:absolute;
width:200px;
left:40px;
}
h3,h4,span{
background:white;
margin:0;
padding:0;
}
</style>
</head>
<body>
<h3>Positions Daten auslesen</h3>
<h4>Zeigt die Werte von </h4>
<br><span id="span1">clientx, clienty,
<br><span id="span2">pagex, pagey,
<br><span id="span3">screnx,screeny,
<br><span id="span4">scrollTop und ScrollLeft an
</span></span></span></span>
<table>
<tr>
<th>Mouse position innen:</th>
<th>X </th>
<th>Y</th>
<th> </th>
</tr>
<tr>
<td>- client:</td>
<td id="clientx"></td>
<td id="clienty"></td>
<td>Client Viewport</td>
</tr>
<tr>
<td>- page:</td>
<td id="pagex"></td>
<td id="pagey"></td>
<td>Document Seite(scrollen sie nach unten um den Unteschied zu sehen)</td>
</tr>
<tr>
<td>(scrollTop:</td>
<td id="scrollTopx"></td>
<td id="scrollTopy"></td>
<td>Scroll oben,Scroll Links [pageY-clientY] )</td>
</tr>
<tr>
<td>- screen:</td>
<td id="screenx"></td>
<td id="screeny"></td>
<td>Screen</td>
</tr>
</table>
<script>
$(document).ready(function(e){
var m = ['client','page','screen'];
$(document).mousemove(function(e){
weiter(e);
})
$(document).scroll(function(e){
$('#span4').css('border','2px solid red');
setTimeout(function(){
$('#span4').css('border','2px solid transparent');
},100)
weiter(e);
})
scx=0;
scy=0;
function weiter(e){
for(var i=0; i<3; i++){
$('#'+m[i]).html($('#'+m[i]+'x').text(e[m[i]+'X'])+' '+ $('#'+m[i]+'y').html(e[m[i]+'Y']));
}
$('#scrollTopx').html(
d=$('html, body').scrollTop());
if(scx!=d){
scx=d;
$('#scrollTopx').css('border','2px solid red');
setTimeout(function(){
$('#scrollTopx').css('border','2px solid black');
},100)
}
$('#scrollTopy').text(
d1=$('html, body').scrollLeft());
if(scy!=d1){
scy=d1;
$('#scrollTopy').css('border','2px solid red');
setTimeout(function(){ $('#scrollTopy').css('border','2px solid black');
},100)
}
}
})
</script>
</body>
</html>