原生js實現一個DIV的碰撞反彈運動

阿新 • • 發佈：2018-06-28

絕對定位 doc type har tle ntb inpu wid PE

原生js實現一個DIV的碰撞反彈運動：

　　關鍵在於DIV的邊界檢測，進而改變運動方向，即可實現碰撞反彈效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;}
        div{height:100px;width:100px;background:red;position:absolute 
;}
        /*添加絕對定位*/

    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var div=document.getElementById("div");
            var speedx=6;
            var speedy=8;
            var t=null;
            btn.onclick 
=function(){
                clearInterval(t);
                t=setInterval(function(){
                    var l=div.offsetLeft+speedx;
                    var t=div.offsetTop+speedy;

                    if(l>=document.documentElement.clientWidth-div.offsetWidth){
                        speedx 
*=-1;
                        l=document.documentElement.clientWidth-div.offsetWidth;
                    }else if(l<=0){
                        speedx*=-1;
                        l=0;
                    }
                    if(t>=document.documentElement.clientHeight-div.offsetHeight){
                        speedy*=-1;
                        t=document.documentElement.clientHeight-div.offsetHeight;
                    }else if(t<=0){
                        speedy*=-1;
                        t=0;
                    }
                    div.style.left=l+"px";
                    div.style.top=t+"px";
                },10);
            }
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="開始運動">
<div id="div"></div>
</body>
</html>

原生js實現一個DIV的碰撞反彈運動

絕對定位 doc type har tle ntb inpu wid PE 原生js實現一個DIV的碰撞反彈運動：　　關鍵在於DIV的邊界檢測，進而改變運動方向，即可實現碰撞反彈效果。 <!DOCTYPE html> <html

如何用原生JS實現一個簡單的promise

　　　我又又又回來了，最近真是累的跟狗一樣，急需一個大保健回覆一下子精力　　　我現在是一邊喝著紅牛一邊寫著部落格，好了好了，不扯了，迴歸整體好吧　　　先簡單來說一下啥是promise吧　　　它是什麼？Promise是一個方案，用來解決多層回撥巢狀的解決方案。它現在是ES6的原生物件。　　 &n

原生JS實現一個完整的輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

原生js實現一個自定義下拉單選選擇框

　　瀏覽器自帶的原生下拉框不太美觀，而且各個瀏覽器表現也不一致，UI一般給的下拉框也是和原生的下拉框差別比較大的，這就需要自己寫一個基本功能的下拉選單/下拉選擇框了。最近，把專案中用到的下拉框元件重新封裝了一下，以建構函式的方式進行封裝，主要方法和事件定義在原型上，下面是主要的實現程式碼並添加了比較詳細的註釋

原生js實現一個側滑刪除取消元件（item slide）

元件，本質上是解決某個問題封裝的類，在此記錄原生js實現側滑刪除先上效果圖實現思路 1. 確定渲染的資料結構 2. 思考劃分佈局，總的有兩個主要的模組：內容區域和按鈕區域　　2.1 內容區域保持寬度永遠佔滿裝置的寬度　　2.2 內容區域和按鈕區域

原生JS實現點選一個按鈕顯示一個div，再點選按鈕div隱藏，或點選除div外其它空白處div隱藏

<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js點選按鈕顯示再點選空白地方隱藏</title> <style type="text/css"&g

JavaScript：用原生js實現重力條件下，可拖拽小球的碰撞運動

本次用原生js，在小球的碰撞運動上添加了重力效應。並且可以拖拽小球，拖拽的方向和力度大小，決定了小球的初始速度和運動方向蠻有趣的，大家可以拷貝程式碼試一試。程式碼也附帶了一些小注釋。 <!DOCTYPE html> <html lang="en"> &l

原生js實現的OBB包圍盒碰撞演算法

網上看了很多OBB演算法例項結果都不是js實現的要不然實現的就是一大堆庫看著是真的頭痛。基本原理請看這篇部落格: https://blog.csdn.net/qing101hua/article/details/52997160 好了下面直接上程式碼可以直接複製下來儲存到本地執行:

js實現一個可以相容PC端和移動端的div拖動效果

拖動時候用到的三個事件：mousedown、mousemove、mouseup在移動端都不起任何作用。畢竟移動端是沒有滑鼠的，查資料後發現，在移動端與之相對應的分別是：touchstart、touc

（一）原生JS實現判斷碰撞的方法！

這次為大家例項講述了JS實現判斷碰撞的方法。碰撞的應用場景非常多比如，放煙花、小球碰壁反彈、畫素鳥等，所以我們先要弄清除如何進行碰撞判斷，才能進行以後的操作。 HTML頁面程式碼： <div

原生js實現div跳動效果---很多炫酷效果的基本原理

效果預覽：這塊實現起來很簡單，原生的js實現更簡單。為什麼寫這個呢？因為這個其實是很多網頁動態效果的一個原型，不管是什麼大型的網站，其實底層的原理都是一樣的，基本思路是，畫出DIV，然後載入頁面的時候載入到每一個div元素，然後就是控制滑鼠的事件，移入和移出的時候執行偏移函式

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

原生js實現outerWidth()方法，用到getComputedStyle

turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at

原生js實現form表單序列化

defined json cnblogs 一個 break value 元素 default [0 大家都知道在jquery中有相應的表單序列化的方法： 1.serialize()方法　　格式：var data = $("form").serialize(); 　　功能：

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

原生js實現數據單向綁定

web 名稱 target 接收參數 .org desc ctype html fin Object.defineProperty()方法直接在對象上定義一個新屬性，或修改對象上的現有屬性，並返回該對象。 Object.defineProperty(obj, prop, d

原生js實現清除子元素節點

spa class document cnblogs ech child mov log tor var table = document.body.querySelector(‘.mui-table-view‘);

原生JS實現tab切換--web前端開發

soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見，應用非常廣泛，比較實用，一般來說是一個網站必不可少的一個效果。例如：https://123.sogou.com/中的一個tab部分： 1、案例源代碼 <!DO

原生js實現輪播

tex tom enter utf-8 定義 radi absolut tco query <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

原生js實現的瀑布流布局

n) top 開始 rrh lang java ansi return 一個 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

原生js實現一個DIV的碰撞反彈運動

相關推薦