您的位置：首页 > Web前端 > JavaScript

javascript原生360 开机小动画

2017-03-31 15:14 423 查看

<!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
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航