定時器 + 簡單的動畫效果

来源:http://www.cnblogs.com/xiaoyinspy/archive/2017/11/09/7811777.html
-Advertisement-
Play Games

1.向下滑動 2.移動效果 3.事件與動畫結合 ...


1.向下滑動

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>向下滑動</title>
 6     <style>
 7         body {
 8             margin: 0px;
 9         }
10         #show {
11             width: 200px;
12             /* 高度為 0 */
13             height: 100px;
14             background-color: lightcoral;
15             margin: 0 auto;
16             /* 設置為隱藏 */
17             /*display: none;*/
18         }
19 
20     </style>
21 </head>
22 <body>
23 <div id="show"></div>
24 <script>
25     var show = document.getElementById('show');
26     /*show.style.display = 'block';
27 
28     var t = setInterval(function(){
29         var style = window.getComputedStyle(show,null);
30         var height = parseInt(style.height);
31         // 判斷當前的高度是否為 400
32         if (height >= 400){
33             clearInterval(t);
34         } else {
35             height++;
36             show.style.height = height + 'px';
37         }
38     },50);*/
39 
40     slideDown(show,400);
41 
42     /*
43         將上述實現的向下滑動效果，封裝在一個固定的函數中
44         * 設計當前實現向下滑動效果函數的形參
45           * elem - 表示實現向下滑動效果的元素
46           * maxHeight - 表示元素向下滑動的最大高度值
47         * 函數的邏輯與預設設置CSS樣式屬性的值無關
48       */
49     function slideDown(elem, maxHeight){
50         // 操作的元素預設的display值為none
51         elem.style.display = 'block';
52         elem.style.height = '0px';
53 
54         var t = setInterval(function(){
55             var style = window.getComputedStyle(elem,null);
56             var height = parseInt(style.height);
57             // 判斷當前的高度是否為 400
58             if (height >= maxHeight){
59                 clearInterval(t);
60             } else {
61                 height++;
62                 elem.style.height = height + 'px';
63             }
64         },50);
65     }
66 
67 
68 </script>
69 </body>
70 </html>

 

2.移動效果

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>移動效果</title>
 6     <style>
 7         body {
 8             margin: 0px;
 9         }
10         #box {
11             width: 100px;
12             height: 100px;
13             background-color: lightcoral;
14 
15             position: absolute;
16             left: 100px;
17             top: 100px;
18         }
19     </style>
20 </head>
21 <body>
22 <div id="box"></div>
23 <script>
24     var box = document.getElementById('box');
25     box.onclick = function(){
26         clearInterval(t);
27     }
28     /*
29         * 向右移動
30          * 當前元素移動到頁面的最右邊時 -> 向左移動
31         * 向左移動
32          * 當前元素移動到頁面的最左邊時 -> 向右移動
33      */
34     var flag = false;// 預設表示向右
35     var speed = 1;// 表示每次變化的值
36     t = setInterval(function(){
37         //speed += 0.01;
38         // 獲取當前頁面的寬度
39         var WIDTH = window.innerWidth;
40         var style = window.getComputedStyle(box,null);
41         var left = parseInt(style.left);
42         var width = parseInt(style.width);
43         // 判斷當前元素移動的方向
44         if (flag){// 向左移動
45             left -= speed;
46         } else {// 向右移動
47             left += speed;
48         }
49         // 判斷什麼情況下，向左移動；判斷什麼情況下，向右移動
50         if ((left + width) >= WIDTH){// 向左移動
51             flag = true;
52         } else if (left <= 0){// 向右移動
53             flag = false;
54         }
55         box.style.left = left + 'px';
56     },10);
57 
58 </script>
59 </body>
60 </html>

3.事件與動畫結合

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件與動畫結合</title>
 6     <style>
 7         body {
 8             margin: 0px;
 9         }
10     </style>
11 </head>
12 <body>
13 <script>
14     // 獲取<body>元素
15     var body = document.body;
16     // 當頁面載入完畢後，設置當前<body>元素的高度為當前瀏覽器視窗的高度
17     window.onload = function(){
18         setHeight(body);
19     };
20     // 當用戶改變瀏覽器視窗的大小時，重新設置<body>元素的高度(等於當前視窗的高度)
21     window.onresize = function(){
22         setHeight(body);
23     };
24     // 定義函數 - 設置<body>元素的高度等於當前視窗的高度
25     function setHeight(elem){
26         elem.style.height = window.innerHeight + 'px';
27     }
28 
29     var width = 100,height = 100;
30     // 為<body>元素綁定click事件
31     body.onclick = function(event){
32         var x = event.clientX;
33         var y = event.clientY;
34         // 創建<div>元素，顯示的位置在滑鼠當前的坐標值
35         var div = document.createElement('div');
36         div.setAttribute('class','circle');
37         body.appendChild(div);
38         // rgb(0,0,0)格式 -> 顏色隨機
39         var r = parseInt(Math.random()*255);
40         var g = parseInt(Math.random()*255);
41         var b = parseInt(Math.random()*255);
42 
43         div.style.width = width + 'px';
44         div.style.height = height + 'px';
45         div.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
46         div.style.borderRadius = '50%';
47         div.style.opacity = 1;
48         div.style.position = 'absolute';
49         div.style.left = x - width/2 + 'px';
50         div.style.top = y - height/2 + 'px';
51 
52         animate(div);
53     }
54     // 定義函數 -> 實現動畫效果
55     function animate(elem){
56         var style = window.getComputedStyle(elem,null);
57         /*var width = parseInt(style.width);
58         var height = parseInt(style.height);
59         var left = parseInt(style.left);
60         var top = parseInt(style.top);
61         width++;
62         height++;
63         elem.style.width = width + 'px';
64         elem.style.height = height + 'px';
65         elem.style.left = (left - 0.5) + 'px';
66         elem.style.top = (top - 0.5) +'px';*/
67 
68         var opacity = style.opacity;
69 
70         if (opacity <= 0){
71             clearTimeout(t);
72             // 刪除當前元素
73         }
74 
75         opacity -= 0.01;
76         elem.style.opacity = opacity;
77 
78         // 設定定時器
79         var t = setTimeout(function(){
80             animate(elem);
81         },50);
82     }
83 
84 </script>
85 </body>
86 </html>

 

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 生成一個簽章(用java.awt畫一個簽章) 並添加到pdf 公章處
    生成一個簽章(用java.awt畫一個簽章) 並添加到pdf 公章處package com.bjpowernode.p2p.admin.util;import java.awt.BasicStroke;import java.awt.Color;import java.awt.Font;import ...
  • 面對象
    1.類和對象 概念：對象是實例，類是一組具有相同行為和屬性的對象的集合； 區別：類是對象的抽象，對象是類的實例化 2.如何聲明一個類： 語法： 修飾符 class 類名{ //類的屬性(數據類型 變數名;) //類的方法(修飾符 返回類型 方法名(參數列表){}) } 舉例： public clas ...
  • java抽象類，介面與異常
    1.抽象類； 定義;包含一個抽象方法的類稱稱為抽象類，抽象類在class前使用adstract關鍵詞修飾。 抽象方法;只聲明未實現的方法稱為抽象方法，使用adstract關鍵字聲明該方法。 抽象類定義語法： adstract class 抽象類類名{ 屬性： 普通方法： 訪問修飾符 adstract ...
  • 理解依賴註入和控制反轉
    從一個任務開始講 某天，公司領導找到開發人員，說要開發一個微信支付寶的收款明細獲取功能，我們把這個任務作為一個案例進行說明。 第一步：設計 案例精簡：把任務指派給開發人員完成。本句話中，有兩個名詞：“任務”和“開發人員”，所以我們考慮設計兩個對象(任務和開發人員)。 開發人員對象： 任務對象： 場景 ...
  • 設計模式面對面
    定義：設計模式是一套被反覆使用、多數人知曉的、經過分類的、代碼設計經驗的總結。 目的：為了代碼可重用性、讓代碼更容易被他人理解、保證代碼可靠性，設計模式使代碼編寫真正工程化。 使用：每一種設計模式都是在特定場景下總結出來的，選用時需要根據特定的場景選擇，不能為了模式而模式。 定義：設計模式是一套被反 ...
  • 從ELK到EFK演進
    背景 作為中國最大的線上教育站點，目前滬江日誌服務的用戶包含網校，交易，金融，CCTalk 等多個部門的多個產品的日誌搜索分析業務，每日產生的各類日誌有好十幾種，每天處理約10億條（1TB）日誌，熱數據保留最近7天數據，冷數據永久保存。 為什麼做日誌系統 首先，什麼是日誌？ 日誌就是程式產生的，遵循 ...
  • ECMAScript arguments 對象（摘自W3C）
    arguments 對象 在函數代碼中，使用特殊對象 arguments，開發者無需明確指出參數名，就能訪問它們。 例如，在函數 sayHi() 中，第一個參數是 message。用 arguments[0] 也可以訪問這個值，即第一個參數的值（第一個參數位於位置 0，第二個參數位於位置 1，依此類 ...
  • DOM元素屬性值如果設置為對象
    結論：內部會調用toString方法，將設置的對象轉換為字元串添加給相應的屬性； 這個問題呢，是通過jQuery的each方法中，回調函數的this指向問題而來； 我們知道，回調函數中的this如果指向的是基本數據類型，那麼系統會自動將這個基本數據類型的值包裝為對應的對象類型； 就比如： 數組裡面存 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類