基于jQuery制作小图标上下滑动特效


Posted in Javascript onJanuary 18, 2017

一个小图标特效,挺有趣的,代码也很容易懂。

 jQ小图标上下滑动特效:

基于jQuery制作小图标上下滑动特效

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="css/normalize.css">
  <style>
   .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;
   }
  </style>
  <body>
    <div class="tubiao">
      <a href="#"><i><img src="imges/小图标/1.png" alt="1" ></i><p>我的</p></a>
      <a href="#"><i><img src="imges/小图标/2.png" alt="2" ></i><p>你的</p></a>
      <a href="#"><i><img src="imges/小图标/3.png" alt="3" ></i><p>他的</p></a>
      <a href="#"><i><img src="imges/小图标/4.png" alt="4" ></i><p>好的</p></a>
      <a href="#"><i><img src="imges/小图标/5.png" alt="5" ></i><p>坏的</p></a>
    </div>/*css和html不解释*/
    <script src="js库/jquery.js"></script>/*jquery库,路径这里用汉字,我是看的方便,实际建议用英文*/
    <script>
      $(function(){
        $("a").mouseenter(function(){<br>                /*mouseenter和mouseover 都是 触摸事件,前者是不冒泡,后者必然冒泡,解释还是有点差强人意,前者也会发生不一样的情况,就是超出子元素范围,点在祖先元素还是会发生*/
          $(this).find("i").stop().animate({top:"-30px",opacity:"0"},300,function(){ <br>                   /*这里关键说一个,就是在anmiate()前面加stop(),是取消上一次事件,再继续,接下来的*/
            $(this).css({top:"-15px"});<br>                        /*这里是再次出现的关键,就是因为opacity是0嘛,我们就先悄悄的把top值,移到正常位置的下面一点点,然后再让他出现,即产生了绕了180deg的错觉*/
            $(this).animate({top:"-20px",opacity:"1"},300)
          });
        })
      })
    </script>
  </body>
</html>
Javascript 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
Javascript 实用小技巧
Apr 07 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 #Javascript
动态加载css方法实现和深入解析
Jan 18 #Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 #Javascript
JS实现旋转木马式图片轮播效果
Jan 18 #Javascript
微信小程序实现图片预加载组件
Jan 18 #Javascript
JavaScript原生节点操作小结
Jan 17 #Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 #Javascript
You might like
php桌面中心(一) 创建数据库
2007/03/11 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
prototype1.4中文手册
2006/09/22 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
Vue之Watcher源码解析(2)
2017/07/19 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
2015年护士节慰问信
2015/03/23 职场文书
停车场管理制度范本
2015/08/05 职场文书