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

好了日常神经结束，还要涂我的唇膏。还剩下，最后一章，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. ural1521 War Games 2

    War Games 2 Time limit: 1.0 secondMemory limit: 64 MB Background During the latest war games (this s ...

  2. Moocryption

    Moocryption 题目描述 Unbeknownst to many, cows are quite fond of puzzles, particularly word puzzles. Far ...

  3. CSS文字垂直居中和font-family属性

    1.单行文字的垂直居中 单行文字垂直居中比较简单,直接让行高==盒子高度即可. 2.多行文字居中 多行文字居中,只需简单计算一下盒子的上padding即可.计算公式:padding-top=(盒子的高 ...

  4. Hibernate-----关系映射 重点!!!

    1. 关系, 指的是对象之间的关系, 并不是数据库之间的关系. 2. 简化问题: a) 怎么写annotation b) 增删改查CRUD怎么写 对象处于下列关系之一 (一对一, 一对多, 多对多)时 ...

  5. zookeoper在root下设置开机启动

    1 准备工作 1) 切换到/etc/rc.d/init.d/目录下 2) 创建zookeeper文件:touch zookeeper 3)更新权限:chmod +777 zookeeper 4)编辑文 ...

  6. HTML学习二（基础）

    HTML标题标题(Heading)是通过<h1>-<h6>等标签进行定义的<h1>定义最大标题<h6>定义最小标题注释:浏览器会自动地在标题的前后添加空 ...

  7. javascript基础教程学习总结(1)

    摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...

  8. 微信小程序之----接口调用方式

    最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实 ...

  9. 史上最坑的证书报错解决方法：Code=3000 "未找到应用程序的“aps-environment”的权利字符串"

    在ios注册远程通知获取设备令牌token的时候 // 注册远程通知获取设备令牌 toKen [[ UIApplication sharedApplication ] registerForRemot ...

  10. Masonry布局框架的使用

    Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性.比我们使用自动布局,繁琐的约束条件,好用多了.下面我们来学学masonry的使用方 ...