一个小图标特效，非常有趣，代码简单易懂。

JQ小图标上下滑动特效：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head link rel='样式表' href='css/normalize.css' style。tubiao { width: 300px高度： 100像素；margin: 100px自动；} a { position: relativepadding: 10pxdisplay:内联块；文本装饰：无；color: # 000文本对齐：中心；} i { position: absoluteleft: 5pxtop :-20px；opa city 3360 1；}/style body div class=' tubiao ' a href=' # ' iimg src=' http 3360 imges/小图标/1 . png ' alt=' 1 '/ipmy/p/aa href=' # ' iimg src=' http 3360 imges/小图标/2 . png ' alt=' 2 '/IP your/p/a href=' # ' iimg src=' http 3360 imges/小图标/3 . png ' alt=' 3 '/'p/a href=' # ' iimg src=' http 3360 imges/小图标/5 . png ' alt=' 5 '/IP bad/p/a/div/* CSS和html不解释* */script src=' http : js library/jquery . js '/script/* j方便我看。其实我建议用英文*/script $ (function () {$ ('a ')。mouse enter(function(){ br/* mouse enter和mouseover是触摸事件。前者不冒泡，后者冒泡。解释还是有点不尽人意。前者也有不同的情况，即超出了子要素的范围。*/$(这个)。查找('我')。停止()。anmiate ({top:'-30px '，opacity: ' 0 ' }，300，function () {br/*这里的重点是说一件事，那就是做一个模仿者()br/*这里是重现的关键，因为不透明度是0，我们会悄悄把顶值移动到正常位置下面一点，然后让它再次出现，也就是我们有绕过180deg */$(这个)的错觉。动画({top3360'-20px '，opacity: ' 1 ' }，3360。})})/脚本/正文/html