基于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实现unicode和字符的互相转换
Jul 18 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
vue中使用腾讯云Im的示例
Oct 23 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中使用模板的方法
2008/05/24 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
js实现字符串转日期格式的方法
2015/05/20 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
js 颜色选择插件
2017/01/23 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
利用python在excel中画图的实现方法
2020/03/17 Python
python进度条显示之tqmd模块
2020/08/22 Python
Python远程linux执行命令实现
2020/11/11 Python
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
2014年中秋寄语
2014/08/11 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
HAM-2000摩机图
2021/04/22 无线电
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL