offsettop

点滴积累【JS】---JS小功能（JS实现侧悬浮浮动)

由 时光总嘲笑我的痴心妄想 提交于 2020-03-24 23:50:46
效果： 思路： 首先，加载onscroll控制滚动条。然后写缓存运动的方法，缓冲运动的方法是先计算出DIV缓冲的速度，并且将其取整，再进行运动判断什么时候到达终点。最后将其参数返回。再在onscroll里面调用此方法，并且将终点计算出来赋予此方法的参数。 代码： 1 <head runat="server"> 2 <title></title> 3 <style type="text/css"> 4 #div1 5 { 6 width: 200px; 7 height: 200px; 8 background: #0000FF; 9 position: absolute; 10 right: 0; 11 bottom: 0; 12 } 13 </style> 14 <script type="text/javascript"> 15 window.onscroll = function () { 16 var oDiv = document.getElementById('div1'); 17 var DivScroll = document.documentElement.scrollTop || document.body.scrollTop; //获取移动高度 18 // oDiv.style.top = (document.documentElement

javascript模拟title提示效果

由 谁说胖子不能爱 提交于 2020-03-22 12:26:27
本代码可以实现如下情况： 　　1、js实现title是为了解决自定义样式和格式！ 　　2、希望传入的格式可以不限制是否包含html结构！ 　　3、可以自定义显示层的位置！ js如下： function GetAbsoluteLocation(element) { if ( arguments.length != 1 || element == null ) { return null; } var offsetTop = element.offsetTop; var offsetLeft = element.offsetLeft; var offsetWidth = element.offsetWidth; var offsetHeight = element.offsetHeight; while( element = element.offsetParent ) { offsetTop += element.offsetTop; offsetLeft += element.offsetLeft; } return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, offsetWidth: offsetWidth, offsetHeight: offsetHeight }; } function cerateDiv(array

JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

由 泪湿孤枕 提交于 2020-03-16 11:01:09
基本介绍 $(obj).width()与 $(obj).height() $(obj).width()与 $(obj).height() ：jquery方式获取元素的宽高，不包括滚动条与工具条 $(obj).width() = width $(obj).height() = height $(window).width() 与 $(window).height() ：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。 $(window).width() = width + padding $(window).height() = height + padding document.documentElement.clientWidth与document.documentElement.clientHeight document.documentElement.clientWidth 与 document.documentElement.clientHeight ： 获得的是屏幕可视区域的宽高，不包括滚动条与工具条，跟jquery的(window).width()与(window).height()获得的结果是一样的。 document.documentElement.clientWidth = width + padding document.documentElement

css3 引导遮罩层

由 给你一囗甜甜゛ 提交于 2020-03-05 07:56:09
https://blog.csdn.net/tangtang5963/article/details/51276560 要实现遮罩层和部分区域高亮显示，这里的思路是应用了元素的border属性，将元素的四个border值设置的非常大，铺满整个屏幕，这样就实现了页面遮罩部分镂空的效果。 让遮罩层的的宽度和高度等于目标元素的宽度和高度，剩下的遮罩效果就是合理设置遮罩层四个border的值的大小，使遮罩层铺满整个屏幕。 我们想把引导效果做的更加好看一下，制作成椭圆的效果，需要用到css3的border-radius:50%;并且圈圈内带有模糊效果，如何实现？就需要用到css3的box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);这样一个属性。我们需要把当前元素作为外层限制标签，里面重新生成一个大尺寸伪元素，实现内层的高亮椭圆内边缘模糊效果，最终实现的效果如下如图所示： 由于我们的目标元素的宽度和高度是不固定的，我们可以设置各种元素的高亮效果，就不用在手动设置border的宽度来配合目标元素的宽度和高度，有没有一个通用的方法？这就需要用JS来实现啦，js的实现思路如下： 1 获取目标元素的宽度和高度，targetWidth,targetHeight 2 获取页面的宽度和高度,pageWidth,pageHeight 3 获取目标元素在页面中的位置

js中高度与宽度的获取

由 倖福魔咒の 提交于 2020-02-27 09:49:34
JS获取各种宽度、高度的简单介绍 ： scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 offsetWidth 与 style.width 的区别 一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。 二

Javascript——飞机大战之飞机

由 会有一股神秘感。 提交于 2020-02-02 09:59:15
< ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie=edge" > < title > 飞机 < / title > < / head > < style > img { position : absolute ; } #fly { left : 100 px ; top : 200 px ; } < / style > < body > < img src = "./images/2.png" style = "display: none;" id = "pos0" > < img src = "./images/2.png" style = "display: none;" id = "pos1" > < img src = "./images/2.png" style = "display: none;" id = "pos2" > < img src = "./images/2.png" style =

offsetTop,offsetWidth,offsetParent 2

由 无人久伴 提交于 2019-12-31 06:53:56
一直以来对offsetLeft，offsetTop，scrollLeft，scrollTop这几个方法很迷糊，花了一天的时间好好的学习了一下．得出了以下的结果： 1.offsetTop : 当前对象到其上级层顶部的距离. 不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2.offsetLeft : 当前对象到其上级层左边的距离. 不能对其进行赋值.设置对象到页面左部的距离请用style.left属性. 3.offsetWidth : 当前对象的宽度. 与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值 4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值 5.offsetParent : 当前对象的上级层对象. 注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题. 利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．

Js中 关于top、clientTop、scrollTop、offsetTop的用法

由 戏子无情 提交于 2019-12-31 06:52:27
Js 中 关于 top 、 clientTop 、 scrollTop 、 offsetTop 的用法 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth ( 包括边线的宽 ); 网页可见区域高： document.body.offsetHeight ( 包括边线的宽 ); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度： window.screen.availWidth; 1 、 offsetLeft 假设 obj 为某个 HTML 控件。 obj

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

由 匆匆过客 提交于 2019-12-31 03:17:51
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 这里是 JavaScript 中建造迁移转变代码的常用属性 页可见区域宽： document.body

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

由 删除回忆录丶 提交于 2019-12-31 03:17:39
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 这里是 JavaScript 中建造迁移转变代码的常用属性 页可见区域宽： document.body
订阅 offsettop