使用js获取的相关方法
//回到页面顶部$("#goTotop")click(function(){
$('body,html')animate({scrollTop:0},1500); //点击按钮让其回到页面顶部
});
$(window)scroll(function() {
var yheight1=windowpageYOffset; //滚动条距顶端的距离
var yheight=getScrollTop(); //滚动条距顶端的距离
var height =documentdocumentElementclientHeight//浏览器可视化窗口的大小
var top=parseInt(yheight)+parseInt(height)-217;
var divobj=$("kf");
divobjattr('style','top:'+top+'px;');
})
/
获取滚动条距离顶端的距离
@return {}支持IE6
/
function getScrollTop() {
var scrollPos;
if (windowpageYOffset) {
scrollPos = windowpageYOffset; }
else if (documentcompatMode && documentcompatMode != 'BackCompat')
{ scrollPos = documentdocumentElementscrollTop; }
else if (documentbody) { scrollPos = documentbodyscrollTop; }
return scrollPos;
}
offset 自己的
目的： js中有一套方便的获取元素尺寸的办法就是offset家族；
div { width:220px; border-left:2px solid red; padding:10px;}
divoffsetWidth = 220 + 2 + 20
为什么不用 divstylewidth 因为东西 只能得到行内的数值
如果 父级 都没有定位则以body 为准
这里的父级指的是所上一级 不仅仅指的是 父亲 还可以是 爷爷 曾爷爷 曾曾爷爷。。。。
offsetParent返回该对象的父级 （带有定位） 不一定是亲的爸爸
前面学过一个返回父亲(亲的) parentNode 有所区别
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
1．最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 styletop 不可以 只有定位的盒子 才有 left top right
2．offsetTop 返回的是数字，而 styletop 返回的是字符串，除了数字外还带有单位：px。
3．offsetTop 只读，而 styletop 可读写。
4．如果没有给 HTML 元素指定过 top 样式，则 styletop 返回的是空字符串。
5．最重要的区别 styleleft 只能得到 行内样式 offsetLeft 随便
我们学过一些事件 : onmouseover onmouseout onclick
event 单词翻译过来 事件 的意思
event 就是事件的对象 指向的是 事件 是 onclick
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标 *** 作时候，会添加鼠标位置的相关信息到事件对象中。
普通浏览器支持 event
ie 678 支持 windowevent
是以我们的 电脑屏幕 为基准点 测量
以我们的 文档 （绝对定位） 的基准点 对齐
ie678 不认识
以 可视区域 为基准点 类似于 固定定位
onmouseover onmouseout onclick
onmousemove 当鼠标移动的时候 就是说，鼠标移动一像素就会执行的事件
divonmousemove = function() { 语句 }
当鼠标再div 身上移动的时候，就会执行。
他们相同点 都是 经过 div 才会触发
divonmouseover 只触发一次
divonmousemove 每移动一像素，就会触发一次
onmouseup 当鼠标d起
onmousedown 当鼠标按下的时候
1拖动 原理 == 鼠标按下 接着 移动鼠标 。
baronmousedown = function(){
documentonmousemove = function(){
}
}
2当我们按下鼠标的时候，就要记录当前 鼠标 的位置 - 大盒子的位置
算出 bar 当前 在 大盒子内的距离 。
我们知道 按下鼠标然后拖拽可以选择文字 的。
清除选中的内容
offset 自己的 偏移
offsetWidth 得到自己的宽度
offsetHeight
构成 ： width + padding + border
div width 200 border 3px padding-right: 15px
div offsetWidth = 200 + 6 + 15 = 221
◆ offsetLeft 和 offsetTop
divoffsetLeft
得到距离 这个 div 最近的 带有定位的 父 盒子 左边距离
◆ offsetParent 返回自己的父亲元素 （带有定位的）
parentNode 这个返回亲父亲 不管父亲是否带有定位
◆ styletop 和 offsetTop
offsetTop 只读 只可以得到结果 但是不能赋值
styletop 能得到 （行内式 ） 但是可以给值
styletop 得到的是 25px
offsetTop 得到的是 25
◆ 事件对象 event
divonclick = function(event) { } event 是点击的事件对象
event 集合点击事件的相关信息
pageX 文档的 参考点
clientX 可视区域
ScreenX 屏幕
◆ 常用事件
onmouseover 经过
onmouseout 离开
onmousemove 鼠标移动
var num = 0;
divonmouseover = function() { num++; consolelog(num))} 1
divonmousemove = function() { num++; consolelog(num))}
onmousedown 按下鼠标
onmouseup d起鼠标
拖拽： 先按下鼠标 然后 移动鼠标
baronmousedown = funtion() {
documentonmousemove = function() {}
}
最大 window 对象 document对象
今日案例：筋斗云、点击跟随鼠标、放大镜案例素材获取
链接： > 密码：homu
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的属性，可以免去兼容性的烦恼）
1 网页被卷起来的高度/宽度（即浏览器上方隐藏的页面内容高度）
2 浏览器工作区域的高度和宽度
3 元素距离文档顶端和左边的偏移值
4 页面的文档高度
参考文章 >
要想得到数据必须先得到百度地图的接口，不然怎么调用接口获取数据呢，首先我们在百度首页输入“百度api”回车后第一个就是我们要找的，点击进入。
我们是通过网页获取json数据得到的数据，所以我们选择“开发”-》“Web服务API”点击进入。
进入这个页面后，我们选择“开发指南”-》“Geocoding API”选择这个进入我们想要的接口文档
在这里我们找到通过请求get方式的url，这个url可以通过经纬度获取到地址跟省市，看自己需要什么样的返回格式，有两种，一种是json格式，另一种是xml格式，我们选择json格式的进行测试。
我们直接用url打开，get请求后获取到的数据，可以看到地址省市县这些都有，可以获取经纬度旁边大量的信息。这些显示在页面上的内容我们怎么获取到并加以利用呢。
这里我们写个方法，通过调用百度地图的url获取到我们想要的数据，在获取之前必须先申请ak秘钥，百度的api文档说的很清楚，要先申请了才能使用。
这个是请求url解析获取数据的过程，这个方法截图小编简写了，如果有需要的朋友可以找我要，给我留言就行。
我们在页面上调用这个获取市的方法看看，通过传入经纬度，然后调用百度的api接口，我们可以获取到市的内容。
通过启动tomcat，在地址栏输入访问地址，然后请求得到的数据，地址栏我输入的是南昌市的经纬度，然后返回的是正确的市。这就是我们想要的结果，同样的道理，通过这个方法也能返回地址。
END
注意事项
如果没有秘钥ak是不能利用百度api的接口的，而且这个免费的ak每天只能访问100次，对于我们而且足够用了
如果使用jquery的话，可以这样写：
$(window)bind("scroll", function(){
var top = $(this)scrollTop(); // 当前窗口的滚动距离
});
如果使用原生js，可以这样写（摘自网上的）：
/
获取滚动条距离顶端的距离
@return {}支持IE6
/
function getScrollTop() {
var scrollPos;
if (windowpageYOffset) {
scrollPos = windowpageYOffset; }
else if (documentcompatMode && documentcompatMode != 'BackCompat')
{ scrollPos = documentdocumentElementscrollTop; }
else if (documentbody) { scrollPos = documentbodyscrollTop; }
return scrollPos;
}
以上就是关于怎样用原生js获取滚动条滚动的距离全部的内容，包括:怎样用原生js获取滚动条滚动的距离、前端基本功：JS(八):offset家族、js获取div到body左侧距离等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）