jquery获取元素到屏幕底的可视距离

jquery获取元素到屏幕底的可视距离,第1张

$(window)height();//是文档窗口高度

$("div")offset()top//是标签距离顶部高度

$(document)scrollTop();//是滚动条高度

$("div")height();//是标签高度

用户要的高度+$("div")height()+[$("div")offset()top-$(document)scrollTop()]=$(window)height();

扩展资料:

JQuery参考函数

$(“元素”)prepend(content); 将content作为该元素的一部分,放到该元素的最前面

$(“元素”)prependTo(content); 将该元素作为content的一部分,放content的最前面

$(“元素”)remove(“exp”); 删除所有含有exp的元素

$(“元素”)wrap(“html”); 用html来包围该元素

$(“元素”)wrap(element); 用element来包围该元素

参考资料来源:百度百科-jQuery

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style>

body{

margin: 0;

padding: 0;

}

mdiv{

width: 100px;

height: 100px;

background-color: #097df3;

}

</style>

</head>

<body>

<div style="height: 1000px"></div>

<div class="mdiv"></div>

<script src="jquery-211minjs"></script>

<script>

//原生

//获取div距离顶部的距离

var mTop = documentgetElementsByClassName('mdiv')[0]offsetTop;

//减去滚动条的高度

var sTop = documentbodyscrollTop;

var result = mTop - sTop;

consolelog(result);

//Jquery

mTop = $('mdiv')[0]offsetTop;

sTop = $(window)scrollTop();

result = mTop - sTop;

consolelog(result);

</script>

1、拖动后记录x,y值

给div加上mousePosition事件

function mousePosition(evt){  

evt = evt || windowevent;

return {

x : evtclientX + documentbodyscrollLeft - documentbodyclientLeft,

y : evtclientY + documentbodyscrollTop - documentbodyclientTop

}

}

2、打开页面div定位

$(“div”)attr("top",y)attr("left",x);

扩展资料

在用js获取元素的位置之前,元素在页面的位置的计算公式,如下:

元素在页面的位置=此元素相对浏览器视窗的位置+浏览器滚动条的值;

用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置 {这个方法返回的是一个对象,即Object,该对象具有4个属性:top,left,right,bottom }。

<html >

<head>

<meta >

<title>Demo</title>

</head>

<body style="width:2000px; height:1000px;">

<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px;

background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>

</body>

</html>

<script>

documentgetElementById('demo')onclick=function (){

if (documentdocumentElementgetBoundingClientRect) {

alert("left:"+thisgetBoundingClientRect()left)

alert("top:"+thisgetBoundingClientRect()top)

alert("right:"+thisgetBoundingClientRect()right)

alert("bottom:"+thisgetBoundingClientRect()bottom)

var X= thisgetBoundingClientRect()left+documentdocumentElementscrollLeft;

var Y = thisgetBoundingClientRect()top+documentdocumentElementscrollTop;

alert("Demo的位置是X:"+X+";Y:"+Y)

}

}

</script>

以上就是关于jquery获取元素到屏幕底的可视距离全部的内容,包括:jquery获取元素到屏幕底的可视距离、如何从网页代码中看出一个元素到浏览器顶端的距离、js获取div到body左侧距离等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/9493930.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-28
下一篇2023-04-28

发表评论

登录后才能评论

评论列表(0条)

    保存