jQuery实战之仿Flash跳动的按钮效果
来源:互联网 发布:python中time.sleep 编辑:程序博客网 时间:2024/05/19 16:35
下面是JQ的代码部分:
- $(function(){
- //append img to LI
- $("#nav-shadow li").append('<img class="shadow" src="images/reflaction_pic.jpg"
- width="60" height="32" alt="" />');//这是阴影的图片
- //append hover event
- $("#nav-shadow li").hover(function(){
- //define e for tihs
- var $e = this;
- $($e).find("a").stop().animate({marginTop:'-14px'},250,function(){//回调函数控制
- $($e).find("a").animate({marginTop:'-10px'},250);
- });
- $($e).find("img.shadow").stop().animate({width:"80%",opacity:"0.3",marginLeft:"8px"},250);
- },function(){
- var $e = this;
- $($e).find("a").stop().animate({marginTop:"4px"},250,function(){
- $($e).find("a").animate({marginTop:"0px"},250);
- });
- $($e).find("img.shadow").stop().animate({width:"100%",opacity:"1",marginLeft:"0px"},250);
- }
- )
- })
分析:
首先增加倒影:
- $("#nav-shadow li").append('<img class="shadow" src="images/reflaction_pic.jpg"
- width="60" height="32" alt="" />')
然后注册,hover事件,用回调函数控制弹回去时候的效果。阴影的距离感是通过透明度控制的。
下面是HTML代码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>button_effect</title>
- <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
- <script type="text/javascript" src="action.js"></script>
- <style type="text/css">
- *{ margin:0; padding:0;}
- div{ width:500px; height:500px; margin:100px 0 auto;}
- ul,ol{ list-style:none; list-style-type:none;}
- a,a:visited,a:hover{ display:block; text-decoration:none; color:#ccc; text-indent:-9999px;
- outline: 0 none; width:61px; height:60px; z-index:2; overflow:hidden; position:relative;}
- li{ float:left; width:61px; height:92px; margin-left:10px; position:relative;}
- #nav-shadow li.chang-one a{ background:url(images/button_pic.jpg) no-repeat left top;}
- #nav-shadow li.chang-two a{background:url(images/button_pic.jpg) no-repeat -60px top;}
- #nav-shadow li.chang-three a{background:url(images/button_pic.jpg) no-repeat -120px top;}
- #nav-shadow li.chang-four a{background:url(images/button_pic.jpg) no-repeat -180px top;}
- #nav-shadow li.chang-five a{background:url(images/button_pic.jpg) no-repeat -240px top;}
- #nav-shadow li img.shadow{margin:0 auto; position:absolute; bottom:0px; left:0px; z-index:1;}
- </style>
- </head>
- <body>
- <div id="content">
- <ul id="nav-shadow">
- <li class="chang-one"><a href="#" title="reflaction_one">click me</a></li>
- <li class="chang-two"><a href="#" title="reflaction_two">click me</a></li>
- <li class="chang-three"><a href="#" title="reflaction_three">click me</a></li>
- <li class="chang-four"><a href="#" title="reflaction_four">click me</a></li>
- <li class="chang-five"><a href="#" title="reflaction_five">click me</a></li>
- </ul>
- </div>
- </body>
- </html>
- jQuery实战之仿Flash跳动的按钮效果
- 仿按钮效果的单元格
- 仿余额宝数字渐慢跳动效果
- jQuery实现仿flash大图切换效果(带鼠标感应)
- jquery上下翻滚效果导航菜单(仿flash)
- 开源项目之PathButton(仿Path按钮动画效果)
- Android UI之三个Button按钮仿Iphone效果
- jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
- H5实现仿flash效果
- 项目实战-仿bilibili刷新按钮的实现
- 项目实战-仿bilibili刷新按钮的实现
- Flash 展示JQuery 的Effects 效果
- 高仿google now效果的呼吸按钮简单实现
- IOS开发 UIView的跳动效果
- 类似弹簧跳动的动画效果
- iOS支付宝金额跳动的效果
- Jquery应用案例之单条新闻的滚动效果(仿雅虎首页新闻滚动)
- jquery仿jquery mobile的select控件效果
- Jmail发送和接收邮件
- Oracle 字符集的查看和修改
- android-Random随机数
- freemarker 的list问题
- 2010 水仙花数
- jQuery实战之仿Flash跳动的按钮效果
- poj 3782 Equal Sum Partitions
- 向 COM 公开 .NET Framework 组件
- C# 利用Jmail接收邮件
- git学习三 git基本操作
- JVM内存管理
- xmu1166求第k小数 树状数组/线段树
- 【项目管理】项目沟通心得
- 工具一览