JS实现淘宝支付宝网站的控制台菜单效果


Posted in Javascript onSeptember 28, 2015

本文实例讲述了JS实现淘宝支付宝网站的控制台菜单效果。分享给大家供大家参考。具体如下:

这是一款支付宝网站中的控制台总菜单,可实现动画效果的显示,漂亮美观,简洁实用,鼠标移到文字上,会滑出一个菜单层,移开后消失,也是当前较流行的菜单方式,很多朋友都挺喜欢的。

运行效果截图如下:

JS实现淘宝支付宝网站的控制台菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<HEAD>
<TITLE>支付宝的控制台菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type="text/css"> 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
body{font-size:12px;}
#MyMenu{ margin: 10px auto; width: 760px;background: url(images/Account_Title_BgC.gif) repeat-x; height: 36px;}
.MyMenubg{background: url(images/Account_Title_Bg.gif) no-repeat;}
#QuickMenu{background: url(images/Account_Title_Bg.gif) no-repeat right -36px;text-align:left;}
#QuickMenu a{font-size:12px;color:#003599;text-decoration:none;}
#QuickMenu a:hover,#QuickMenu a:active{color:#FF6B00;}
#QuickMenu span a.cc:hover ,#QuickMenu a.cc:active span{background: url(images/MyMenu_bg_on.gif) no-repeat 0px 6px;}
#QuickMenu span a.cc {cursor:pointer;display:block;background: url(images/MyMenu_bg.gif) no-repeat 0px 6px;margin:0px 0px 0px 10px;width:154px;height:23px;padding:11px 5px 0px 25px;}
#MyMenuLinks{border:1px solid #FE7E25;background:#FCD5AA;padding:3px;text-align:left;top:-3px;left:20px;width:240px;float:left;}
#MyMenuLinks *{margin:0px;padding:0px;line-height:20px;}
#MyMenuLinks li {color:#003599;font-weight:bold;float:left;width:208px;padding-bottom:15px;}
#MyMenuLinks li.home a{display:block;border:1px solid #FFBD80;background:#FCF6DC url(images/MyMenu_home.gif) no-repeat 45px 5px;text-align:center;font-weight:normal;}
#MyMenuLinks ul{clear:left;list-style:none;border:1px solid #FBDDB9;background:#FFF;width:208px;padding:15px 15px 0px 15px;float:left;}
#MyMenuLinks ul ul{border:1px solid #FFF;background:#FFF;width:200px;padding:0px;}
#MyMenuLinks li li{font-weight:normal;width:90px;background:url(images/MyMenu_Li_bg.gif) no-repeat 0px 6px;padding:0px 0px 0px 10px;}
#all-links, #flying{display:none;margin-left:-35px;position:absolute;left:0;top:30px;}
#flying{background:#fff;border:1px dashed #ccc;top:0;}
#enter{position: relative;width:184px;}
</STYLE>
</HEAD>
<BODY>
<DIV id=MyMenu>
 <DIV class=MyMenubg>
  <DIV id=QuickMenu>
   <div id="enter">
    <span><A id=cc href="#" class="cc">支付宝快速入口</A></span>
    <div id="flying"></div>
    <DIV id=all-links style="display:none;">
     <DIV id=MyMenuLinks>
      <UL>
       <LI class=home><A class=R href="#">我的支付宝首页</A> </LI>
       <LI>账户管理 
        <UL>
         <LI><A href="#">账户余额查询</A> </LI>
         <LI><A href="#">账户信息管理</A> </LI>
         <LI><A href="#">支付宝卡通</A> </LI>
        </UL>
       </LI>
       <LI>资金管理 
        <UL>
         <LI><A href="#">充值</A> </LI>
         <LI><A href="#">提现</A> </LI>
         <LI><A href="#">账户明细查询</A> </LI>
         <LI><A href="#">提现申请查询</A> </LI>
        </UL>
       </LI>
       <LI>增值服务 
        <UL>
         <LI><A href="#">安全中心</A> </LI>
         <LI><A href="#">手机服务</A> </LI>
         <LI><A href="#">信使</A> </LI>
         <LI><A href="#">产品中心</A> </LI>
        </UL>
       </LI>
      </UL>
     </DIV>
    </DIV>  
   </div>
  </DIV>
 </DIV>
</DIV>
<script type="text/javascript">
var $ = function(id){
 return typeof id == 'string' ? document.getElementById(id) : id; 
}
var flying = function(obj, w, h, callback){
 var d = 10;
 var index = 0;
 var extend = 50;
 var step = {width:(w+extend)/d, height:(h+extend)/d, top:30/d};
 var only;
 clearInterval(only);
 obj.style.display = 'block';
 only = setInterval(
  function(){
   index++;
   obj.style.width = ( index * step.width) + 'px';
   obj.style.height = ( index * step.height) + 'px';
   obj.style.top = ( index * step.top) + 'px';
   obj.style.marginLeft = ( 0 - (index * step.width - 150))/2 + 'px';
   if(index > d){
    clearInterval(only);
    if(typeof callback == 'function') callback(obj);
   }
  }
 ,10);
}
var timer;
$('enter').onmouseover = function(){
 clearTimeout(timer);
 timer = setTimeout(function(){
  if($('all-links').style.display == 'none'){ 
   new flying($('flying'), 248, 293, function(obj){
    $('all-links').style.display = 'block';
    obj.style.display = 'none';
   });
   document.title = 'over--'+Math.random();
  }
 },200);
}
$('enter').onmouseout = function(){
 clearTimeout(timer);
 timer = setTimeout(function(){
  $('all-links').style.display = 'none';
  document.title = 'out--'+Math.random();
 },200);
}
</script>
</BODY>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 #Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 #Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 #Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 #Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 #Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 #Javascript
asp知识整理笔记3(问答模式)
Sep 27 #Javascript
You might like
PHP新手入门学习方法
2011/05/08 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
session 加入redis的实现代码
2016/07/15 PHP
document.compatMode介绍
2009/05/21 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
python删除文件示例分享
2014/01/28 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python读写文件基础知识点
2019/06/10 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Python阶乘求和的代码详解
2020/02/14 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
国贸专业个人求职信分享
2013/12/04 职场文书
调解协议书
2014/04/16 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS