點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

基于勻速運動的實例講解(側(cè)邊欄,淡入淡出)

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:27:57

基于勻速運動的實例講解(側(cè)邊欄,淡入淡出)

基于勻速運動的實例講解(側(cè)邊欄,淡入淡出):javascript中，如何讓一個元素(比如div)運動起來呢？設(shè)置基本的樣式，一定要讓div有定位( 當然用margin的變化也可以讓元素產(chǎn)生運動效果 ); <style> div { width: 100px; height: 100px; background: red; positio

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀基于勻速運動的實例講解(側(cè)邊欄,淡入淡出):javascript中，如何讓一個元素(比如div)運動起來呢？設(shè)置基本的樣式，一定要讓div有定位( 當然用margin的變化也可以讓元素產(chǎn)生運動效果 ); <style> div { width: 100px; height: 100px; background: red; positio

javascript中，如何讓一個元素(比如div)運動起來呢？

設(shè)置基本的樣式，一定要讓div有定位( 當然用margin的變化也可以讓元素產(chǎ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>

當我們點擊，這個按鈕的時候，要讓div運動起來，其實就是讓div的left值持續(xù)變化，那么div就會產(chǎ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';
 }
 }

那么每當我點擊按鈕的時候，div的left值就會在原來的基礎(chǔ)上加上10px。這里也可以用獲取非行間樣式的方法獲取left的值再加上10px，也可以達到效果

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是點擊一下動一下，我們讓他持續(xù)動起來，怎么做？加上定時器

 oBtn.onclick = function () {
 setInterval( function(){
 oBox.style.left = oBox.offsetLeft + 10 + 'px';
 }, 1000 / 16 );
 }

當我們點擊按鈕時候，div就會不停的向左運動，怎么讓他停下來呢？停下來，肯定是需要條件的，比如，我們讓他跑到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'，讓他強制被停在500px, 否則div就不會停在500px, 而是504px了，還有一個問題，如果在div運動的過程中，你不停的點擊按鈕，會發(fā)現(xiàn)， div開始加速運動了，而不是每次加10px了，這又是為什么呢？這是因為，每次點擊一下按鈕，就開了一個定時器，每次點擊一個按鈕就開了一個定時器，這樣就會有多個定時器疊加，那么速度也會產(chǎn)生疊加，所以div開始加速了，那么我們要讓他保持10px的速度，意思就是不要讓定時器疊加，更通俗點說就是確保一個定時器在開著。應(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 );
}

只需要在每次點擊按鈕的時候，清除之前的定時器就可以了，這樣就能確保始終一個定時器開著，至此，一個最基本的勻速運動結(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>

再來一個淡入淡出的效果:

當鼠標移上去之后，透明度變成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/h4.jpg" alt="" id="img"/>
</body>
</html>

以上這篇基于勻速運動的實例講解(側(cè)邊欄,淡入淡出)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于勻速運動的實例講解(側(cè)邊欄,淡入淡出)

推薦度：

點擊下載本文 文檔為doc格式

標簽：實例的 (實例講解)

熱門焦點

基于勻速運動的實例講解(側(cè)邊欄,淡入淡出)

基于勻速運動的實例講解(側(cè)邊欄,淡入淡出)

基于勻速運動的實例講解(側(cè)邊欄,淡入淡出)

最新推薦

猜你喜歡

熱門推薦