javascript原生360 开机小动画

60 阅读 0 评论 40 点赞

我是靠谱客的博主活力白开水，最近开发中收集的这篇文章主要介绍javascript原生360 开机小动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 322px;
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
width:30px;
height: 20px;
cursor: pointer;
}
</style>
<script src="../jquery1.0.0.1.js"></script>
<script>
// window.onload = function () {
//
//需求：下面的盒子高度变为0，然后大盒子的宽在变为0.
//
var guanbi = document.getElementById("guanbi");
//
var box = guanbi.parentNode;
//
var b = document.getElementById("b");
//
guanbi.onclick = function () {
//
//下面的盒子高度变为0，然后大盒子的宽在变为0.
//
animate(b,{"height":0}, function () {
//
animate(box,{"width":0});
//
});
//
}
// }
//

window.onload=function(){
var oClose=document.getElementById("guanbi");
var oBox=document.getElementsByTagName("div")[0];
var oB=document.getElementById("b");
oClose.onclick=function(){
animate(oB,{"height":0},function(){
animate(oBox,{"width":0});
});
}
}
</script>
</head>
<body>
<div class="box">
<span id="guanbi"></span>
<div class="hd" id="t">
<img src="images/t.jpg" alt=""/>
</div>
<div class="bd" id="b">
<img src="images/b.jpg" alt=""/>
</div>
</div>
</body>
</html>

引入原生Javascript

/**
* Created by Lenovo on 2016/9/11.
*/
function show(ele){
ele.style.display = "block";
}
/**
* 获取元素样式兼容写法
* @param ele
* @param attr
* @returns {*}
*/
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
//参数变为3个
function animate(ele,json,fn){
//先清定时器

clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键)
target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if(bool){
clearInterval(ele.timer);
//所有程序执行完毕了，现在可以执行回调函数了
//只有传递了回调函数，才能执行
if(fn){
fn();
}
}
},1);
}
//获取屏幕可视区域的宽高
function client(){
if(window.innerHeight !== undefined){
return {
"width": window.innerWidth,
"height": window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
}else{
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}