JSAPI 06.高级动画(二)

最新推荐文章于 2023-10-27 22:15:28 发布

覔741

最新推荐文章于 2023-10-27 22:15:28 发布

阅读量138

点赞数

文章标签：动画 html javascript

本文链接：https://blog.csdn.net/weixin_60806359/article/details/121939783

版权

本文深入探讨JavaScript高级动画，包括解决浏览器兼容性问题获取body坐标、实现返回顶部动画、利用getComputedStyle获取元素样式、创建手风琴动画以及实现放大镜效果。通过实例代码，展示了如何在网页中实现这些交互增强用户体验。

摘要由CSDN通过智能技术生成

高级动画(二)

1.获取浏览器的body的兼容性问题

在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在html页面怎么获得body的坐标呢，当然有办法-使用document .documentElement来取代document .body,可以这样写

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

总结： 1、document.documentElement.scrollTop标准模式下

2、document.body.scrollTop非标准模式下

标准模式： <!DOCTYPE html>

document.documentElement.scrollTop与 document.body.scrollTop始终有一个为0;

2.返回顶部动画

代码：

var img1 = document.getElementById("img1");

window.onscroll = function () {

// 浏览器的scrollTop

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

console.log(top);

// 文档的可视高度

if (top >= document.documentElement.clientHeight) {

img1.style.display = "block";

} else {

img1.style.display = "none";

}

img1.onclick = function () {

var timer = setInterval(function () {

var step = 100;

document.body.scrollTop -= step;

document.documentElement.scrollTop -= step;

if (document.body.scrollTop || document.documentElement.scrollTop <= 0) {

clearInterval(timer);

}

}, 50)

}

</script>

3.样式计算属性

是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象

语法:

([object CSSStyleDeclaration])，只读。

高级用法（了解）

var style = window.getComputedStyle("元素", "伪类");

var dom = document.getElementById("test"),

style = window.getComputedStyle(dom , ":after");

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

getComputedStyle与currentStyle

Ie下的使用,currentStyle属性不支持伪类样式获取

getPropertyValue方法

getPropertyValue方法，获取样式结果键值对

直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！

使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");

兼容性:getPropertyValue方法IE9+以及其他现代浏览器都支持

4.手风琴动画