深入JavaScript之JS的運動-js教程-PHP中文網

首頁

web前端

js教程

深入JavaScript之JS的運動

php中世界最好的语言

Mar 13, 2018 pm 01:38 PM

javascript js

這次帶給大家深入JavaScript之JS的運動，使用JavaScript之JS的運動注意事項有哪些，以下就是實戰案例，一起來看一下。

JS運動基礎

運動框架

在開始運動時，關閉已有定時器

把運動和停止分開(if/else)

1.勻速運動

nbsp;HTML>
    <meta>
    <title>01-运动基础</title>
    <style>
        #div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;}    </style>
    <script>
        //定时器
        var timer=null;        function startMove()        {            var oDiv=document.getElementById(&#39;div1&#39;);            //为了保证只有一个定时器工作,把之前的定时器全关了
            clearInterval(timer);
            timer=setInterval(function (){                var speed=1;                if(oDiv.offsetLeft>=300)
                {
                    clearInterval(timer);
                }                else
                {
                    oDiv.style.left=oDiv.offsetLeft+speed+&#39;px&#39;;
                }
            }, 30);
        }    </script><input><div></div>

登入後複製

深入JavaScript之JS的運動

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}</style><script>window.onload=function (){    var oDiv=document.getElementById(&#39;div1&#39;);
    
    oDiv.onmouseover=function ()    {
        startMove(0);
    };
    oDiv.onmouseout=function ()    {
        startMove(-150);
    };
};var timer=null;function startMove(iTarget){    var oDiv=document.getElementById(&#39;div1&#39;);
    
    clearInterval(timer);
    timer=setInterval(function (){        //先初始化速度
        var speed=0;        //开始位置 > 终点位置:比方 起点:350 终点 50 要想到50这个位置,速度得为:-10; 
        //oDiv.offsetLeft : 起点位置
        //iTarget终点位置
        if(oDiv.offsetLeft>iTarget)
        {
            speed=-10;
        }        else
        {
            speed=10;
        }        //这个函数存在一个漏洞,如果oDiv.offsetLef 刚好t >=iTarget 定时器不会停止
        if(oDiv.offsetLeft==iTarget)
        {
            clearInterval(timer);
        }        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+&#39;px&#39;;
        }
    }, 30);
}</script></head><body><div id="div1">
    <span>分享到</span></div></body></html>

登入後複製

深入JavaScript之JS的運動

#3.淡入淡出

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>03-淡入淡出</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            opacity:0.3; //兼容chrome和ff
            filtr:alpha(opacity:30);//兼容低版本的IE
        }    </style>
    <script>
        window.onload = function () {            var oDiv = document.getElementsByTagName(&#39;div&#39;)[0];
            oDiv.onmouseover = function () {
                changeAlpha(100);
            };
            oDiv.onmouseout = function () {
                changeAlpha(30);
            };            var timer = null;            var alpha = 30;            function changeAlpha(isTarget) {
                clearInterval(timer);                var speed = 0;
                timer = setInterval(function () {                    //注意这个速度判断要写在定时器里面
                    if (alpha < isTarget){
                        speed = 10;
                    }else {
                        speed = -10;
                    }                    if (alpha == isTarget){
                        clearInterval(timer);
                    }else {
                        alpha += speed;
                        oDiv.style.opacity = alpha/100;
                        oDiv.style.filter = &#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;
                    }
                },30);
            }
        }    </script></head><body><div></div></body></html>

登入後複製

深入JavaScript之JS的運動

#3.緩衝運動

逐漸變慢，最後停止

距離越遠速度越大

速度由距離決定

#速度=(目標值-目前值)/縮放係數

Math.ceil():向上取整 Math.ceil(3.41) 结果是4 ,Math.ceil(-9.8) 结果是 -9; Math.floor():向下取整 Math.floor(-0.9) 结果是 -1;

登入後複製

範例：緩衝選單
Bug：速度取整,取小數會出事!!!

<html><head>    <meta charset="utf-8">    <title>无标题文档</title>    <style>        *{            padding: 0;            margin: 0;        }        #div1 {width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}        #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}    </style>    <script>        function startMove()        {            var oDiv=document.getElementById(&#39;div1&#39;);            setInterval(function (){                var speed=(300-oDiv.offsetLeft)/10;                //缓冲运动一定要取整,否则会出事的!!!!                //Math.ceil():向上取整 Math.ceil(3.41) 结果是4 ,Math.ceil(-9.8) 结果是 -9;                //Math.floor():向下取整 Math.floor(-0.9) 结果是 -1;                //speed=Math.floor(speed);                //速度大于0,向上取整,速度小于0,向下取整;                speed=speed>0?Math.ceil(speed):Math.floor(speed);                //速度不能为小数:速度里面有小数,导致oDiv.style.left的值带有小数,而oDiv.style.left会自动取整,导致他把小数抹掉了,导致误差!!!                //故把速度向上取整,来避免此误差                oDiv.style.left=oDiv.offsetLeft+speed+&#39;px&#39;;                document.title=oDiv.offsetLeft+&#39;,&#39;+speed;            }, 30);        }    </script></head><body><input type="button" value="开始运动" onclick="startMove()" /><div id="div1"></div><div id="div2"></div></body></html>

登入後複製

深入JavaScript之JS的運動

#緩衝運動一(chorme瀏覽器上有相容問題)

跟隨頁面滾動的緩衝側邊欄

潛在問題：目標值不是整數時,會出現抖動的情況,只要強轉成整數就可以了!可能會有0.5像素的誤差,可以忽略不計!

右側懸浮框

先了解下一些基礎知識

取得瀏覽器捲軸滾動的距離
1.在設計頁面時可能經常會用到固定層的位置，這就需要獲取一些html物件的座標以更靈活的設定目標層的座標，這裡可能就會用到document.body.scrollTop等屬性，但是此屬性在xhtml標準網頁或更簡單的說是帶標籤的頁面裡得到的結果是0，如果不要這個標籤則一切正常，那麼在xhtml頁面怎麼獲得body的座標呢，當然有辦法-使用document.documentElement來取代document.body,可以這樣寫
例：
取得瀏覽器捲軸滾動的距離
var top = document.documentElement.scrollTop || document.body.scrollTop;
在JavaScript裡||是個好東西，除了能用在if等條件判斷裡，還能用在變量賦值上。那麼上例等同於下例。
例：var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
這麼寫可以得到很好的相容性。
相反，如果不做宣告的話，document.documentElement.scrollTop反而會顯示為0。

document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度
<html><head><meta charset="utf-8"><title>右侧悬浮窗</title><style>#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}</style><script>window.onscroll=function (){    var oDiv=document.getElementById(&#39;div1&#39;);    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;        //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+&#39;px&#39;;    startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);};var timer=null;function startMove(iTarget){    var oDiv=document.getElementById(&#39;div1&#39;);        clearInterval(timer);    timer=setInterval(function (){        var speed=(iTarget-oDiv.offsetTop)/4;        speed=speed>0?Math.ceil(speed):Math.floor(speed);                if(oDiv.offsetTop==iTarget)        {            clearInterval(timer);        }        else        {            oDiv.style.top=oDiv.offsetTop+speed+&#39;px&#39;;        }    }, 30);}</script></head><body style="height:2000px;"><div id="div1"></div></body></html>

登入後複製

深入JavaScript之JS的運動

勻速停止

//絕對值,
Math.abs()
例如:(Math.abs(-6) ) 和(Math.abs(6))結果都是6,他的意思就是把值變成沒有正負號的樣子,都是正的.

<html><head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}        #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}        #div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}    </style>
    <script>
        var timer=null;        function startMove(iTarget)        {            var oDiv=document.getElementById(&#39;div1&#39;);
            clearInterval(timer);
            timer=setInterval(function (){                var speed=0;                if(oDiv.offsetLeft<iTarget)
                {
                    speed=10;
                }                else
                {
                    speed=-10;
                }                //目标和物体之间的距离的绝对值小于等于速度,就算他达到目标了.
                if(Math.abs(iTarget-oDiv.offsetLeft)<=Math.abs(speed))
                {
                    clearInterval(timer);                    //目标和物体之间的有一小小的距离,计算误差导致的.
                    //让left直接等于目标点
                    oDiv.style.left=iTarget+&#39;px&#39;;
                }                else
                {
                    oDiv.style.left=oDiv.offsetLeft+speed+&#39;px&#39;;
                }
            }, 30);
        }    </script></head><body><input type="button" value="到100" onclick="startMove(100)" /><input type="button" value="到300" onclick="startMove(300)" /><div id="div1"></div><div id="div2"></div><div id="div3"></div></body></html>

登入後複製

深入JavaScript之JS的運動

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1667

CakePHP 教程

1426

Laravel 教程

1328

PHP教程

1273

C# 教程

1255

Related knowledge

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

See all articles

深入JavaScript之JS的運動

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題