最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于jQuery制作小图标上下滑动特效
时间:2017-02-03 编辑:简简单单 来源:一聚教程网
一个小图标特效,挺有趣的,代码也很容易懂。
jQ小图标上下滑动特效:
代码如下:
代码如下 | 复制代码 |
.tubiao{ width: 300px; height: 100px; margin: 100px auto; } a{ position: relative; padding: 10px; display: inline-block; text-decoration: none; color:#000; text-align: center; } i{ position: absolute; left: 5px; top: -20px; opacity: 1; }
/*css和html不解释*/ /*jquery库,路径这里用汉字,我是看的方便,实际建议用英文*/
$(function(){ $("a").mouseenter(function(){ $(this).find("i").stop().animate({top:"-30px",opacity:"0"},300,function(){ $(this).css({top:"-15px"}); $(this).animate({top:"-20px",opacity:"1"},300) }); }) })
|
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31