Javascript动画及封装

最新推荐文章于 2024-09-05 16:27:03 发布

Yoren~

最新推荐文章于 2024-09-05 16:27:03 发布

阅读量40

点赞数

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/hafk12/article/details/130391838

版权

1、协议按钮禁止

这里主要注意，禁用属性,disabled:disabled/fase

2、实现物体渐变

利用opacity与定时器，注意小数相减的问题！！！！！！

这里注意的是：that变量,因为dom获取div的对象，并没有声明对应的表达式，所以在此声明that，来代替this所指向的点击事件的对象

3、offset、client、scroll系列

(1)、offset系列

offsetLeft:获取元素距离最左边的距离：

(1)、如果父元素没有定位，距离浏览器最左侧的距离

(2)、如果父元素有定位，距离父元素最左侧的距离

offsetTop:获取元素距离最上边的距离:

(1)、如果父元素没有定位，距离浏览器最上侧的距离

(2)、如果父元素有定位，距离父元素最上侧的距离

offsetWidth:获取元素的宽度，包括border及以内，不包括margin

offsetHeight:获取元素的高度，包括border及以内，不包括margin

offsetParent:获取元素的定位父级元素：　　

如果元素fixed定位，得到null;

元素没有fixed情况下如果元素所有的父级元素都没定位，得到body;

元素没有fixed情况下，父级元素有定位，得到离他最近的有定位的父级元素

(2)、scroll系列

scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度，当滚动条向下拉时，内容往上走，获得的就是上面跑出盒子范围的那部分高度。滚动条向右拉同理

scrollWidth和scrollHeight:获得元素的实际宽度和高度，在内容没有超出盒子时，获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。

根据浏览器兼容性，scroll系列需要写出兼容代码：例如scrollTop:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

(3)、client系列

clientTop和clientLeft：获得上边框和左边框的宽度。

clientWidth和clientHeight:获取可视范围的宽度高度，即边框内部的，不包括border，包括padding.当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。

4、轮播图

var btn = document.querySelector('button')

var flag = true

btn.onclick = function () {

// console.log(15456);

this.innerText = '停止'

if(flag==true){

var section = document.querySelector('section')

var num = 0

// console.log(imgWidth);

var imgWidth = document.querySelector('img').offsetWidth

console.log(imgWidth);

var count = 0

var timer = setInterval(function () {

count++

var timer2 = setInterval(function () {

num += 10

section.scrollLeft = num

if (num >= imgWidth * count) {

clearInterval(timer2)

}

}, 20)

//继续切换

if (count >= 4) {

count = 0

num = 0

}

}, 2000)

}else{

// timer=null

// clearInterval(timer2)

btn.innerText='开始'

}

flag=!flag

}

5、鼠标跟随动画

<style>

body{

background-color: black;

}

img{

width: 50px;

position: absolute;

left: 0;

top: 0;

}

</style>

</head>

<body>

</body>

var img =document.querySelector('img')

document.οnmοusemοve=function(){

var event=event || window.event

img.style.left=event.clientX-img.clientHeight/2+'px'

img.style.top=event.clientY-img.clientHeight/2+'px'

// console.log(event);

}

</script>

此处需要注意的是，img.style.left=event.clientX-img.clientHeight/2+'px'，需要减去图片的一半大小，反正鼠标未位于图片中心位置，还要注意在后加‘PX’

6、返回按钮

var btn=document.querySelector('img')

//定义timer初识为空

var timer=null

btn.οnclick=function(){

// console.log(134);

//清空计时器

clearInterval(timer)

//获取滚动条位置

var scrollTop=document.documentElement.scrollTop || document.body.scrollTop

//定义定时器

timer = setInterval(function(){

//让滚动条位置--

scrollTop-=10

document.documentElement.scrollTop=scrollTop

//不同版本

// document.body.scrollTop=scrollTop

if(scrollTop <=0){

clearInterval(timer)

}

},10)

}

</script>

Yoren~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript动画及封装

scrollWidth和scrollHeight:获得元素的实际宽度和高度，在内容没有超出盒子时，获得的是盒子的内部高度和宽度。clientWidth和clientHeight:获取可视范围的宽度高度，即边框内部的，不包括border，包括padding.当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度，当滚动条向下拉时，内容往上走，获得的就是上面跑出盒子范围的那部分高度。利用opacity与定时器，注意小数相减的问题！
复制链接

扫一扫