JS让div左右来回滚动,到达页面右端时,从右端回到左端,然后到达左端时,从左端到达右端

JS让div左右来回滚动,到达页面右端时,从右端回到左端,然后到达左端时,从左端到达右端,第1张

在你原来的代码上进行了修改,加粗倾斜的部分是添加或者修改的位置

<script>

  var timer1 = null;

  var el = null;

  var left = 1;

  function moveItRight() {

      if (parseInt(elstyleleft) > (screenwidth - 50)) //elstyleleft = 0;

        {

            left = -1;

        }

        else if (parseInt(elstyleleft) <= 0) {

            left = 1;

        }

        elstyleleft = parseInt(elstyleleft) + 2 left + 'px';//本题目最关键的一句代码,让el对象的左边距每次循环都增加2像素,也就是向右移动了2像素

      timer1 = setTimeout(moveItRight, 25);//隔25毫秒后运行一次moveItRight函数

  }

  windowonload = function () {

      el = documentgetElementById("div1");

      elstyleleft = '500px';

      moveItRight();

  }

</script>

js获取游戏控件方法如下:

//获取坐标位置

function getpos(e) {

var t=eoffsetTop;

var l=eoffsetLeft;

var height=eoffsetHeight;

while(e=eoffsetParent) {

t+=eoffsetTop;

l+=eoffsetLeft;

假设 obj 为某个 HTML 控件。

objoffsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

objoffsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

objoffsetWidth 指 obj 控件自身的宽度,整型,单位像素。

objoffsetHeight 指 obj 控件自身的高度,整型,单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。

“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。 

offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,styletop 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 styletop 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 styletop 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 styletop 返回的是空字符串。

offsetLeft 与 styleleft、offsetWidth 与 stylewidth、offsetHeight 与 styleheight 也是同样道理。

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

eventclientX 相对文档的水平座标

eventclientY 相对文档的垂直座标

eventoffsetX 相对容器的水平坐标

eventoffsetY 相对容器的垂直坐标 

documentdocumentElementscrollTop 垂直方向滚动的值

eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量 

以上主要指IE之中,FireFox差异如下:

IE60、FF106+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE50/55:

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

首先介绍几个属性(都是jquery的属性,可以免去兼容性的烦恼)

1 网页被卷起来的高度/宽度(即浏览器上方隐藏的页面内容高度)

2 浏览器工作区域的高度和宽度

3 元素距离文档顶端和左边的偏移值

4 页面的文档高度

参考文章 >

offset有offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight;

offsetParent:当前容器的父级并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素

offsetWidth:元素的可视宽度,包括元素的边框(border),水平padding,元素本身宽度

offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框)

以上就是关于JS让div左右来回滚动,到达页面右端时,从右端回到左端,然后到达左端时,从左端到达右端全部的内容,包括:JS让div左右来回滚动,到达页面右端时,从右端回到左端,然后到达左端时,从左端到达右端、js获取游戏控件怎么找、js获取元素距离浏览器顶端的距离等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: https://outofmemory.cn/web/9601514.html

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

发表评论

登录后才能评论

评论列表(0条)

保存