记录一次官网开发

发表于

最近开发了一个官网首页，遇到几个问题，现在做一下记录，方便以后回顾。

一：宽高相关参数

  1. #####window.innerWidth与window.innerHeight

window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是window.innerWidth宽度包含了纵向滚动条的宽度，window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本浏览器不支持)。

1
2
window.innerWidth = width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度

由于本次开发中，可视区没有滚动条，所以他们就代表了窗口可视区宽高。

  1. window.outerWidth与window.outerHeight

window.outerWidth与window.outerHeight：获得的是加上工具条与滚动条窗口的宽度与高度。

1
2
window.outerWidth = width + padding + border + 纵向滚动条宽度
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度
  1. document.documentElement.clientWidth与document.documentElement.clientHeight

document.documentElement.clientWidth与document.documentElement.clientHeight：获得的是屏幕可视区域的宽高，不包括滚动条与工具条，跟jquery的(window).width()与(window).height()获得的结果是一样的。

1
2
document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding

在本次开发中，本来想用这两个数据，但是发现在vue的mounted时候还不能获取到这个数据，所以最后用window.innerWidth和window.innerHeight代替了。

  1. document.body.clientWidth与document.body.clientHeight

document.body.clientWidth与document.body.clientHeight：document.body.clientWidth获得的也是可视区域的宽度，但是document.body.clientHeight获得的是body内容的高度，如果内容只有200px，那么这个高度也是200px,如果想通过它得到屏幕可视区域的宽高，需要样式设置，如下：

1
2
3
4
5
6
7
8
body {
	height: 100%;
	overflow: hidden;
}
body, div, p, ul {
	margin: 0;
	padding: 0;
}

最关键的是：body的height:100%影响document.body.clientHeight的值。
body的margin:0,padding:0影响document.body.clientWidth的值。

二: 将一张与屏幕宽高不一致的图片，在不拉伸图片的情况下，作为屏幕的背景图

如果图片可以拉伸，那直接设置width：100%；height：100%；就可以了。但是这样就拉伸了图片不美观，设计师也不允许。如果不拉伸图片，可以用如下方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
getPageStyle () {
    const windowRate = window.innerWidth / window.innerHeight;
    const imgWidth = 1440;
    const imgHeight = 1024;
    const imgRate = imgWidth / imgHeight;
    let realWidth = 0, 
    realHeight = 0;
    if (windowRate >= imgRate) {
    // 屏幕偏宽，在保持图片比例情况下，将背景图宽度设为和屏幕一致，这时候算出的图片高度一定比屏幕高，多出的部分隐藏
        realHeight = window.innerWidth / imgRate;
        realWidth = window.innerWidth;
    } else {
    // 屏幕偏高，在保持图片比例情况下，将背景图高度设为和屏幕一致，这时候算出的图片宽度一定比屏幕高，多出的部分隐藏
        realWidth = window.innerHeight * imgRate;
        realHeight = window.innerHeight;
    }
    // 背景图的宽度和高度
    this.realWidth = realWidth;
    this.realHeight = realHeight;
}

设置图片backgroundSize：this.realWidth， this.realHeight

三: transfrom: scale(2) translateX(100px). 其实他会平移100*2px

1
2
// 除以this.blockMoveXRate
let leftSpace = (blockLeftDistance - (blockFinalWidth - blockWidth) * 0.5) /

四: reset 3d的css样式的时候，不设置成0而是0.00001，为了解决safari闪烁问题

1
2
3
this.$page.css({
	transform: 'rotateX(' + 0.00001 + 'deg) rotateY(' + 0.00001 + 'deg) '
});

五: 火狐perspective不继承，需要给每个3d元素设置

1
2
3
4
5
6
.section {
    * {
        // 为火狐设置的（如果只在外层设置perspective的话，在火狐里面没用)
		perspective: 800px;
    }
}

六: 设置transition: transform 0.1s 的3d效果的时候，需要把时间设置的很短，不然会出现元素自己缓慢移动的效果，无法形成3D视觉

http://www.jq22.com/yanshi6472

通过外层元素的旋转，内容元素的平移达到3d效果

1
transition: transform 0.1s ease;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const xPer = e.clientX / WIDTH;
const yPer = e.clientY / HEIGHT;

const rotateX = (5 - (yPer * 10)) * 0.3;
const rotateY = (-5 + (xPer * 10)) * 0.3;

const translateX = (-5 + (xPer * 10));
const translateY = (-5 + (yPer * 10));
// 外层  旋转
waiceng.css({
	transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(${rotateX}px)`
});
// 内层  平移
neiceng.css({
	transform: 'translateX(' + -translateX + 'px) translateY(' + -translateY + 'px)',
	transition: 'transform 0.1s'
});