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

好了日常神经结束，还要涂我的唇膏。还剩下，最后一章，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. 阿里笔试js题

    有一个数组,其中保存的都是小写英文字符串,现在要把它按照除了第一个字母外的字符的字典顺序(字典顺序就是按首字母从a-z顺序排列,如果首字母相同则按第二个字母……)排序,请编写代码: 例:[" ...

  2. Redis缓存服务搭建及实现数据读写--转载

    来自 http://www.cnblogs.com/lc-chenlong/p/3218157.html 1.  下载安装Redis 下载地址:https://github.com/MSOpenTec ...

  3. Bootstrap的文档大概介绍

    1.预置CSS样式 (1)Normalize.css  增强浏览器表现的一致性. (2)布局容器——版芯:container. ①.container 类用于固定宽度并支持响应式布局的容器.     ...

  4. openstack controller ha测试环境搭建记录（三）——配置haproxy

    haproxy.cfg请备份再编辑:# vi /etc/haproxy/haproxy.cfg global    chroot /var/lib/haproxy    daemon    group ...

  5. Sequence Classification

    Natural Language Processing with Python Charpter 6.1 import nltk from nltk.corpus import brown def p ...

  6. 《算法导论》2.3-7 检查集合中是否存在两数字和为指定的X--算法和证明

    习题2.3-7:设计一个算法,对于一个给定的包含n个整数的集合S和另一个给定的整数X,该算法可以在时间内确定S中是否存在两个元素,使得它们的和恰为X. 解题思路:首先应该想到的是先用一个的排序算法对S ...

  7. display属性及inline-block值（可用来布局）

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. zeromq随笔

    ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高.是一个消息处理队列库,可在多个线 ...

  9. xml--笔记

    1.例子 <?xml version="1.0" encoding="utf-8"?> <!--引用css样式文件--> <?xm ...

  10. scrapy+Lucene搭建小型搜索引擎

    Reference: http://blog.csdn.net/napoay/article/details/51477586 一.选题 工程类搜索型: 定向采集 3-4 个新闻网站, 实现这些网站信 ...