最近项目中一些动效，轮播之类的，竟然发现干了这么久前端没有好好写过一个轮播之类的，
不过思路很简单，setInterval改变元素位置，比如改变transform margin position之类的属性。
但是还是有一些细节，比如无缝连接，首尾相接等还是需要稍作考量，而且发现了一个问题，就是在不停的改变"transform:translateY(`${height}`+px)"的时候会闪屏，
解决方案是给移动的元素添加css属性，如下:(当transform的元素背面显示时设置为不显示)
.element {
//1
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
//2
transform:translate3d(0,0,0);
}
下面总结一下js中获取屏幕宽高的方法：
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高度和宽度： window.pageYOffset/window.pageXOffset
ie8之前使用document.body.scrollTop/window.body.scrollLeft
浏览器距离屏幕顶端的距离： window.screenTop
浏览器距离屏幕左端的距离： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
浏览器包括滚动条的宽高(即viewport)：window.innerWidth/window.innerHeight
不包括滚动条（viewport）：document.documentElement.clientWidth/clientHeight
html的尺寸：document.documentElement.offsetWidth/offsetHeight
事件坐标：event.pageX,event,clientX,event.screenX
pageX/Y：从`<html>`原点到事件触发点的CSS的 pixels
clientX/Y：从viewport原点（浏览器窗口）到事件触发点的CSS的 pixels
screenX/Y：从用户显示器窗口原点到事件触发点的设备 的 pixels。
JS获取dom元素的方法：
元素的实际高度： document.getElementById('thisIsId').offsetHeight
元素的实际宽度： document.getElementById('thisIsId').offSetWidth
//document.getElementsByClassName('thisIsClassName')[i].offsetHeight
元素的实际距离左边界的距离： document.getElementById('thisIsId').offsetLeft
元素的实际距离上边界的距离： document.getElementById('thisIsId').offsetTop
jQuery获取屏幕高度：
$(document).ready(function(){
console.log($(window).height()) //浏览器当前窗口可视区域高度
console.log($(document).height()) //浏览器当前窗口文档的高度
console.log($(document.body).height()) //浏览器当前窗口文档body的高度
console.log($(documnet.body).outerHeight(true)) //浏览器当前窗口文档body的总高度，包括border padding margin
})
网友评论