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

好了日常神经结束，还要涂我的唇膏。还剩下，最后一章，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. nginx的内页跳转总结

      刚进公司的时候老大一直在要求php做内页跳转,当时也不太了解细节所以一直没有说话.后来php问我你会不会做内页跳转,我说会一点就做了几个,从此搞内页跳转搞了两个星期.至于为什么做内页跳转哪就暂时不 ...

  2. Struts2--Global Result全局结果集

    如果有很多action,有共同的result指向, 而且属于不同的包,那么可以继承上面的包, 然后写一个<global-results> 1. jsp显示文件: <ol> &l ...

  3. git查看每个版本间的差异

    命令行: 1,git log: 2,git diff 版本号码 窗口类型: 1,sudo apt-get install gitk 2,gitk

  4. Linux 最简单的驱动程序hello world

    图片驱动位置:kernel3-10/driver/misc/mediatek/imgsensor/src/mt8127/kd_sensorlist.c 例子:kernel-3.10/driver/mi ...

  5. NodeJs与ActionScript的GET和POST通讯

    今天项目遇到一个小问题,做了个小功能,向服务端发送GET请求,但是服务端解析数据是时候报语法错误,如下: make Request data error:SyntaxError: Error #113 ...

  6. CodeForces 621C Wet Shark and Flowers

    方法可以转化一下,先计算每一个鲨鱼在自己范围内的数能被所给素数整除的个数有几个,从而得到能被整除的概率,设为f1,不能被整除的概率设为f2. 然后计算每相邻两只鲨鱼能获得钱的期望概率,f=w[id1] ...

  7. codis 新版本 CodisLabs 编译安装

    codis 3.0 版本编译安装 # 首先安装 go 语言 wget https://storage.googleapis.com/golang/go1.4.2.linux-amd64.tar.gz ...

  8. java 自动备份MySQL 数据库（转载）

    1 package com.learn4j.bat; public class Backup { private String user_name;// 数据库用户名 private String u ...

  9. Android SQLite 加入自定义函数

    SQLite Database 自定义函数实现: //Here's how to create a function that finds the first character of a strin ...

  10. iOS开发之圆角指定 分类： ios技术 2015-05-25 16:26 191人阅读 评论(0) 收藏

    如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...