jq动画插件,自制基于vue的圆形时钟
首先附上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的圆形时钟的更多相关文章
- (21)jq动画
jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...
- 基于Vue、Bootstrap的Tab形式的进度展示
最近基于Vue.Bootstrap做了一个箭头样式的进度展示的单页应用,并且支持了对于一个本地JS文件的检索,通过这个单页应用,对于Vue的理解又深入了一些.在这里把主要的代码分享出来. 本单页应用实 ...
- 基于 Vue BootStrap的迷你Chrome插件
代码地址如下:http://www.demodashi.com/demo/14306.html 安装 安装 Visual Studio Code 和Chrome, 自行FQ 详细安装这里略过 安装包管 ...
- 分享一款基于jquery的圆形动画按钮
之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...
- 推荐几款基于vue的使用插件
1.muse-ui ★6042 - 三端样式一致的响应式 UI 库 2.vuetify ★11169 - 为移动而生的Vue JS 2组件框架 3.Vux ★12969- 基于Vue和WeUI的组件库 ...
- 基于vue的分页插件
相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- 基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 正式发布
前言 今日正式发布一款基于Vue.js的Web视频播放器插件.可配置,操作灵活.跟我一起来体验吧! 线上地址体验 基于vue3.0和vue-vam-video,我开发了一款在线视频播放器. 网址: h ...
- 基于vue框架手写一个notify插件,实现通知功能
简单编写一个vue插件,当点击时触发notify插件,dom中出现相应内容并且在相应时间之后清除,我们可以在根组件中设定通知内容和延迟消失时间. 1. 基础知识 我们首先初始化一个vue项目,删除不需 ...
随机推荐
- 分布式系统原理之cap理论
1.1 CAP理论的含义 Cap理论表示在分布式系统中一致性(C).可用性(A)和分区容错性(P)最多只能同时满足两个. 一致性:客户端更新数据成功后,在任意时刻,在系统任意对外提供服务的节点,读取 ...
- 批量部署SSH基于key的验证脚本
工作中,使用ansible等自动化运维工具实现服务器批量自动化运维管理,需要先解决管理端和被管理端的免密码登录,可以脚本实现ssh基于key的验证,代码如下: #!/bin/bash PASS=123 ...
- 【Tomcat】安装Tomcat服务器&Tomcat的目录结构
创建时间:6.14 一.安装Tomcat服务器 Tomcat下载ver8的,现在用的多 下载并解压 配置环境变量:(切记!!不然startup那步会闪退) 1.新建系统环境变量: (1)进入根目录,复 ...
- PHP将图片转base64格式函数
base64的好处是什么?今天在跟小伙伴讨论这个问题,要是全站用Php把图片转为base64行不行? 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终 ...
- pycharm调试添加命令行参数
UI界面: Run->Edit Configurations->Parames
- Git创建与简单使用
一. 服务器端 创建空的仓库(以项目tm201为例) 1. git账户登录 2. 新建仓库目录 mkdir tm101.git && cd tm201.git 3. git初始化新的空 ...
- Python并发编程之进程通信
''' 进程间的通信 ''' """ multiprocessing模块支持进程间通信的两种主要形式:管道和队列 都是基于消息传递实现的, ""&qu ...
- PDB files out of the debugger
我想我不需要强调在调试时拥有有效的PDB文件有多重要.通常,PDB文件是由调试器静默加载的,并且您很高兴在modules窗口中看到解析的所有符号.不幸的是,您还可能遇到调试器找不到匹配符号的情况.其原 ...
- opengl第一个工程
#include <iostream> #include <glad/glad.h> #include <GLFW/glfw3.h> void framebuffe ...
- ESA2GJK1DH1K升级篇: 移植远程更新程序到STM32F103RET6型号的单片机,基于(GPRS模块AT指令TCP透传方式)
前言 上节实现远程更新是更新的STM32F103C8T6的单片机 GPRS网络(Air202/SIM800)升级STM32: 测试STM32远程乒乓升级,基于(GPRS模块AT指令TCP透传方式),定 ...