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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS实现仿雅虎首页快捷登录入口及导航模块效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7063字，纯文字阅读大概需要11分钟。

内容图文

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

这是一款JS实现仿雅虎首页网站快捷入口导航模块的代码，里面有用户登录框，这个大家或许会用上吧，放到你网站着页作为用户登录也挺行。

运行效果截图如下：

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

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-yahoo-index-login-style-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>
<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程序设计有所帮助。

内容总结

以上是互联网集市为您收集整理的JS实现仿雅虎首页快捷登录入口及导航模块效果全部内容，希望文章能够帮你解决JS实现仿雅虎首页快捷登录入口及导航模块效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/356069.html

来源：【匿名】

【上一篇】JS基于myFocus库实现各种功能的tab选项卡切换效果【下一篇】javascript 怎么调用php方法

更多 ►

【JS实现仿雅虎首页快捷登录入口及导航模块效果】教程文章相关的互联网学习教程文章

JavaScript模块化的演变【代码】

前情回顾：自执行函数(IIFE)：作用：马上执行这个函数，自执行函数（IIFE），不易读(function(x){console.log(x);})(3); 易读版本：(function(x){return x *x; })(3); 闭包引申：回顾：function create_counter(initial){var x = initial || 0; //如果initial没有值，那么采用后面的0return {//对象inc:function(){x+=1;return x;}} } var c1 = create_counter(); console.log(c1.inc()); console.log(c1.inc()); console.log(c1....

Javascript模块化编程（一）：模块的写法(转)

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"...

React—Native开发之原生模块向JavaScript发送事件【图】

首先，由RN中文网关于原生模块（Android）的介绍可以看到，RN前端与原生模块之间通信，主要有三种方法：（1）使用回调函数Callback，它提供了一个函数来把返回值传回给JavaScript。（2）使用Promise来实现。（3）原生模块向JavaScript发送事件。其中，在我的博客React-Native开发之原生模块封装（Android)升级版较为详细的阐述了如何使用回调函数Callback来将数据传向JavaScript 端。但是有一个比较难以解决的问题是： ...

javascript 模块、函数、语句的前面的分号“;”的含义

强行和别的语句做一个分割，因为有可能前面的语句，或者别人的代码最后一行没有；号作为代码的结束，可能会导致错误。所以加一个；号，作为切割。例如下面的代码：/*!* Nestable jQuery Plugin - Copyright (c) 2012 David Bushell - http://dbushell.com/* Dual-licensed under the BSD or MIT licenses*/ ;(function($, window, document, undefined)原文：http://blog.csdn.net/fox_lht/article/details/45268691

javascript模块化【代码】

1、为什么要模块化嵌入网页的javascript代码越来越庞大，越来越复杂，需要一个团队分工协作、进度管理、单元测试等，模块化编程，已经成为一个迫切的需求。此外：模块化编程解决的问题有：命名冲突问题，文件依赖问题等等。一言以蔽之：模块化就是分解代码。2、什么是模块模块就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。有了模块，我们可以更方便地使用别人的代码，想...

201510250817_《Javascript权威指南（第六版）——属性描述符、模块、命名空间对象、私有空间命名的函数》（P244-）

一. js中共6个属性描述符1. value2. writable3. configurable //定义是否可以删除4. enumerable //是否可以迭代（遍历打印）5. get6. set---------------------------------------------------------------------------------------------------定义get和set时需定义在一个匿名方法里面，如：function Cat(){};(function(){ var _someName = "Bruce.Yin"; Object.prototype.defineProperty(Cat.prototype ,"someName "...

Javascript模块化开发－轻巧自制

Javascript模块化开发－轻巧自制一、前言现在javascript的流行，前端的代码越来越复杂，所以我们需要软件工程的思想来开发前端。模块化是必不可少的，这样不仅能够提高代码的可维护性、可扩展性以及鲁棒性，更大的好处就是能够提升整个团队的开发效率，也能够让新进的程序员更快的接手工作。今天晚上根据前辈们的经验，写啦一个简单的模块定义的封装组件，当是练手吧。不过感觉还是蛮好用的。二、学习模块化前我们应该先了解点什么...

JavaScript架构设计 1.种子模块【代码】

1.　　种子模块种子模块也叫核心模块，是框架的最先执行的部分。粽子模块包含功能：对象扩展，数组化，类型判定，简单的事件绑定与卸载，无冲突处理，模块加载与domReady。本章讲解以mass Framework的种子模块为范本。1.1　　命名空间种子模块作为一个框架的最开始部分，除了负责辅建全局的基础设施外，你有没有想到给读者一个震撼的开场呢？俗话说,好的开头时成功的一半。时下“霸主”jQuery 就有一个很好的开头——IIFE(立即调用...

Javascript 模块化设计模式【代码】

1.原始模式function a(){...}function b(){...}2.对象模式var moduler = new object({ _count:0, m1:function（）{...}， m2:function(){...} });这种写法会暴露模块化成员，内部状态可以被改变。moduler._count =5;3.模块化模式var moduler = (function(){ var _count=0;var m1 = function(){ ...}var m2 = function(){ ...}return {m1:m1,　　　　　m2:m2　　　　};})(); var p3 = (function(){var firstname = "a";function cha...

javascript构造函数模块

知识点【JavaScript模块化】【代码】【图】

JavaScript模块化历程JavaScript发展变迁大概是一下几个步骤：工具（浏览器兼容）组件（功能模块）框架（功能模块组织）应用（业务模块组织）但是经过了长长的后天努力过程JavaScript不断被类聚抽象，以更好的组织业务逻辑。从另一个角度而言，他也道出了JavaScript先天就缺乏的一项功能：模块虽然W3C组织对HTML5规范推进以及各大厂对规范的大力支持，但是对于JavaScript本身而言，它的规范依然是薄弱的，它还有以下缺陷：没有标准...

Javascript模块的写法

Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用。）一、原始写法模块就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。　　function m1(){　　　　//...　　}　　function m2(){　　　　//...　　}上面的函数m1()和m2()，组成一个模块。使用...

这2段有关javascript函数化模式【模块化模式】的总结，还需要好好地琢磨！！！

Javascript模块化

一、原始写法模块就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。　　function m1(){　　　　//...　　}　　function m2(){　　　　//...　　}上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。二、对象写法为了解决上面的缺点，可以把模块...

asp.net mvc 配合前端js的CMD模块化部署思想，小思路【代码】

1）布局视图，用于协调普通视图和共享视图，实现js库自由选择引用@{//具体页面定义好需要引入的js文件,在这里通过共享视图渲染出来var jsDefines = ViewBag.JsDefines as List<string>;if (jsDefines != null){Html.RenderPartial("_JsDefines", jsDefines);}} 2）具体普通视图，可以自由选择引入哪些js库引用@model List<string>@foreach (var str in Model) {switch (str){case "aajs":<script type="text/javascript" src="aa.j...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【JS实现仿雅虎首页快捷登录入口及导航模块效果】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程