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

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

jQ小图标上下滑动特效：

代码如下：

<!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>
赞 (0)

相关推荐

  • jQuery动画效果-slideUp slideDown上下滑动示例代码

    复制代码 代码如下: [code] <html> <head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding

  • 基于jquery实现后台左侧菜单点击上下滑动显示

    基于jquery实现后台左侧菜单点击上下滑动显示

    今天做了一个左侧菜单的效果,做后台的时候应该会经常用到这个效果的,代码同样是简洁明了,复制即可用:效果图如下: 代码如下:(这个上下箭头的图标如上,图标可自己换) 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>后台左侧

  • jQuery简单实现上下,左右滑动的方法

    本文实例讲述了jQuery简单实现上下,左右滑动的方法.分享给大家供大家参考,具体如下: 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白 我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了. 闲话不多说,上码 //isw2 zhouxianglh 2010.07.07 //移动ul var slideOperate = { slideUlId : "",//UL id 用于操作Ul fadeInTime : 2000

  • jquery实现上下左右滑动的方法

    本文实例讲述了jquery实现上下左右滑动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • 浅谈jquery上下滑动的注意事项

    div: <div id="pay_box" class="vip_bottom"> fffff </div> style: .vip_bottom{position: fixed; display: none;//注意,先不显示,点击某个div后从上向下滑动,默认时none,这样才会有滑动效果 bottom:0px;//按照正常显示的时候写 width: 100%; box-sizing: border-box; height:80px;

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

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

    一个小图标特效,挺有趣的,代码也很容易懂. jQ小图标上下滑动特效: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" href="css/normalize.css"> <style&

  • 基于JQuery制作可编辑的表格特效

    最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢? 第一种单击表格可以编辑的方法 复制代码 代码如下: //相当于在页面中的 body标签加上onload事件 $(function() {     //找到所有的td节点     var tds = $("td");     //给所有的td添加点击事件     tds.click(function() {        

  • 基于jQuery实现的向下滑动二级菜单效果代码

    基于jQuery实现的向下滑动二级菜单效果代码

    本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • 基于jQuery实现自动轮播旋转木马特效

    基于jQuery实现自动轮播旋转木马特效

    本文实例讲述了jQuery实现自动轮播旋转木马特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现自动轮播旋转木马特效代码,实现过程很简单. 运行效果图:           -------------------查看效果 下载源码------------------- 简要教程 jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件.该旋转木马将图片进行堆叠,轮流的将图片推送到最前面来展示,形成旋转木马的效果.  使用方法 该jQuery旋转

  • 基于Jquery制作图片文字排版预览效果附源码下载

    基于Jquery制作图片文字排版预览效果附源码下载

    基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示    源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree

  • jQuery实现小火箭返回顶部特效

    jquery实现小火箭返回顶部案例,供大家参考,具体内容如下 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐藏用fadeIn和fadeOut //当页面超出1000px的时候,让小火箭显示,如果小于1000px,则隐藏 $(window).scroll(function () { if ($(window).scrollTop() >= 1000) { $("

  • 微信小程序侧边栏滑动特效(左右滑动)

    微信小程序侧边栏滑动特效(左右滑动)

    侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一 先看效果: wxml: <!--page/one/index.wxml--> <view class="page"> <view class="page-bottom"> <view class="page-content"> <view class=&

  • jquery制作 随机弹跳的小球特效

    以下是源码: 复制代码 代码如下: <!doctype html>  <html>  <head>  <title>HTML5 随机弹跳的小球</title>  <style>  body{  font-family: 微软雅黑;     }  body,h1{  margin:0;  }  canvas{  display:block;margin-left: auto;margin-right: auto;  border:1px

  • 基于JQuery制作的产品广告效果

    基于JQuery制作的产品广告效果

    效果图.如下: 动画效果介绍:这组广告效果是打开页面后图片会自动播放,从1-5共计5张图片,如果属标放到右下角的1.2.3.4.5列表上,可以自由进行切换到自己想看的图片上去.图片切换是由下到上变换的.制作思路:先将这5张图片分别放入到ul的5个li列表中, <1>求出图片个的总个数. 并当我们如果在单击1.2.3.4.5时就将它对应的数字传过去,就它显示对应的图片. <2>如果属标放上,就停止动画(可以利用clearIntval() ),如果属标移到,我们可以利用 setIntv

  • 基于Jquery制作的幻灯片图集效果打包下载

    待改进部分 1.大图可根据浏览器分辨率自动缩放,目前是按照固定的宽和高显示,超出部分隐藏. 2.大图现在是直接载入了所有,若图片很多时,体验不好.可改为异步加载,或者延迟加载,这个可以用jquery控件lazyload实现. 3.缩略图是根据上传时设定的参数直接生成的,如果是竖形图片,会出现被压缩的情况.可以改为只显示局部,超出部分隐藏. 4.缩略图列表的滑动采用了jcarousellite插件,如果将幻灯片提取为插件的话,需要整合为一个. 5.目前大图区域和缩略图区域是相对独立的,优点是比较直

随机推荐