基于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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
原生JS实现分页
Apr 19 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 HTML代码串截取代码
2008/12/29 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
django模板结构优化的方法
2019/02/28 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
什么是python的函数体
2020/06/19 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
你常见到的runtime exception
2016/09/05 面试题
怎样写好创业计划书的内容
2014/02/06 职场文书
投资意向书范本
2014/04/01 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python