嗯，又到了，夜静饥寒的时候，手指颤抖，回望去，屋内满是寂静，寥寥绰影，咳咳咳，想我程序员之路还没到终点。。。就。。。咳咳咳

好了日常神经结束，还要涂我的唇膏。还剩下，最后一章，js动画（四），明天放上来，今天，老爸回来了，没有好好的看过，今天就先放

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

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(){
                                /*mouseenter和mouseover 都是 触摸事件，前者是不冒泡，后者必然冒泡，解释还是有点差强人意，前者也会发生不一样的情况，就是超出子元素范围，点在祖先元素还是会发生*/

					$(this).find("i").stop().animate({top:"-30px",opacity:"0"},300,function(){ 
                                      /*这里关键说一个，就是在anmiate()前面加stop(),是取消上一次事件，再继续，接下来的*/

						$(this).css({top:"-15px"});
                                                /*这里是再次出现的关键，就是因为opacity是0嘛，我们就先悄悄的把top值，移到正常位置的下面一点点，然后再让他出现，即产生了绕了180deg的错觉*/

						$(this).animate({top:"-20px",opacity:"1"},300)

					});

				})

			})

		</script>

	</body>

</html>

　　

jQ小图标上下滑动特效的更多相关文章

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

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

  2. css3 小图标提示特效

    最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎, 啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的 相 ...

  3. 手风琴图片和钢琴导航栏JQ滑动特效

    手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  4. 基于slideout.js实现的移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~ ...

  5. (29)odoo的可用小图标

    * 系统的小图标都采用了 fontawesome    官网是 http://fontawesome.dashgame.com/    * 运用小图标    # 首先打开官网 http://fonta ...

  6. odoo开发笔记--odoo可用小图标

    odoo系统的小图标都采用了 fontawesome字体图标 官网: http://fontawesome.dashgame.com/ Github:http://fortawesome.github ...

  7. TouchSlide触屏滑动特效插件的使用

    官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...

  8. TouchSlide 触屏滑动特效插件

    TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是 ...

  9. 用css和js实现侧边菜单栏点击和鼠标滑动特效

    1点击效果: 2关键代码: css: #div{ display:inline-block; width:100px; height:150px; border-radius: 5px; blackg ...

随机推荐

  1. 深入理解setTimeout和setinterval

    以前一直以为这两个函数就是简单了认为类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方 ...

  2. 翻译的很好的一篇android mediaplayer

    MediaPlayer类可用于控制音频/视频文件或流的播放.关于如何使用这个类的方法还可以阅读VideoView类的文档. 1．状态图对播放音频/视频文件和流的控制是通过一个状态机来管理的.下图显示一 ...

  3. POJ 3186 Treats for the Cows

    简单DP dp[i][j]表示的是i到j这段区间获得的a[i]*(j-i)+... ...+a[j-1]*(n-1)+a[j]*n最大值 那么[i,j]这个区间的最大值肯定是由[i+1,j]与[i,j ...

  4. office web apps部署（二）

    1.安装composer 参考 http://docs.phpcomposer.com/00-intro.md 根据系统选择安装方式 修改php.ini   去掉extension=php_opens ...

  5. Oracle使用rowid删除重复记录

    /**如何删除重复记录?*//*1. 先按重复字段分组   2. 在每组里找出最小的rowid   3. 把整个表中与上面查询出来的rowid不相等的记录删除掉*/delete from test_t ...

  6. Xcode8 去除系统日志输出

    Edit Scheme-> Run -> Arguments, 在Environment Variables里边添加 OS_ACTIVITY_MODE ＝ disable

  7. (简单) POJ 2502 Subway，Dijkstra。

    Description You have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of ...

  8. Linux下网络流量实时监控工具大全

    在工作中发现,经常因为业务的原因,需要即时了解某台服务器网卡的流量,虽然公司也部署了cacti软件,但cacti是五分钟统计的,没有即时性,并且有时候打开监控页面不方便,个人喜欢随手在某台服务器上输入 ...

  9. 在spring 3.0中的@value

    在spring 3.0中,可以通过使用@value,对一些如xxx.properties文件 中的文件,进行键值对的注入,例子如下: 1 首先在applicationContext.xml中加入:   ...

  10. sublime text2的插件熟悉

    今天加班,开会.于是整理下sublime text的插件. 1.安装了tag插件.负责html的格式化.从百度云下载了文件,放入了插件包的目录下. 2.启用了alignment 快捷键 ctr+alt ...