首先附上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，大家可以去看看

jq动画插件，自制基于vue的圆形时钟的更多相关文章

  1. （21）jq动画

    jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...

  2. 基于Vue、Bootstrap的Tab形式的进度展示

    最近基于Vue.Bootstrap做了一个箭头样式的进度展示的单页应用,并且支持了对于一个本地JS文件的检索,通过这个单页应用,对于Vue的理解又深入了一些.在这里把主要的代码分享出来. 本单页应用实 ...

  3. 基于 Vue BootStrap的迷你Chrome插件

    代码地址如下:http://www.demodashi.com/demo/14306.html 安装 安装 Visual Studio Code 和Chrome, 自行FQ 详细安装这里略过 安装包管 ...

  4. 分享一款基于jquery的圆形动画按钮

    之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...

  5. 推荐几款基于vue的使用插件

    1.muse-ui ★6042 - 三端样式一致的响应式 UI 库 2.vuetify ★11169 - 为移动而生的Vue JS 2组件框架 3.Vux ★12969- 基于Vue和WeUI的组件库 ...

  6. 基于vue的分页插件

    相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...

  7. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  8. 基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 正式发布

    前言 今日正式发布一款基于Vue.js的Web视频播放器插件.可配置,操作灵活.跟我一起来体验吧! 线上地址体验 基于vue3.0和vue-vam-video,我开发了一款在线视频播放器. 网址: h ...

  9. 基于vue框架手写一个notify插件，实现通知功能

    简单编写一个vue插件,当点击时触发notify插件,dom中出现相应内容并且在相应时间之后清除,我们可以在根组件中设定通知内容和延迟消失时间. 1. 基础知识 我们首先初始化一个vue项目,删除不需 ...

随机推荐

  1. python基本数据类型的时间复杂度

    1.list 内部实现是数组 2.dict 内部实现是hash函数+哈希桶.一个好的hash函数使到哈希桶中的值只有一个,若多个key hash到了同一个哈希桶中,称之为哈希冲突. 3.set 内部实 ...

  2. C#中的函数(二) 有参有返回值的函数

    接上一篇 C#中的函数(-) 无参无返回值的函数 http://www.cnblogs.com/fzxiaoyi/p/8502613.html 这次研究下C#中的函数(二) 有参有返回值的函数 依然写 ...

  3. 第二阶段冲刺（个人）——five

    今天的计划:优化登录.注册信息的填写判断. 昨天做了什么?做背景. 困难:无

  4. java.lang.IllegalArgumentException: Invalid character found in the request target. The valid charact

    线上环境中部署的 Tomcat 项目,出现部分页面无法打开的情况,但本地环境是好的.经过排查发现,本地 Tomcat版本为 7.0.77,而线上版本为 7.0.88.报错的具体描述为java.lang ...

  5. 8-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案安全篇(Apache 配置SSL,HTTPS连接)

    https://www.cnblogs.com/yangfengwu/p/10947423.html 和当时配置MQTT差不多,去下载证书文件   https://www.cnblogs.com/ya ...

  6. Python实现电子词典（图形界面）

    Python实现电子词典(图形界面) 终端电子词典:https://www.cnblogs.com/noonjuan/p/11341375.html 文件一览: .├── client.py├── d ...

  7. Linux下进程间通信方式——信号量（Semaphore）

    1.信号量 信号量本质上是一个计数器(不设置全局变量是因为进程间是相互独立的,而这不一定能看到,看到也不能保证++引用计数为原子操作),用于多进程对共享数据对象的读取,它和管道有所不同,它不以传送数据 ...

  8. C# 委托的本质

    它本质是一个方法的容器 委托 只是 一件衣服, 在所有将委托做参数的地方 ,首先想到的是放一个对应的方法进来.

  9. 洛谷[SHOI2002]滑雪题解

    什么破题啊 简直就是浪费我时间! 我每天还被我xf定目标了不知道嘛! 题目 朴素的搜索只能得90分 #include <cstdio> #include <iostream> ...

  10. 洛谷 P2580 【于是他错误的点名开始了】题解

    XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次,然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉(详情请见已结束比赛CON900). 题目背景 ...