運動框架和隱藏邊框
阿新 • • 發佈：2019-02-12
一個完美的運動框架是經過不斷地改善調整過來的，可以適合各種樣式的運動。在JS運動中一下幾點是至關重要的：
1.不加絕對定位的話是肯定不會動的！
2.運動框架中：在開始運動時，關閉已有定時器。把運動和停止隔開。（if、else）
3.透明度在IE中支援：filter：alpha（opacity：30），在FF和Chrome中opacity：0.3。
4.緩衝運動中，距離越遠，速度越大，速度由距離決定。速度要取整，不然會出現抖動。取整的方法有：Math.ceil 向上取整；Math.floor向下取整；Math.abs取絕對值；Math.round四捨五入；
而框架的演變也是慢慢一步步優化過來的：
startMove（iTarget）
startMove（obj,iTarget）
startMove（obj,attr,iTarget）
startMove（obj,attr,iTarget,fn）
startMove（obj,json）
startMove（obj,json,fn）
運動框架如下：
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
//startMove(oDiv, {width: 400, height: 400})
function startMove(obj, json, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function 下面看一個例項：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隱藏邊框</title>
<style type="text/css">
#div1 {width: 100px;height: 100px;position:absolute;background-color:red;left:-100px;}
#div1 span {width: 30px;height:50px;background-color:yellow;line-height: 25px;position: absolute;right:-30px;top: 25px;}
</style>
<script type="text/javascript" src='move2.js'></script>
<script type="text/javascript">
window.onload=function()
{
var oDiv = document.getElementById('div1');
var img = oDiv.getElementsByTagName('img');
oDiv.onmouseover=function()
{
startMove(oDiv,{left:0})
};
oDiv.onmouseout=function()
{
startMove(oDiv,{left:-100})
};
};
</script>
</head>
<body>
<div id="div1">
<img src="images/114.gif" width="100px" height="100px" alt="">
<span>分享</span>
</div>
</body>
</html>這是一個藏在邊上的隱藏邊框，可以結合右側懸浮框將其進行優化。