使用js編寫一個簡單的運動框架
下班後，，沒事搗鼓搗鼓個人的小愛好。
首先，說明我的這個運動框架(css所有屬性)也是常見的框架一種，健壯性並不是太好，對於新手學習倒是挺好，，若是大神，老司機請拐彎。
上來，我們先定義一個區塊，然後在關聯一個可以實時看到屬性值發生變化值的標簽。
html：
<body>
<div id = "div1">
</div>
<input type = "text" id = "txt1">
</input>
</body>
css：
#div1{
width:200px;
height:200px;
position:absolute;
top:200px;
left:0px;
background-color:yellow;
opacity:0.3;
filter:alpha(opacity:30);
}
js：
首先，我們先寫頁面加載函數，因為我不是把函數直接綁定到元素上面的方式
//編寫加載函數
window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
//對標簽進行鼠標上移事件綁定
oDiv.onmouseover = function(){
startMove(this , ‘opacity‘,100);
};
//對標簽進行鼠標離開事件綁定
oDiv.onmouseout = function(){
startMove(this, ‘opacity‘,30);
};
};
//編寫得到樣式函數，因為我們需要對元素的css進行動畫
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj, false)[attr];
};
};
//編寫對標簽元素進行控制的運動框架
function startMove(obj,attr,iTarget){
//上來先清除定時器，為什麽自己可以試試看
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//先定義一個獲取當前值的容器
var cur = 0;
//兼容透明度動畫
if(attr == ‘opacity‘){
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
cur = parseInt(getStyle(obj,attr));
}
//設置動畫的步長
//讓動畫具有緩沖效果
var speed = (ITarget-cur)/6;
speed = speed>0?Math.ceil(apeed):Math.floor(speed);
//當動畫需要的步長設置好，之後我們需要進一步判斷我們的目標值，來進一步確認動畫的開始和結束
if(cur == iTarget){
//如果到達了目標值，那麽我們就清除動畫，釋放這個定時器，解放內存
clearInterval(obj.timer);
}
else{
//如果沒有達到我們的目標值，那麽我們需要這個動畫一直持續下去，在這個動畫的變化中，需要對透明度單獨判斷
if(attr == ‘opacity‘){
obj.style.opacity = (cur+speed)/100;
ob.style.filter = ‘alpha(opacity:‘+(cur+speed)+‘)‘;
document.getElementById(‘txt1‘).value = obj.style.opacity;
}
else{
obj.style[attr] = cur+speed+‘px‘;
document.getElementById(‘txt1‘).value = obj.style.opacity;
}
}
},30);
}
使用js編寫一個簡單的運動框架