基于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获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python中管道用法入门实例
2015/06/04 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
打架检讨书500字
2014/01/29 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
安全标语口号
2014/06/09 职场文书
给老师的感谢信
2015/01/20 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
《司马光》教学反思
2016/02/22 职场文书
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis