JS+CSS实现仿支付宝菜单选中效果代码

本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码。分享给大家供大家参考。具体如下:

这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/

具体代码如下:

<!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">
<head>
<title>CSS仿支付宝菜单</title>
<style type="text/css">
* { padding:0px; margin:0px; list-style:none; }
body { font-size:14px; font-family:Verdana; }
#nav ul.nav_left, #nav ul.nav_right, #nav ul.nav_main li, #nav ul.nav_main li.over a, #nav ul.nav_main li a span, #nav ul.nav_main li.over a span { background:url(images/b.gif) no-repeat; }
#nav { background:url(images/b.gif) repeat-x; }
#wrap { width:960px; margin:0 auto; height:auto; overflow:hidden; padding-top:50px; }
#nav { background-position: 0 -178px; height:79px; width:960px; }
#nav ul.nav_left { background-position: 0 0; float:left; width:10px; height:79px; display:inline; }
#nav ul.nav_right { background-position:-20px 0; float:right; width:10px; height:79px; display:inline; }
#nav ul.nav_main { float:left; display:inline; }
#nav ul.nav_main li { background-position: -41px 0; float:left; padding:0 5px; }
#nav ul.nav_main li a { height:40px; display:block; text-decoration:none; float:left; }
#nav ul.nav_main li.over a { background-position: 0 -85px; }
#nav ul.nav_main li a span { background-position: right -90px; height:22px; display:block; padding-right:30px; padding-left:20px; padding-top:18px; color:#fff; font-weight:bold; overflow:hidden; cursor:pointer; float:left; margin-left:15px; display:inline; }
#nav ul.nav_main li.over a span { background-position: right -130px; color:#555; }
#nav ul.nav_main li#show_0 { background:none; }
</style>
<script type="text/javascript">
function $(id) {
 return document.getElementById(id);
}
window.onload = function() {
 var Root = $("nav_li").getElementsByTagName("li");
 for (var i = 0; i < Root.length; i++) {
  c = Root[i];
  c.setAttribute("id", "show_" + i);
  var xp = function(i) {
   show(i);
  };
  c.onmouseover = dete_bibao(xp, i, c);
 }
}
function show(j) {
 for (var n = 0; n <= 6; n++) {
  if ($("show_" + n).className != "s") {
   $("show_" + n).className = "s";
  }
  if (n == j) {
   $("show_" + n).className = "over";
  }
 }
}
function dete_bibao(fn, params, obj) {
 return function() {
  fn.call(obj || window, params);
 }
}
</script>
</head>
<body>
<div id="wrap">
 <div id="nav">
  <ul class="nav_left">
  </ul>
  <ul class="nav_main" id="nav_li">
   <li><a href="#"><span>首页</span></a></li>
   <li><a href="#"><span>脚本代码</span></a></li>
   <li><a href="#"><span>脚本下载</span></a></li>
   <li><a href="#"><span>网页特效</span></a></li>
   <li><a href="#"><span>生活社区</span></a></li>
   <li><a href="#"><span>休闲电影</span></a></li>
   <li><a href="#"><span>哈哼~</span></a></li>
  </ul>
  <ul class="nav_right">
  </ul>
 </div>
</div>
</body>
</html>

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

时间: 2015-09-24

js仿支付宝填写支付密码效果实现多方框输入密码

不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码. 最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验.原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了. PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说

Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效

今年春节晚会没看尽兴,被支付宝集福给添了一段插曲,朋友们都在那数定时间段不停的咻一咻,哇,我咻到一个敬业福,不可能的,哈哈.那么咻一咻功能基于程序代码是怎么实现的呢?下面我们小编给大家分享本教程帮助大家学习Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效,具体内容如下所示: 先来看看这个效果 这是我的在Only上添加的效果,说实话,Only现在都还只是半成品,台面都上不了,怪自己技术不行,也太懒了 PS:这个view也是我模仿了人家的效果,参考了人家的思路写的,不是纯手撸,罪过罪过

android编程实现类似于支付宝余额快速闪动效果的方法

