jq動畫插件，自製基於vue的圓形時鐘

来源:https://www.cnblogs.com/tenfly/archive/2019/09/12/11513062.html
-Advertisement-
Play Games

首先附上jq插件庫，裡面的東西太炫了，建議學前端的可以看看學習下：http://www.jq22.com/ 裡面有個“超個性動畫版本的個人簡歷”，通過屏幕上不斷列印內容，改變相應樣式來實現動畫簡歷，我從來沒想到過還有這種操作； 再附上一個比較有趣的基於vue的圓形時鐘： <!DOCTYPE html ...


首先附上jq插件庫，裡面的東西太炫了，建議學前端的可以看看學習下：http://www.jq22.com/

裡面有個“超個性動畫版本的個人簡歷”，通過屏幕上不斷列印內容，改變相應樣式來實現動畫簡歷，我從來沒想到過還有這種操作；

再附上一個比較有趣的基於vue的圓形時鐘：

<!DOCTYPE html>
<html>
　　<head>
　　<meta charset="UTF-8">
　　<title></title>
　　<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
　　<style>
　　　　*{
　　　　　　margin: 0;padding: 0;
　　　　}
　　　　body{
　　　　　　background-color: #000000;
　　　　}

　　　　/* transition（過渡），平滑過渡主要靠這個屬性
　　　　語法：transition: property duration timing-function delay;
　　　　property（設置過渡效果的 CSS 屬性的名稱）
　　　　duration（完成過渡效果需要多少秒或毫秒）
　　　　function（速度效果的速度曲線）
　　　　delay（過渡效果何時開始）
　　　　*/
　　　　.sec,.min,.hou,.wee,.day,.mon,.yea{
　　　　　　position: absolute;
　　　　　　top: 700px;
　　　　　　left: 800px;
　　　　　　transition:transform 1s;
　　　　　　color: #999999;
　　　　　　text-align: center;
　　　　}
　　　　.nowTime,.yea{
　　　　　　color: #FF0000;
　　　　　　font-size: 18px;
　　　　　　font-weight: bold;
　　　　}
　　</style>
</head>
<body>
　　<!--
　　　　梳理一下幾個點：
　　　　v-for(item,index) in num：
　　　　　　item是從1-num，index是從0-num-1，所以下麵用到item和index的地方可以相互替換，只要別忘了+1-1

　　　　v-bind:calss：
　　　　　　給當前時間綁定樣式，用於區別其他時間
　　　　　　想讓當前時間始終處於最右邊：
　　　　　　順時針：逆時針旋轉（num-當前時間）*度數
　　　　　　逆時針：順時針旋轉（當前時間）*度數
　　　　　　比如：nowTime:60-item==sec，就表示順時針情況下，當前秒sec想處於最右邊，就需要逆時針旋轉item*度數

　　　　v-bind:style：
　　　　　　translate平移後，rotate旋轉角度使之對準圓心

　　　　此處不涉及平滑過渡，在樣式里：transition:transform 1s;
　　-->
　　<div id="app">
　　　　<div class="sec" style="width: 100px; "
　　　　　　v-for="(item,index) in 60"
　　　　　　v-bind:class="direct==0?{nowTime:60-item==sec}:{nowTime:item==sec}"
　　　　　　v-bind:style="direct==0?{transform:'translate('+xTrans(s_r,item+sec,60)+'px,'+yTrans(s_r,item+sec,60)+'px) rotate('+dTrans(item+sec,60)+'deg)'}:{transform:'translate('+xTrans(s_r,item-sec,60)+'px,'+yTrans(s_r,item-sec,60)+'px) rotate('+dTrans(item-sec-180,60)+'deg)'}">{{direct==0?60-item:item-1}}秒</div>

　　　　<div class="min" style="width: 100px; "
　　　　　　v-for="(item,index) in 60"
　　　　　　v-bind:class="direct==0?{nowTime:60-item==min}:{nowTime:item==min}"
　　　　　　v-bind:style="direct==0?{transform:'translate('+xTrans(i_r,item+min,60)+'px,'+yTrans(i_r,item+min,60)+'px) rotate('+dTrans(item+min,60)+'deg)'}:{transform:'translate('+xTrans(i_r,item-min,60)+'px,'+yTrans(i_r,item-min,60)+'px) rotate('+dTrans(item-min,60)+'deg)'}">{{direct==0?60-item:item-1}}分</div>

　　　　<div class="hou" style="width: 100px; "
　　　　　　v-for="(item,index) in 24"
　　　　　　v-bind:class="direct==0?{nowTime:24-item==hou}:{nowTime:item==hou}"
　　　　　　v-bind:style="direct==0?{transform:'translate('+xTrans(h_r,item+hou,24)+'px,'+yTrans(h_r,item+hou,24)+'px) rotate('+dTrans(item+hou,24)+'deg)'}:{transform:'translate('+xTrans(h_r,item-hou,24)+'px,'+yTrans(h_r,item-hou,24)+'px) rotate('+dTrans(item-hou,24)+'deg)'}">{{direct==0?24-item:item-1}}點</div>

　　　　<div class="wee" style="width: 100px; "
　　　　　　v-for="(item,index) in 7"
　　　　　　v-bind:class="direct==0?{nowTime:7-item==wee}:{nowTime:item==wee}"
　　　　　　v-bind:style="direct==0?{transform:'translate('+xTrans(w_r,item+wee,7)+'px,'+yTrans(w_r,item+wee,7)+'px) rotate('+dTrans(item+wee,7)+'deg)'}:{transform:'translate('+xTrans(w_r,item-wee,7)+'px,'+yTrans(w_r,item-wee,7)+'px) rotate('+dTrans(item-wee,7)+'deg)'}">星期{{direct==0?week[7-item]:week[item-1]}}</div>

　　　　<div class="day" style="width: 100px; "
　　　　　　v-for="(item,index) in 31"
　　　　　　v-bind:class="direct==0?{nowTime:31-index==day}:{nowTime:index==day}"
　　　　　　v-bind:style="direct==0?{transform:'translate('+xTrans(d_r,index+day,31)+'px,'+yTrans(d_r,index+day,31)+'px) rotate('+dTrans(index+day,31)+'deg)'}:{transform:'translate('+xTrans(d_r,index-day,31)+'px,'+yTrans(d_r,index-day,31)+'px) rotate('+dTrans(index-day,31)+'deg)'}">{{direct==0?31-index:index+1}}號</div>

　　　　<div class="mon" style="width: 100px; "
　　　　　　v-for="(item,index) in 12"
　　　　　　v-bind:class="direct==0?{nowTime:12-index==mon+1}:{nowTime:index==mon+1}"
　　　　　　v-bind:style="direct==0?{transform:'translate('+xTrans(m_r,index+mon+1,12)+'px,'+yTrans(m_r,index+mon+1,12)+'px) rotate('+dTrans(index+mon+1,12)+'deg)'}:{transform:'translate('+xTrans(m_r,index+mon-1,12)+'px,'+yTrans(m_r,index+mon-1,12)+'px) rotate('+dTrans(index+mon-1,12)+'deg)'}">{{direct==0?12-index:index+1}}月</div>

　　　　<!--點擊年份可進行逆時針旋轉-->
　　　　<div class="yea" style="padding-left:1%" @click="change">{{yea}}年</div>

　　</div>
　　<script>
　　　　var mv=new Vue({
　　　　　　el:'#app',
　　　　　　data:{
　　　　　　　　direct:0, //順時針

　　　　　　　　PI:Math.PI,

　　　　　　　　sec:0, min:0, hou:0, day:0, wee:0, mon:0, yea:0,

　　　　　　　　s_r:600, i_r:500, h_r:400, w_r:300, d_r:200, m_r:100,

　　　　　　　　week:['日','一','二','三','四','五','六']
　　　　　　},
　　　　　　created() {
　　　　　　　　this.timeSender=setInterval(()=>{
　　　　　　　　　　var date=new Date();
　　　　　　　　　　this.yea=date.getFullYear();
　　　　　　　　　　this.mon=date.getMonth();
　　　　　　　　　　this.day=date.getDate();
　　　　　　　　　　this.wee=date.getDay();
　　　　　　　　　　this.hou=date.getHours();
　　　　　　　　　　this.min=date.getMinutes();
　　　　　　　　　　this.sec=date.getSeconds()
　　　　　　　　},1000)
　　　　　　},
　　　　　　methods:{
　　　　　　　　xTrans(r,k,l){ return r*Math.cos(2*k*this.PI/l) },
　　　　　　　　yTrans(r,k,l){ return r*Math.sin(2*k*this.PI/l) },
　　　　　　　　dTrans(k,l){ return k*360/l },

　　　　　　　　change(){ this.direct = this.direct == 0 ? 1 : 0 }
　　　　　　}
　　　　})
　　</script>
</body>
</html>

 

 

你還可以在其他頁面引用它併為他添加樣式，我前面的有篇文章有講到過

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title></title>
　　<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
　　<style>
　　　　div.mon{
　　　　　　background: #E8E8ED;
　　　　}
　　　　div.day{
　　　　　　background: #E8D5ED;
　　　　}
　　　　div.wee{
　　　　　　background: #E8E4D8;
　　　　}
　　　　div.hou{
　　　　　　background: #E8E4B8;
　　　　}
　　　　div.min{
　　　　　　background: #CBE4F5;
　　　　}
　　　　div.sec{
　　　　　　background: #B0E4F5;
　　　　}
　　</style>
</head>
<body>
　　<div id="clock"></div>
</body>
</html>
<script>
$(document).ready(function(){
　　$("#clock").load("clock.html");
});
</script>

 

 本文藉鑒於：https://blog.csdn.net/n994298535/article/details/89436283，大家可以去看看


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

-Advertisement-
Play Games
更多相關文章
  • Storm VS Flink ——性能對比
    1.背景 Apache Flink 和 Apache Storm 是當前業界廣泛使用的兩個分散式實時計算框架。其中 Apache Storm（以下簡稱“Storm”）在美團點評實時計算業務中已有較為成熟的運用（可參考 Storm 的 可靠性保證測試），有管理平臺、常用 API 和相應的文檔，大量實時 ...
  • mysql的函數筆記
    1. 甲骨文--oracle 和mysql( 免費,開源) 2. sqlserver 3. IBM--DB2 關係型資料庫database 資料庫 , 數據表table , 數據: 記錄-- 增刪改查結構化查詢語言 非關係型資料庫: redis， mongodb 資料庫優化: 數據類型: 創建表的語 ...
  • PhpMyAdmin 配置文件現在需要一個短語密碼的解決方法
    本文主要介紹PhpMyAdmin 配置文件現在需要一個短語密碼的解決方法，比較實用，希望能給大家做一個參考。 新版本的PhpMyAdmin 增強了安全性，需要在配置文件設置一個短語密碼。否則進入之後會有“配置文件現在需要一個短語密碼。”的紅色警嘆提示。 解決方法： 1、將 phpMyAdmin/li ...
  • 將Android封裝庫通過gradle部署到maven私服並依賴使用
    一、在需要發佈的模塊chrisbaselibrary下的build.gradle中添加以下部分 直接添加到最後即可。 使用gradle的插件uploadArchives實現部署。 部署成功後，我們可以修改app模塊的依賴方式。不過建議另外建一個項目進行依賴測試，畢竟這個項目中的app模塊是用來做實時 ...
  • 鍵值是數字時的處理方式
    同事碰到介面返回為數值的鍵值，想處理成自己想要的鍵值的對象，於是寫了個方法來處理類似的數據 '{"1":"憑訂單詳情頁的入園憑證(入園輔助碼或二維碼)入園","2":"憑下單時預留的身份證入園","3":""}' 處理成自己想要的鍵值的對象 const content = '{"1":"憑訂單詳情頁 ...
  • redux和react-redux
    redux和react redux的關係： redux是react的狀態管理工具，卻不僅僅只是為了react而生的，所以在使用中會存在痛點。而react redux是專門為了react定製，目的是為瞭解決redux的痛點，起到了補充的作用。 redux和flux思想： 從代碼層面而言，flux無非就 ...
  • capserjs-prototype(上)
    Casper prototyp back() 具體樣式: back() Moves back a step in browser’s history: 在瀏覽器歷史中回退一步: 同樣看一眼 "forward()" 方法 base64encode() 具體樣式: base64encode(String ...
  • casperjs-options
    The Casper class The easiest way to get a casper instance is to use the module’s create() method: 最簡單獲取casper實例的方法是casper模塊的create()方法: But you can al ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類