<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>动画案例_JQ</title>
<meta charset="utf-8"/>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{
margin:0;
padding:0;
}
#move{
padding:10px;
width:300px;
background:#ccc;
margin:10px auto;
border:1px solid #000;
}
#move a{
display:inline-block;
width:58px;
height:40px;
border:1px solid #ddd;
border-radius:3px;
background-color:#fff;
text-align:center;
margin:10px 17px;
position:relative;
padding-top:40px;
color:#9c9c9c;
font-size:12px;
text-decoration:none;
line-height:25px;
overflow:hidden;
}
#move a i{
position:absolute;
top:20px;
left:0;
display:inline-block;
width:100%;
text-align:center;
filter:alpha(opacity=100);
opacity:1;
}
#move a:hover{
color:#f00;
}
#move img{
border:none;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#move a').mouseenter(function(){
$(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){
//300是速度值，毫秒
$(this).css({top:"30px"});
$(this).animate({top:"20px",opacity:"1"},200)
})
})
})
</script>
</head>
<body>
<div id="move">
<a href=""><i><img src="images/caipiao.png" alt="" /></i><p>彩票</p></a>
<a href=""><i><img src="images/movie.png" alt="" /></i><p>电影</p></a>
<a href=""><i><img src="images/food.png" alt="" /></i><p>外卖</p></a>
<a href=""><i><img src="images/game.png" alt="" /></i><p>游戏</p></a>
<a href=""><i><img src="images/insure.png" alt="" /></i><p>保险</p></a>
<a href=""><i><img src="images/travel.png" alt="" /></i><p>旅行</p></a>
</div>
</body>
</html>
分享到：
相关推荐
为什么说是新老结合呢，首先，页面是基于jQuery实现的插件 其次，展现的动画效果依赖于CSS3动画，so，新老结合实现的动画效果 使用方法： 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到...
实现的原理很简单：鼠标悬停在图片上后，左侧的图片向上移动半个图片的距离(两个效果的图片事先做到一个图片上) 鼠标移走后图片恢复到原来位置。 但是最近好多懒人疑问想找这样的效果一直找不到，所以，...
为什么说是新老结合呢，首先，页面是基于jQuery实现的插件 其次，展现的动画效果依赖于CSS3动画，so，新老结合实现的动画效果 使用方法： 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到你...
本文实例讲述了jQuery实现的下雪动画效果。分享给大家供大家参考，具体如下： html部分： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml">...
1、使用JQuery进行项目开发，搭配部分如mousewheel、wow.js、animate.css、swiper等插件实现六大滚屏子页面，如首页、品牌页、游戏详情页、国风文化页、新闻资讯页、游戏文化页。 2、页面数据基本由Ajax请求得来平且...
效果描述： 基于jQuery的一款插件，支持动画形式显示你的滚动条 使用方法： 1、将CSS样式拷贝过去 2、将index.html中的代码部分拷贝过去即可 (注意保持文件路径正确)
首先是html部分： <html> <body> 顶部 中部 ...持续添加直到出现滚动条</p>... </body> </html> 先添加两个元素作为按钮。然后对元素进行补充： <html> <body> 顶部 中部 ......
一个原理很简单的基于jQuery插件库的图片动画效果 主要采用animate动画属性以及回调函数实现 效果一气呵成 使用方法： 1、将head中的样式引入到你的样式表中 2、将body中的代码部分拷贝过去即可
jQuery是业界最流行的JavaScript... 第四部分（第8～14章）详细分析了功能模块的源码实现，包括属性操作Attributes、事件系统Events、DOM遍历Traversing、DOM操作Manipulation、样式操作CSS、异步请求Ajax、动画Effects
一个原理很简单的基于jQuery插件库的图片动画效果 主要采用animate动画属性以及回调函数实现 效果一气呵成 使用方法： 1、将head中的样式引入到你的样式表中 2、将body中的代码部分拷贝过去...
jQuery UI 主要分为3个部分：交互、微件和效果库。 交互 交互部件是一些与鼠标交互相关的内容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。 微件 主要是一些界面的扩展，包括Accordion,...
使用jQuery实现一个简单的轮播图，实现的原理就是： 1、在一个区域内，设置宽高，超出这部分区域就要实现一个隐藏 2、获取图片的大小 为300，索引从0开始 3、当你点击右边的按钮时候，就要实现你点击的按钮的索引...
效果描述： 鼠标悬停，图片翻转，基于jQuery实现的效果 当然，也有CSS3在里面，混杂型的 使用方法： 1、将CSS代码引入到你的网页中 2、将body中的代码部分拷贝到你的页面中
效果描述： 基于jQuery的一款插件，支持动画形式显示你的滚动条 使用方法： 1、将CSS样式拷贝过去 2、将index.html中的代码部分拷贝过去即可 (注意保持文件路径正确)
效果描述： 鼠标移动到图片上后，边框有一个动画效果，看起来很舒服 缺点：不兼容IE7，IE8浏览器下兼容性还可以，只是没有了边框... 2、将body中的代码部分拷贝过去即可 (注意保持图片路径的正确性即可)
本文实例讲述了jQuery实现信息提示框效果。分享给大家供大家参考。具体如下： 一个jquery提示框特效，黑色风可，且提示框是圆角形状，点击页面中间的几个文字，提示框信息就会动态显示，CSS和JS部分代码比较多。 先...
它提供了简单的动画效果，如淡入淡出以及自定义动画效果，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。 虽然说插件出来的时间比较长，但它小，经过很多网站的使用，成熟度也非常的高。...
在CoreAnimation中，jQuery像动画一样 NSBKeyframeAnimation我开始实现这个类，这是我在 2012年07月 ( http://www.youtube.com/watch?v=54ESi6snSfI ) 中给马德里的CoreAnimation类演示中的一部分
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...
基于jQuery实现的，适合移动手机网页的一款导航 点击按钮后，动画效果比较流畅的显示出来 使用方法： 1、将CSS中的样式拷贝到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可