本文实例讲述了android编程实现类似于支付宝余额快速闪动效果的方法.分享给大家供大家参考,具体如下: 效果如下: 此图片不会动,但实际上是会快速跳动的. 之前看到有支付宝的效果非常牛逼.就是进去看到余额呼噜噜的直接上蹿下跳到具体数字,效果帅,但不知道怎么实现,最近终于知道了. 思路: 首先经常用到倒计时操作.这个类就是 CountDownTimer.Android自带的.继承此类.无非就是跳动的 increase和intervel 增加的数字和间隔!你懂.继续..然后让他快速从一定数字跳动到

Android仿支付宝支付从底部弹窗效果

我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能 效果图 实现 主界面很简单,就是一个按钮,点击后跳到支付详情的Fragment中 package com.example.hfs.alipayuidemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.wi

iOS仿支付宝芝麻信用分数仪表盘动画效果

先看看效果图: 仪表盘动画效果.jpg 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字-->背景颜色变化 * */ #import <UIKit/UIKit.h> @interface ZLDashboardView : UIView @property (nonatomic, strong) UIImage *bgIm

iOS实现类似微信和支付宝的密码输入框(UIKeyInput协议)

目前在项目中需要实现发红包的功能,自己就写了一个密码输入框的控件,主要用到了UIKeyInput协议和CoreGraphics框架,效果类似微信支付,感觉还行就把我的思路和制作过程写下来给大家分享一下. 让你的自定义View具备输入的功能(UIKeyInput协议) 通过UIKeyInput协议可以为响应者提供简单的键盘输入的功能,让需要键盘的responder成为第一响应者就行了.UIKeyInput协议必须实现的有三个方法,分别是以下方法: #pragma mark - UIKeyInput

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

本文实例讲述了JS实现淘宝支付宝网站的控制台菜单效果.分享给大家供大家参考.具体如下: 这是一款支付宝网站中的控制台总菜单,可实现动画效果的显示,漂亮美观,简洁实用,鼠标移到文字上,会滑出一个菜单层,移开后消失,也是当前较流行的菜单方式,很多朋友都挺喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-taobao-alipay-ctrl-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

Android仿支付宝中余额宝的数字动画效果

实现效果图: 下面是具体代码,可直接复制: package com.lcw.rabbit.widget; import android.animation.ObjectAnimator; import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; import android.view.animation.AccelerateDecelerateInterpola

支付宝支付开发IOS图文教程案例

前言:继上次<微信支付开发IOS图文教程案例>以来,一直没有太多时间,更新总结详细支付这样的长篇大论,很抱歉.今天,推出支付宝支付的详细流程. 1.开始下载和查看支付宝支付的Demo. 我们直接进入支付宝的支付平台参考来进行集成支付宝支付: https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.jIUkAQ&treeId=59&articleId=103675&docType=1 集成过程基本

微信支付开发IOS图文教程案例

前言:下面介绍微信支付的开发流程的细节,图文并茂,你可以按照我的随笔流程过一遍代码.包你也学会了微信支付.而且支付也是面试常问的内容. 正文: 1.首先在开始使用微信支付之前,有一些东西是开发者必须要知道的,打开下面链接: https://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=3_1 然后可以看到下面的页面,这个就是微信支付商户平台的开发文档,很多东西是可以查阅和了解的,在开发使用微信SDK支付功能的时候,遇到了问题也可以到这找找相关须知信

Eclipse搭建spring开发环境图文教程(推荐)

1 安装 springsource-tool-suite: (1)在官网上找安装Eclipse的对应版本(我的Eclipse版本是4.5.1,对应版本是3.7.2) http://download.springsource.com/release/TOOLS/update/3.7.2.RELEASE/e4.5/springsource-tool-suite-3.7.2.RELEASE-e4.5.1-updatesite.zip (2)INSTALL NEW SOFTWARE (3)下载sprin

C# 对Outlook2010进行二次开发的图文教程

