使用jquery制作仿Skype的动画按钮

发布于，归属于jquery教程。 只剩下板凳啦！ 共有407人围观    


这个教程主要讲解如何jquery制作仿Skype的动画按钮。

制作过程

创建如下按钮链接：

  1. <a class="button" href="#">
  2.     <img src="button.png" alt="" />Send info
  3. </a>
  4.     or <a href="#">cancel</a>

给这个按钮链接，添加样式

  1. .button {
  2.     padding: 4px 10px 3px 25px;
  3.     border: solid 1px #8AB134;
  4.     position: relative;
  5.     cursor: pointer;
  6.     display: inline-block;
  7.     background-image: url( 'bkg.png' );
  8.     background-repeat: repeat-x;
  9.     font-size: 11px;
  10.     height: 16px;
  11.     text-decoration: none;
  12.     color: #40740D;
  13.     -moz-border-radius-bottomleft: 5px;
  14.     -moz-border-radius-bottomright: 5px;
  15.     -moz-border-radius-topleft: 5px;
  16.     -moz-border-radius-topright: 5px;
  17. }
  18. .button img {
  19.     position: absolute;
  20.     top: -4px;
  21.     left: -12px;
  22.     border: none;
  23. }
  24. .button:hover {
  25.     color: #8AB134;
  26. }

这里用到了css3的圆角属性，在IE下无法正常显示圆角，而且使用的是png，IE6下需要自行修正。
按钮链接内的修饰图标使用绝对定位。

动画关键脚本：

  1. $(".button").hover(function(){
  2.         $(".button img")
  3.             .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200)
  4.             .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100)
  5.             .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100);
  6.     });

改变钮链接内的修饰图标的top值，形成上下跳动的动画形式。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. Night

    这个特效不错 收藏了

同类