H5标签之浏览器兼容性
在移动端时可以放心的使用h5相关的标签
但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 【兼容】 下载一个 html5shiv.min.js 文件,引入即可
JS之浏览器兼容性
例如在使用requestAnimationFrame之前我们不知道浏览器支不支持,那么就可以通过如下语句去进行判断:
if (window.requestAnimationFrame) {
} else {
}
这样的做法是可以的,但是我想我们还应该考虑一点就是,如果浏览器是部分支持呢?此时又该如何应对?
那么可以像下面这样写:
var requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(fn) {
setTimeout(fn, 16);
};
requestAnimationFrame(function() {
console.log(1);
});
CSS3之浏览器兼容性
如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 【兼容】 下载一个 modernizr.js 文件,引入即可
例如:
/*支持的情况下*/
.flexbox header {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
/* 不支持的情况下 */
.no-flexbox header {
text-align: center;
line-height: 50px;
}
移动端动画
(注:打√的标识支持,红色的√表示在移动端下推荐这样做,打×的表示不支持)
公共部分:
* {
padding: 0;
margin: 0;
}
<button id="btn">start</button>
<div id="box" class="box"></div>
示例1--使用CSS3做动画:
.box {
width: 100px;
height: 100px;
background-color: red;
/*方式1
position: absolute;
transition: left margin-left 1s;
*/
/*方式2
transition: transform 1s;
*/
transition: transform 1s;
}
<script>
var boxEl = document.getElementById('box'),
btnEl = document.getElementById('btn');
// innerWidth表示可视区的宽度;dest目标地址
var dest = window.innerWidth - 100;
btnEl.addEventListener('click', function() {
move(boxEl, dest); //方式1
// boxEl.style.transform = 'translate3d(' + dest + 'px,0,0)'; 方式2
}, false);
function move(el, position) {
el.style.transform = 'translate3d(' + position + 'px, 0, 0)';
}
</script>
当点击按钮后:
示例2--使用JS:
.box {
width: 100px;
height: 100px;
background-color: red;
}
<script>
var requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(fn) {
setTimeout(fn, 16);
};
// 获取相关元素
var boxEl = document.getElementById('box'),
btnEl = document.getElementById('btn');
// 设置目标地址
var dest = window.innerWidth - 100,
speed = 10, //设置速度
position = 0; //设置初始位置
btnEl.addEventListener('click', function() {
requestAnimationFrame(step);
}, false);
function move(el, position) {
el.style.transform = 'translate3d(' + position + 'px, 0, 0)';
}
function step() {
// 先判断当前位置到没到目标位置
if (position < dest) {
// 更新
position += speed;
// 运动一步
move(boxEl, position);
// 运动完后请求下一个位置
requestAnimationFrame(step);
} else { //如果大于等于了目标位置
// 就让它等于目标位置将其移回来
position = dest;
move(boxEl, position);
}
}
</script>