JS实现仿雅虎首页快捷登录入口及导航模块效果


Posted in Javascript onSeptember 19, 2015

本文实例讲述了JS实现仿雅虎首页快捷登录入口及导航模块效果。分享给大家供大家参考。具体如下:

这是一款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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿雅虎首页网站快捷入口和快</title>
<style>
*{ margin:0; padding:0; border:none;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif; height:100%;}li{list-style:none;}
html{ height:100%;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.rrow{width:224px;}
.login{ background:url(images/box.png); height:210px;width:224px; overflow:hidden;}
.login h2{ color:#fff; font-size:14px; padding:4px 12px; line-height: 30px;height:24px; overflow:hidden; }
.login h2 span{ font-size:12px; float:right;margin:-31px 23px 0 0;line-height: 32px;font-weight:400; cursor:pointer;}
.rrow ul{ margin:5px 6px; }
.rrow ul li {width:216px; height:31px;margin-bottom: 5px; overflow:hidden; float:left;}
.rrow ul li a,.rrow ul li span{ cursor:pointer; display:block; float:left; margin-right: 4px; background:url(images/title.gif) 0 -152px; width:69px;padding-left:35px; height:31px; overflow:hidden; line-height: 32px; font-weight:700;}
.rrow ul li .lhover{ display:block; float:left; margin-right: 4px; background:url(images/title.gif) 0 -183px; width:69px;padding-left:35px; height:37px; overflow:hidden; line-height: 32px; font-weight:700;}
.rrow ul li .yhzc{ background:url(images/title.gif) 0 -152px;}
#yhzc{background:url(images/title.gif) 0 -183px;height:37px;}
.rrow ul li .hysj{ background:url(images/title.gif) -104px -152px; }
#hysj{ background:url(images/title.gif) -104px -183px;height:37px;}
.rrow ul li .fbxx{ background:url(images/title.gif) 0 -220px; }
#fbxx{ background:url(images/title.gif) 0 -251px;height:37px;}
.rrow ul li .gstg{ background:url(images/title.gif) -104px -220px; }
#gstg{ background:url(images/title.gif) -104px -251px;height:37px;}
.rrow ul li .xzmj{ background:url(images/title.gif) 0 -288px; }
#xzmj{ background:url(images/title.gif) 0 -319px;height:37px;}
.rrow ul li .bzzx{ background:url(images/title.gif) -104px -288px; }
#bzzx{ background:url(images/title.gif) -104px -319px;height:37px;}
.rrow ul .hoverli{background:url(images/title.gif) 0 -357px;height:92px; overflow:hidden; line-height: 32px; font-weight:700;}
.qlogin{height:92px; width:210px; line-height: 32px; margin:5px 0 0 10px; display:none;}
.qlogin dt{ height:0; overflow:hidden; }
.qlogin dd{ padding:4px; width:210px; height:22px; text-align:left; float:left;clear:both;overflow:hidden;}
.qlogin dd .passw,.qlogin a:hover.passw{ margin: -4px 12px 0 0; float:right;}
.rrow ul li div{ margin-top: 5px; width:210px; display:none;}
.rrow ul li div a,.rrow ul li div a:hover{background:url(images/title.gif) -80px -1px; height:20px; line-height: 20px; clear:both; font-weight: 400; width:170px;}
.rrow ul li div a:hover{ text-decoration:underline; }
.rrow ul li .block,.rrow .block{ display:block; }
.rrow ul .none{ display:none; }
.btn{font-size:12px; font-family:宋体; float:left; width:57px; height:20px; overflow:hidden; background:url(images/title.gif); line-height: 21px;padding-left:18px;margin-right: 10px; }
a:hover.btn{background:url(images/title.gif) 0 -20px;}
#btn4{background:url(images/title.gif);width:75px; margin-left: 48px; cursor:pointer;}
.input2{font-size:12px; border:1px solid #999; width:140px; height:16px; padding:1px 2px 0 2px; }
</style>
</head>
<body>
<table width="18%" height="420" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td><div class="rrow">
  <div id="login" class="login">
  <h2>便捷入口<span><a class="w" title="快速登陆">快速登陆</a></span></h2>
  <dl class="qlogin clearfix">
   <dt>快速登陆</dt>
   <dd>用户名:
    <input name="text" type="text" class="input2" />
   </dd>
   <dd>密   码:
    <input name="password" type="password" class="input2" />
   </dd>
   <dd>
   <input name="submit" type="submit" class="btn" id="btn4" value="立即登陆" />
   <a class="passw" href="#" target="_blank">忘记密码?</a></dd>
  </dl>
  <ul>
   <li id="btype1" class="hoverli"><span class="yhzc" id="yhzc" href="#" target="_blank" title="用户注册">用户注册</span><span class="hysj" href="#" target="_blank" title="会员升级">会员升级</span>
    <div class="block"><a href="#" target="_blank">1...</a><a href="#" target="_blank">1...</a></div>
   <div><a href="#" target="_blank">2...</a><a href="#" target="_blank">2...</a></div>
   </li>
   <li id="btype2"><span class="fbxx" href="#" target="_blank" title="发布信息">发布信息</span><span class="gstg" href="#" target="_blank" title="公司推广">公司推广</span>
    <div><a href="#" target="_blank">3...</a><a href="#" target="_blank">3...</a></div>
   <div><a href="#" target="_blank">4...</a><a href="#" target="_blank">4...</a></div>
   </li>
   <li id="btype3"><span class="xzmj" href="#" target="_blank" title="寻找买家">寻找买家</span><span class="bzzx" href="#" target="_blank" title="帮助中心">帮助中心</span>
    <div><a href="#" target="_blank">5...</a><a href="#" target="_blank">5...</a></div>
   <div><a href="#" target="_blank">6...</a><a href="#" target="_blank">6...</a></div>
   </li>
  </ul>
  </div>
  <script type=text/javascript>
   var login = document.getElementById("login");
var yhzc = document.getElementById("yhzc");
var h2 = login.getElementsByTagName("h2");
var dl = login.getElementsByTagName("dl");
var ul = login.getElementsByTagName("ul");
var lis = ul[0].getElementsByTagName("li");
var allspan = ul[0].getElementsByTagName("span");
var qlog = h2[0].getElementsByTagName("a");
var divs = login.getElementsByTagName("div");
qlog[0].onclick = function()
{
for(var i = 0; i < divs.length; i++)
{divs[i].className = null;}
for(var i = 0; i < allspan.length; i++)
{allspan[i].id = null;}
lis[0].className = "none";
dl[0].className = "qlogin block";
}
for(var x = 1; x < 4; x++)
{show();}
function show()
{
var test = "btype" +x;
var btype = document.getElementById("btype" + x);
var as = btype.getElementsByTagName("a");
var bdivs = btype.getElementsByTagName("div");
var spans = btype.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++)
{
spans[i].num = i;
spans[i].onmouseover = type;
}
function type()
{
for(var i = 0; i < lis.length; i++)
{lis[i].className = null;}
for(var i = 0; i < allspan.length; i++)
{allspan[i].id = null;}
for(var i = 0; i < divs.length; i++)
{divs[i].className = null;}
dl[0].className = "qlogin";
yhzc.id = null;
spans[this.num].id = spans[this.num].className;
bdivs[this.num].className = "block";
btype.className = "hoverli";
}
}
   </script>
 </div>  
 </td>
 </tr>
</table>
</body>
</html>

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

Javascript 相关文章推荐
javascript 常用功能总结
Mar 18 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
jQuery的事件预绑定
Dec 05 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
JS数组的常用10种方法详解
May 08 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 #Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 #Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 #Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 #Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 #Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 #Javascript
11种ASP连接数据库的方法
Sep 18 #Javascript
You might like
PHP 变量的定义方法
2010/01/26 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python入门之modf()方法的使用
2015/05/15 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
文秘专业毕业生就业推荐信
2013/11/08 职场文书
个人党性剖析材料
2014/02/03 职场文书
二年级小学生评语
2014/04/21 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL