jQ小图标上下滑动特效
嗯,又到了,夜静饥寒的时候,手指颤抖,回望去,屋内满是寂静,寥寥绰影,咳咳咳,想我程序员之路还没到终点。。。就。。。咳咳咳
好了日常神经结束,还要涂我的唇膏。还剩下,最后一章,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小图标上下滑动特效的更多相关文章
- 微信小程序侧边栏滑动特效(左右滑动)
侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一 先看效果: wxml: <!--page/one/i ...
- css3 小图标提示特效
最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎, 啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的 相 ...
- 手风琴图片和钢琴导航栏JQ滑动特效
手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <me ...
- 基于slideout.js实现的移动端侧边栏滑动特效
HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~ ...
- (29)odoo的可用小图标
* 系统的小图标都采用了 fontawesome 官网是 http://fontawesome.dashgame.com/ * 运用小图标 # 首先打开官网 http://fonta ...
- odoo开发笔记--odoo可用小图标
odoo系统的小图标都采用了 fontawesome字体图标 官网: http://fontawesome.dashgame.com/ Github:http://fortawesome.github ...
- TouchSlide触屏滑动特效插件的使用
官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...
- TouchSlide 触屏滑动特效插件
TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是 ...
- 用css和js实现侧边菜单栏点击和鼠标滑动特效
1点击效果: 2关键代码: css: #div{ display:inline-block; width:100px; height:150px; border-radius: 5px; blackg ...
随机推荐
- ural1521 War Games 2
War Games 2 Time limit: 1.0 secondMemory limit: 64 MB Background During the latest war games (this s ...
- Moocryption
Moocryption 题目描述 Unbeknownst to many, cows are quite fond of puzzles, particularly word puzzles. Far ...
- CSS文字垂直居中和font-family属性
1.单行文字的垂直居中 单行文字垂直居中比较简单,直接让行高==盒子高度即可. 2.多行文字居中 多行文字居中,只需简单计算一下盒子的上padding即可.计算公式:padding-top=(盒子的高 ...
- Hibernate-----关系映射 重点!!!
1. 关系, 指的是对象之间的关系, 并不是数据库之间的关系. 2. 简化问题: a) 怎么写annotation b) 增删改查CRUD怎么写 对象处于下列关系之一 (一对一, 一对多, 多对多)时 ...
- zookeoper在root下设置开机启动
1 准备工作 1) 切换到/etc/rc.d/init.d/目录下 2) 创建zookeeper文件:touch zookeeper 3)更新权限:chmod +777 zookeeper 4)编辑文 ...
- HTML学习二(基础)
HTML标题标题(Heading)是通过<h1>-<h6>等标签进行定义的<h1>定义最大标题<h6>定义最小标题注释:浏览器会自动地在标题的前后添加空 ...
- javascript基础教程学习总结(1)
摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...
- 微信小程序之----接口调用方式
最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口 官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实 ...
- 史上最坑的证书报错解决方法:Code=3000 "未找到应用程序的“aps-environment”的权利字符串"
在ios注册远程通知获取设备令牌token的时候 // 注册远程通知获取设备令牌 toKen [[ UIApplication sharedApplication ] registerForRemot ...
- Masonry布局框架的使用
Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性.比我们使用自动布局,繁琐的约束条件,好用多了.下面我们来学学masonry的使用方 ...