封装运动框架多个属性
生活随笔
收集整理的這篇文章主要介紹了
封装运动框架多个属性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封裝運動框架的多個屬性</title>
<style>
div{ width: 100px; height: 100px; background-color:pink; position: absolute; left: 10px; top: 50px; }
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="demo"></div>
</body>
</html>
<script>
//想法：運用json來完成多個屬性運動
// 1、先獲得出當前樣式
// 2、（最終的樣式-當前的樣式）/10 得到所謂的步長 當前樣式用函數封裝
// 3、得到對象的樣式屬性 = current + step +“px”
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var demo = document.getElementById("demo");
btn200.onclick = function(){
animate(demo,{width:200,top:300,height:600,opacity:40, zIndex:3},function(){ alert("我來了")});
}
btn400.onclick = function(){
animate(demo,{top:200,left:500});
}
// 多個屬性運動框架 添加回調函數
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//開始遍歷json
var flag = true; //用來判斷是否清除定時器
for(var attr in json){
//算出步長 = (目的樣式 - 當前樣式 ) / 10
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
}else
{
current = parseInt(getStyle(obj,attr));
}
// console.log(current)
//json[attr] 表示數值 attr 表示屬性
var step = (json[attr] - current)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//兼容性
if(attr == "opacity") //判斷用戶有沒有輸入透明度
{
// 判斷瀏覽器是否支持這個屬性
if("opacity" in obj.style)
{
obj.style.opacity = (current + step) / 100;
}else
{
obj.style.filter = "alpha(opacity = "+ (current + step)*10 +" )"
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else{
obj.style[attr] = current + step + "px";
}
//如果當前樣式中只要有一個樣式沒執行完畢 都要開著定時器
if(json[attr] != current){
flag = false;
}
}
if(flag) // 用于判斷定時器的條件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很簡單 當定時器停止了。 動畫就結束了 如果有回調，就應該執行回調
{
fn(); // 函數名 + （） 調用函數 執行函數
}
}
},30)
}
//封裝當前樣式函數 返回的是個數值
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr]
}
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封裝運動框架的多個屬性</title>
<style>
div{ width: 100px; height: 100px; background-color:pink; position: absolute; left: 10px; top: 50px; }
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="demo"></div>
</body>
</html>
<script>
//想法：運用json來完成多個屬性運動
// 1、先獲得出當前樣式
// 2、（最終的樣式-當前的樣式）/10 得到所謂的步長 當前樣式用函數封裝
// 3、得到對象的樣式屬性 = current + step +“px”
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var demo = document.getElementById("demo");
btn200.onclick = function(){
animate(demo,{width:200,top:300,height:600,opacity:40, zIndex:3},function(){ alert("我來了")});
}
btn400.onclick = function(){
animate(demo,{top:200,left:500});
}
// 多個屬性運動框架 添加回調函數
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//開始遍歷json
var flag = true; //用來判斷是否清除定時器
for(var attr in json){
//算出步長 = (目的樣式 - 當前樣式 ) / 10
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
}else
{
current = parseInt(getStyle(obj,attr));
}
// console.log(current)
//json[attr] 表示數值 attr 表示屬性
var step = (json[attr] - current)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//兼容性
if(attr == "opacity") //判斷用戶有沒有輸入透明度
{
// 判斷瀏覽器是否支持這個屬性
if("opacity" in obj.style)
{
obj.style.opacity = (current + step) / 100;
}else
{
obj.style.filter = "alpha(opacity = "+ (current + step)*10 +" )"
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else{
obj.style[attr] = current + step + "px";
}
//如果當前樣式中只要有一個樣式沒執行完畢 都要開著定時器
if(json[attr] != current){
flag = false;
}
}
if(flag) // 用于判斷定時器的條件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很簡單 當定時器停止了。 動畫就結束了 如果有回調，就應該執行回調
{
fn(); // 函數名 + （） 調用函數 執行函數
}
}
},30)
}
//封裝當前樣式函數 返回的是個數值
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr]
}
}
</script>
轉載于:https://www.cnblogs.com/zhaocong/p/7360550.html
總結
以上是生活随笔為你收集整理的封装运动框架多个属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： poj 2482 Stars in Yo
- 下一篇： sed编辑器基础