2. 程式人生 > >JavaScript案例——網頁特效之旋轉

JavaScript案例——網頁特效之旋轉

阿新 • • 發佈：2019-02-17

ps：這個旋轉不能再IE瀏覽器中正常開啟，因為IE瀏覽器不相容CSS3

這裡使用的重點屬性是transform和rotate方法

定義：
transform屬性是向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
rotate() 方法旋轉畫布的座標系統。
語法
rotate(angle)
注：angle 旋轉的量，用弧度表示。正值表示順時針方向旋轉，負值表示逆時針方向旋轉
文中用的deg和angle一樣
-

關於rotate說明

rotate() 方法通過指定一個角度，改變了畫布座標和 Web 瀏覽器中的 元素的畫素之間的對映，使得任意後續繪圖在畫布中都顯示為旋轉的。它並沒有旋轉 元素本身。注意，這個角度是用弧度指定的。
如果要把角度轉換為弧度，請乘以 Math.PI 併除以 180。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #body{
                position: absolute;
                width: 300px;
                height: 300px;
                top: 200px;
                left
 
: 200px;
            }
            #a{
                position: absolute;
                border: 1px solid #goldenrod;
                top: 140px;
                width: 300px;
                height: 20px;
                background-color: goldenrod;
                transform: rotate(0deg);
            }
 

            #b{
                position: absolute;
                border: 1px solid #goldenrod;
                left: 140px;
                width: 20px;
                height: 300px;
                background-color: goldenrod;
                transform: rotate(0deg);
            }
        </style>
        <script>
            var i = 0;
            var xz_id;
            var sd = 10;
            var ids = new Array();
            window.onload = function(){
                xz = document.getElementById("xz");
                a = document.getElementById("body");
                mess = document.getElementById("mess");
                xz.onclick = function(){
                    id = setInterval("xuanzhuan()",10);
                    ids.push(id);
                    mess.innerHTML = ids.length;
                }

                document.getElementById("tz").onclick = function(){
                    clearInterval(ids[ids.length-1]);
                    ids.pop();
                    mess.innerHTML = ids.length;

                }

            }

            function xuanzhuan(){
                if(i>360){
                    i=0;
                }else{
                    i++;
                }
                var s = "rotate("+i+"deg)";

                a.style.transform = s;

            }
        </script>
    </head>
    <body>
        <button id="xz">加速</button>
        <button id="tz">減速</button><br />
        <span id="mess"></span>
        <div id="body">
            <div id="a"></div>
            <div id="b"></div>
        </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

加速、減速

相關推薦

JavaScript案例——網頁特效之旋轉

ps：這個旋轉不能再IE瀏覽器中正常開啟，因為IE瀏覽器不相容CSS3 這裡使用的重點屬性是transform和rotate方法 定義： transform屬性是向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。 rota

利用Javascript製作網頁特效（時間特效）

在網頁中經常可以看到各種各樣的動態時間顯示，在網頁中合理地使用時間可以增加網頁的時效感。 顯示當前時間 getHours()、getMinutes()、getSeconds()分別獲得當前小時數、當前分鐘數、當前秒數。 開啟網頁文件，在head標籤中輸

網頁JavaScript特效之flappy bird（畫素鳥）

今天用JavaScript做了一個小小的畫素鳥 ，256行程式碼實現flappybird，雖然有很多bug，廢話不多說，上原始碼 <!DOCTYPE html> <html> <head> <meta charset="utf

JavaScript特效之前進，後退（返回上一級）