第一步:添加新项目 第二步:添加新的页签,注意,此页签是显示到Outlook主界面的 第三步:添加自己想要的文本框以及按钮 第四步:如果你想将此界面显示到主界面的话,需要这样设置:属性里面的RibbonType 设置为 Microsoft.Outlook.Explorer 运行后的结果: 获取所有邮件内容 Microsoft.Office.Interop.Outlook.Application app; Microsoft.Office.Interop.Outlook.Items items;

Ubuntu 20.04 下安装配置 VScode 的 C/C++ 开发环境(图文教程)

前言: 之前安装了Ubuntu 18.04,结果在安装Codeblocks / VScode还是安装gcc,c/c++的时候出现了一堆错误(缺失依赖树等等问题,换源也无法成功),整了一个下午没有任何进展,网上找不到任何解决方法,于是只能重装了Ubuntu 20.04,之后Codeblocks倒是安装成功了,但是明明在已经安装了C/C++跟GCC编译包的情况,它仍然显示在该路径下找不到,无论路径是默认自动定位在/usr 还是在/usr/bin 之下仍然出现此情况,同样网上找不到任何解决方法,于是只

Apache+PHP+MySQL搭建PHP开发环境图文教程

简介:总结在Windows环境搭建PHP开发环境(Apache+PHP+MySQL) 安装Apache 1.下载Apache,地址:http://www.apachelounge.com/download/,如下图: 2.解压压缩包,最好放到磁盘根目录,不然配置时容易报路径错误,我这里改了文件夹名,方便以后配置,如下图: 安装PHP 1.下载PHP压缩包,地址:https://windows.php.net/download,我下载的是PHP7.0 Thread Safe 版本,如下图: 2.解

支付宝支付开发——当面付条码支付和扫码支付实例

本文介绍支付宝中当面付下属的条码支付.扫码支付.订单查询.退款申请的集成开发过程. 本文分为以下五个部分: 条码支付和扫码支付介绍 申请应用 密钥生成及配置 API及SDK集成 条码支付.扫码支付.订单查询.退款申请  一.条码支付及二维码支付介绍 1. 条码支付 条码支付是支付宝给到线下传统行业的一种收款方式.商家使用扫码枪等条码识别设备扫描用户支付宝钱包上的条码/二维码,完成收款.用户仅需出示付款码,所有收款操作由商家端完成.其使用场景如下: 业务流程: 使用步骤: 用户登陆支付宝钱包,点击

PHP后台微信支付和支付宝支付开发

关于支付的流程之类的就不做解释,大家可以自行搜索! 微信支付 项目前提:本人用的是tp框架,PHP语言 下载到微信平台提供的微信支付接口文件,放在了tp第三方类库vendor,命名为WxpayAPI WxpayAPI/lib/WxPay.Api.php 接口访问类; WxpayAPI/lib/WxPay.Config.php 配置账号信息; WxpayAPI/lib/WxPay.Data.php 数据对象基础类; WxpayAPI/lib/WxPay.Exception.php 微信支付API异

Android支付宝支付开发实例

在移动应用满天飞的时代,随着移动支付的盛行,很多应用中都集成了支付功能.之前的支付一直不是我负责,近期这个项目我负责订单模块少不了要做支付,每每提起支付就觉得怕怕,觉得很难,但当真正做的时候却远远没有想象中的那么难.支付宝的SDK提供了demo,我们只需要配置好一些基本信息,这个demo就可以正常支付.说了这么多,我们还是来看看完整的集成步骤吧! 1.首先得申请支付宝的商家用户,并签约支付宝的相关服务. 移动支付肯定是需要签约 移动支付 了,好像是废话. 2.支付宝商家账号有了之后就好办了,去支

Win7下搭建python开发环境图文教程(安装Python、pip、解释器)

安装Python 1.下载适合系统版本的Python 先到网址(http://www.python.org/getit/)下载适合自己windows的python版本,32位win7下载 Python 3.3.2 Windows x86 MSI installer, 64位win7下载Python 3.3.2 Windows x86-64 MSI installer. (注:右击"计算机"-->"属性",会显示系统信息,如下图,显示我的win7为32位 ) 2