web開發(fā)中基于勻速運(yùn)動的示例分析
這篇文章主要介紹web開發(fā)中基于勻速運(yùn)動的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)是一家專業(yè)提供蘭陵企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、網(wǎng)站制作、html5、小程序制作等業(yè)務(wù)。10年已為蘭陵眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
javascript中，如何讓一個元素(比如div)運(yùn)動起來呢？
設(shè)置基本的樣式，一定要讓div有定位( 當(dāng)然用margin的變化也可以讓元素產(chǎn)生運(yùn)動效果 );
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
}
</style>基本的結(jié)構(gòu):
<input type="button" value="動起來"/> <div id="box"></div>
當(dāng)我們點(diǎn)擊，這個按鈕的時候，要讓div運(yùn)動起來，其實就是讓div的left值持續(xù)變化，那么div就會產(chǎn)生運(yùn)動效果，我們先讓left改變，再讓他持續(xù)改變
window.onload = function(){
var oBtn = document.querySelector( "input" ),
oBox = document.querySelector( '#box' );
oBtn.onclick = function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}那么每當(dāng)我點(diǎn)擊按鈕的時候，div的left值就會在原來的基礎(chǔ)上加上10px。這里也可以用獲取非行間樣式的方法獲取left的值再加上10px，也可以達(dá)到效果
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
window.onload = function () {
var oBtn = document.querySelector("input"),
oBox = document.querySelector('#box');
oBtn.onclick = function () {
oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
}
}offsetLeft與獲取非行間樣式left的值 有什么區(qū)別呢？
offsetLeft沒有px單位，而left是有px單位的
oBtn.onclick = function () {
// alert( css( oBox, 'left' ) ); //0px
alert( oBox.offsetLeft ); //0
}現(xiàn)在div是點(diǎn)擊一下動一下，我們讓他持續(xù)動起來，怎么做？ 加上定時器
oBtn.onclick = function () {
setInterval( function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}, 1000 / 16 );
}當(dāng)我們點(diǎn)擊按鈕時候，div就會不停的向左運(yùn)動，怎么讓他停下來呢？停下來，肯定是需要條件的，比如，我們讓他跑到500px的時候停下來
var timer = null;
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft == 500 ) {
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}, 1000 / 16 );
}這樣，我們就可以讓div停在500px的位置，這里如果我們把步長10 改成 7或者8，你會發(fā)現(xiàn)停不下來了，為什么呢？因為會跳過500px這個判斷條件
0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 從497變成504跳過了500px，所以div停不下來，那怎么辦呢？修改下判斷條件就可以了.
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}把條件變成>=500 清除定時器， 同時還要加上這句代碼oBox.style.left = 500 + 'px'，讓他強(qiáng)制被停在500px, 否則div就不會停在500px, 而是504px了，還有一個問題，如果在div運(yùn)動的過程中，你不停的點(diǎn)擊按鈕，會發(fā)現(xiàn)， div開始加速運(yùn)動了，而不是每次加10px了，這又是為什么呢？這是因為，每次點(diǎn)擊一下按鈕，就開了一個定時器，每次點(diǎn)擊一個按鈕就開了一個定時器，這樣就會有多個定時器疊加，那么速度也會產(chǎn)生疊加，所以div開始加速了，那么我們要讓他保持10px的速度，意思就是不要讓定時器疊加，更通俗點(diǎn)說就是確保一個定時器在開著。應(yīng)該怎么做呢？
oBtn.onclick = function () {
clearInterval( timer );
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}只需要在每次點(diǎn)擊按鈕的時候，清除之前的定時器就可以了，這樣就能確保始終一個定時器開著，至此，一個最基本的勻速運(yùn)動結(jié)構(gòu)就完成了，那么我們可以把他封裝成函數(shù)
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}有了這個函數(shù)之后，我們來小小的應(yīng)用一下。
http://www.jiathis.com/getcode
打開這個網(wǎng)站，你注意看他右邊有個側(cè)欄式效果（分享到），這種特效在網(wǎng)站上很普遍
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>側(cè)邊欄 - by ghostwu</title>
<style>
#box {
width: 150px;
height: 300px;
background: red;
position: absolute;
left: -150px;
top: 50px;
}
#box div {
width: 28px;
height: 100px;
position: absolute;
right: -28px;
top: 100px;
background: green;
}
</style>
<script>
window.onload = function () {
var timer = null;
var oBox = document.getElementById("box");
oBox.onmouseover = function () {
animate(this, 0, 10);
}
oBox.onmouseout = function () {
animate(this, -150, -10);
}
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}
}
</script>
</head>
<body>
<div id="box">
<div>分享到</div>
</div>
</body>
</html>再來一個淡入淡出的效果:
當(dāng)鼠標(biāo)移上去之后，透明度變成1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出 - by ghostwu</title>
<style>
img {
border: none;
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>
<script>
window.onload = function () {
var timer = null;
var oImg = document.getElementById("img");
oImg.onmouseover = function(){
animate( this, 100, 10 );
}
oImg.onmouseout = function(){
animate( this, 30, -10 );
}
//alpha=30 --> 100
function animate(obj, target, speed) {
clearInterval(timer);
var cur = 0;
timer = setInterval(function () {
cur = css( obj, 'opacity') * 100;
if( cur == target ){
clearInterval( timer );
}else {
cur += speed;
obj.style.opacity = cur / 100;
obj.style.filter = "alpha(opacity:" + cur + ")";
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<img src="./img/h5.jpg" alt="" id="img"/>
</body>
</html>以上是“web開發(fā)中基于勻速運(yùn)動的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章題目：web開發(fā)中基于勻速運(yùn)動的示例分析
文章出自：http://aaarwkj.com/article30/pdegso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、域名注冊、電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)建站、建站公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 爆紅的ChatGPT，誰會丟掉飯碗？ 2023-02-20
- ChatGPT的應(yīng)用ChatGPT對社會的利弊影響 2023-02-20
- ChatGPT是什么 2023-02-20
- 怎樣利用chatGPT快速賺錢？ 2023-05-05
- ChatGPT是什么?ChatGPT是聊天機(jī)器人嗎? 2023-05-05
- ChatGPT的發(fā)展歷程 2023-02-20
- 馬云回國，首談ChatGPT。又是新一個風(fēng)口？ 2023-05-28
- 火爆的ChatGPT，來聊聊它的熱門話題 2023-02-20