函數調用 dsm war button 之前 type 後退 white 一個 在頁面上增加前進,後退（返回上一級）功能： 方式一：使用函數 <script> function goback(){ history.go(-1);//返回或者histor

Web前端攻城獅培養計劃之前端小白入門：網頁布局基礎與常見網頁特效

圖像 空間 實戰 ref 學會 結構 position 運算操作 常見 步驟1: HTML基礎超文本標記語言（英文縮寫：HTML）是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言,為搭建網頁結構做出第一步。本階段主要介紹了HTML的語法基礎、表格、表單、等

【HTML+CSS+JavaScript】網頁實戰開發筆記之二—關於Web標準，你不能不知道的事

毛星雲，網路ID「淺墨」，90後，熱愛遊戲開發、遊戲引擎、計算機圖形、實時渲染等技術，就職於騰訊互娛。 微軟最有價值專家 著作《Windows遊戲程式設計之從零開始》、《OpenCV3程式設計入門》 碩士就讀於南京航空航天大學航天學院（2013級碩士研究生），已於2016年三月畢業。本科

javascript網頁特效——滑鼠特效

例項一：禁用滑鼠右鍵 <script type="text/javascript"> //為文件的滑鼠按下事件定義回撥 document

JavaScript網頁特效（三）選項卡切換的效果和輪播圖效果

選項卡的切換，主要是li列表的一個一個的選項卡，以及每個選項卡下的內容，點選的時候能夠一一對應，實現起來也不難。 一：html佈局和css樣式 選項卡標題使用ul..li無序列表，選項卡內容用三個div。 /* CSS樣式製作 */

JavaScript實現網頁元素的拖拽效果

wid parseint fontsize current ini .net win == oct 以下的頁面中放了兩個div，能夠通過鼠標拖拽這兩個元素到任何位置。 實現該效果的HTML頁面代碼例如以下所看到的： <!DOCTYPE html> &

HTML5與Javascript 實現網頁彈球遊戲

fonts tab tool open article idt lang true 用戶 終於效果圖： 1. 使用html 5 的canvas 技術和javascript實現彈球遊戲 總體流程圖： 1.1 html5 c

Javascript性能優化之節流函數

滾動事件 add 沒有 使用 們的 java rip 也會 出了 在我們的工作中往往有這樣的需求，下拉上拉加載實現無限加載列表數據這樣的一個功能，這個時候小夥伴們可能就覺得這個功能幾分鐘的事，於是乎，下邊這段代碼浩浩蕩蕩就出來了 window.addEventListen

Path特效之PathMeasure打造萬能路徑動效

rep flag fill pub tin 我們 set mcu ext 前面兩篇文章主要講解了 Path 的概念和基本使用，今天我們一起利用 Path 做個比較實用的小例子； 上一篇我們使用 Path 繪制了一個小桃心，我們這一篇繼續圍繞著這個小桃心進行展開：

js特效之上下翻頁相冊效果

ref 相冊 xmlns otto perf wrapper 統一性 space auto //HTML部分: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p

html dom與javascript的關系 -我們用JavaScript對網頁（HTML）進行的所有操作都是通過DOM進行的

兩種 得來 來講 都對 標記 組織 程序員 tro sdn 一，什麽是DOM (參考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什麽 DOM全稱為The Document Object Model，應該理解為是一個

前端追著設計砍系列的9個超酷網頁特效

動畫 src pos fda 酷炫 職業病 bae 分享 ffd 俗話說啊，一入前端深似海啊，小編在入門前端之前，看見酷炫的網頁效果，都會佩服一下設計師。直到入了前端這個坑，現在一點開網頁或者是啥app，再看到這些腦袋裏想的都是這些布局,動畫特效是如何實現的，完全已經越過了

JavaScript的進階之路（二）函數簡介，變量、作用域和內存問題

ret 優化 person get 簡介 web瀏覽器 都是 add 是把 <h3>ECMAScript中函數不存在函數簽名的概念，沒有重載</h3><h3>無需指定返回值，可以在任何時候返回任何值。未指定返回值的函數，返回的是一個特殊

JavaScript的進階之路（三）引用類型之Object類型和Array類型

reverse 代碼 -1 替換 fine 設置 sha unshift sum 引用類型 Object類型 function a(num){ if(num>3){ a(--num); } console.log(num);

CSS——網頁優化之內容移除

splay 標簽 span indent width com 搜狐 lan ges 在h1標簽裏套入a標簽並寫上文字，有利於seo，但是文字如何隱藏呢？一般都是a標簽變成內聯塊並首行縮進為負值。 <!DOCTYPE html> <html lang="e

JavaScript面向對象之函數構造器的理解

對象 方法 註意 函數 調用 con 面向 struct scrip 1，在使用函數創建類時，函數本身也被稱為該類的構造器，該類的構造器方法，該類的構造方法，該類的構造函數等等。 2，註意構造器方法是沒有返回值的，當創建該類的實例時，必須調用該類的構造方法。 3，獲取構造器

javascript運行機制之執行順序詳解

onload 預編譯 c# step 而且 () 我們 術語 aaa JavaScript是一種描述型腳本語言，它不同於java或C#等編譯性語言,它不需要進行編譯成中間語言,而是由瀏覽器進行動態地解析與執行。那麽JavaScript是怎麽來進行解析的嗎？它的執行順序又是如