jq动画插件，自制基于vue的圆形时钟

首先附上jq插件库，里面的东西太炫了，建议学前端的可以看看学习下：http://www.jq22.com/

里面有个“超个性动画版本的个人简历”，通过屏幕上不断打印内容，改变相应样式来实现动画简历，我从来没想到过还有这种操作；

再附上一个比较有趣的基于vue的圆形时钟：

　　
　　
　　
　　
　　


　　
　　

　　　　

　　　　　　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}}秒

　　　　

　　　　　　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}}分

　　　　

　　　　　　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}}点

　　　　

　　　　　　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]}}

　　　　

　　　　　　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}}号

　　　　

　　　　　　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}}月

　　　　
　　　　

{{yea}}年

　　

　　

 

 

你还可以在其他页面引用它并为他添加样式，我前面的有篇文章有讲到过

　　
　　
　　
　　


　　

 

 本文借鉴于：https://blog.csdn.net/n994298535/article/details/89436283，大家可以去看看