中文前端UI框架Kit:摇头动画

开发 前端
今天听群里面兄弟在讨论一个摇头的动画效果,类似登陆验证时候,窗口晃动的效果,结合之前说过的kitjs的anim类,我们可以很轻松的实现类似的组件晃动效果。

发现没有晃动效果的朋友记得清下缓存,因为kit.anim对象的js文件有更新,3Q3Q。

今天听群里面兄弟在讨论一个摇头的动画效果,类似登陆验证时候,窗口晃动的效果,结合之前说过的kitjs的anim类,我们可以很轻松的实现类似的组件晃动效果

  1. function a1() {  
  2.                     $kit.anim.motion({  
  3.                         duration : 1000,//持续时间  
  4.                         el : "#test1",  
  5.                         fx : $kit.anim.fx('swing'),  
  6.                         from : {  
  7.                             'margin-left' : '50px' 
  8.                         },  
  9.                         to : {  
  10.                             'margin-left' : '0px' 
  11.                         },  
  12.                         reverse: true,  
  13.                         timeSeg: 33,//晃动频率,自己调  
  14.                         then : function() {  
  15.                             $kit.log('摇动完毕?再shake一次?')  
  16.                         }  
  17.                     });  
  18.                 }  

image

预览效果:

在线效果预览:http://xueduany.github.com/KitJs/KitJs/demo/ShakeHead/demo.html

效果不错,有兴趣的朋友可以试试

原文链接:http://www.cnblogs.com/xueduanyang/archive/2012/06/06/2538289.html

【编辑推荐】

  1. JavaScript制作新浪网易的评论块
  2. JavaScript图片变换效果(IE only)
  3. JavaScript提升网页加载速度
  4. JavaScript马赛克遮罩图片幻灯片切换类
  5. 看JavaScript如何实现页面自适
责任编辑:张伟 来源: 薛端阳的博客
相关推荐

2012-06-15 09:35:42

JavaScript

2019-01-31 11:11:30

前端开发框架

2022-07-27 10:36:13

前端UI框架

2014-06-27 09:47:48

Bootstrap

2014-07-28 16:05:42

云适配

2014-07-10 10:02:01

iOSHome Kit框架

2022-03-09 07:10:50

Quarkus框架项目

2021-08-10 09:31:54

鸿蒙HarmonyOS应用

2024-10-12 08:35:32

2022-06-09 10:27:40

前端框架开源

2016-10-20 19:27:00

开源项目bootstrapcss框架

2022-08-01 12:53:30

前端动画

2024-06-04 08:23:19

2021-08-09 14:32:34

鸿蒙HarmonyOS应用

2023-01-04 15:24:46

ACE组件UI布局

2012-04-06 10:22:58

Magic Reade

2020-11-13 18:59:51

UIAndroidJetBrains

2024-01-06 17:53:11

前端框架方案

2020-04-09 15:35:43

前端开发框架

2023-02-20 08:41:08

SignaluseState()
点赞
收藏

51CTO技术栈公众号