表捉急先看這幾個(gè)知識(shí)點(diǎn)！
取整函數(shù)
| 函數(shù)名 | 功能 |
|---|---|
| Math.ceil() | 向上取整 |
| Math.floor() | 向下取整 |
| Math.round() | 四舍五入函數(shù) |
<br />
js常用訪問 CSS 屬性
- 點(diǎn)語(yǔ)法 box.style.width
- 利用[]訪問屬性 box.style[“width”]
優(yōu)點(diǎn)：可以給屬性傳遞參數(shù)
function getStyle(obj, attr) {
if (obj.currentStyle) {
// ie等
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null)[attr];
// w3c 瀏覽器
}
}
<br />
JSON遍歷
var json = {width:200,height:300,left:50}
for(var k in json)
{
console.log(k); // 屬性
console.log(json[k]); // 值（不帶單位）
}
<br />
1.0 勻速運(yùn)動(dòng)
<br />
清除定時(shí)器惦银，容易發(fā)瘋啊哈哈
速度設(shè)為15px,根據(jù)target與obj.offsetLeft的值來判斷運(yùn)動(dòng)的方向末誓，正右負(fù)左。
然后就動(dòng)一動(dòng)。
根據(jù)target和offsetLeft的差值善炫，當(dāng)差值絕對(duì)值小于15px時(shí)可以停止了
問：為啥是15px?
答：如果target=70,那么offsetLeft的值：0，15，30宪萄，45榨惰，60，75琅催，90……
等等！
發(fā)現(xiàn)了嘛侠碧！吃了炫邁缠黍，等于70的時(shí)候沒有，根本停不下來……既然停不下來瓷式，那么設(shè)定范圍即為速度15~
停止時(shí)設(shè)定obj.style.left = target 就可以咯
function animate(obj, target) {
clearInterval(obj.timer); // 清除定時(shí)器
var speed = obj.offsetLeft < target ? 15 : -15;
// 用來判斷 應(yīng)該 + 還是 -
obj.timer = setInterval(function () {
var result = target - obj.offsetLeft;
// 因?yàn)樗麄兊牟钪挡粫?huì)超過15
obj.style.left = obj.offsetLeft + speed + "px";
if (Math.abs(result) <= 15)
// 如果差值不小于 15 說明到位置了
{
clearInterval(obj.timer);
obj.style.left = target + "px";
// 有15像素差距 我們直接跳轉(zhuǎn)目標(biāo)位置
}
}, 10)
}
<br />
2. 緩速封裝運(yùn)動(dòng)框架1.0
基本原理同1
速度越來越慢贸典，所以使用公式(target - box.offsetLeft) / 10
因?yàn)橥ㄟ^公式計(jì)算出的速度可能為浮點(diǎn)型，所以通過上下取整進(jìn)行計(jì)算一下
問：為什么是上下取整瓤漏？
答：最后的最后，速度可能為0.5蝶俱，0.4……或者-0.5饥漫，-0.4……
正負(fù)數(shù)，你懂的啊庸队，0.5向下取整便0；-0.5當(dāng)然要向上取整啊親竿拆！
不然又停不下來了宾尚，啊哈哈
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var target = 400;
var timer = null;
btn.onclick = function () {
timer = setInterval(function () {
var step = (target - box.offsetLeft) / 10;
step > 0 ? Math.ceil(step) : Math.floor(step);
box.style.left = box.offsetLeft + step + "px";
}, 30);
}
</script>
發(fā)現(xiàn)了嗎
只能向左右動(dòng)谢澈，尷尬御板！
如何自由靈敏全方位無死角動(dòng)起來？
→ biu~ biu~
→ 客官請(qǐng)看
<br />
2. 緩速封裝運(yùn)動(dòng)框架2.0
還記得js如何訪問 CSS 屬性不
不記得就拉到上面look一下
根據(jù)這個(gè)屬性敬鬓，對(duì)運(yùn)動(dòng)函數(shù)進(jìn)行封裝加入了attr笙各，左右上下動(dòng)起來
// 封裝單個(gè)屬性的運(yùn)動(dòng)框架
function animate(obj, attr, target) { // 給誰、什么屬性酪惭、改為多少
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var current = parseInt(getStyle(obj, attr));
// 得到當(dāng)前的樣式 去掉px
var step = ( target - current ) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px";
if (current == target) {
clearInterval(obj.timer);
}
}, 30)
}
<br />
如何變得更加自由靈敏全方位無死角動(dòng)起來？
→ biu~ biu~
→ 客官請(qǐng)看
→ 傲嬌小JSON
<br />
3.緩速封裝運(yùn)動(dòng)框架3.0
在升級(jí)版中加入了回調(diào)函數(shù)砌创，啦啦啦
回調(diào)函數(shù)：等動(dòng)畫執(zhí)行完畢執(zhí)行（定時(shí)器停止時(shí)）鲫懒。并添加透明度的變化
第9行 || 0
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var attr in json) {
var current = 0;
if (attr == "opacity") {
// ie678中如果不能識(shí)別則為undefined，因此 || 0
current = parseInt(getStyle(obj, attr) * 100)|| 0;
}
else {
current = parseInt(getStyle(obj, 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) + ")";
console.log(current);
}
}
else if (attr == "zIndex") {
obj.style.zIndex = json[attr];
}
else {
obj.style[attr] = current + step + "px";
}
if (current != json[attr]) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 5)
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return window.getComputedStyle(obj, null)[attr];
}
}
發(fā)現(xiàn)了嗎甲献？套路颂翼！都是套路！
經(jīng)過不斷封裝朦乏，函數(shù)逐漸變得完善~
更加方便使用
