`
xxtianxiaxing
  • 浏览: 721887 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

js 导航分类 特效

    博客分类:
  • web
阅读更多
<!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=utf-8" />
<style type="text/css">
/*topbar*/
.toppop1{
	position:absolute;
	padding:8px;
	left:89px;
	top:25px;
	width:600px;
	border:1px solid #aebac3;
	background-color:#FFFFFF;
	background-position:0 bottom;
	display:none;
	z-index:10;
}
.toppop1 ul{overflow:hidden;}
.toppop1 li{float:left;height:20px;width:100px;white-space:nowrap;overflow:hidden;}
.toppop1 a{padding:2px 4px;}

.title{color:#030;}
.allservice1{
	position:absolute;
	z-index:13;
	left: 86px;
	top: -2px;
}
.allservice1 a{
	border:0;
	white-space:nowrap;
	margin-right:5px;
	padding:3px 3px 3px 4px;
	position:absolute;
	z-index:30;
	text-decoration:none;
	display:block;
	left: 3px;
	top: 7px;
	*top: 5px;
}
.allservice1 a:hover{text-decoration:none;}
.allservice1 .titleon{margin-right:5px;padding:2px 2px 2px 3px;position:absolute;z-index:1231;background-color:#FFFFFF;border:1px solid #aebac3;border-bottom-color:#FFFFFF;text-decoration:none;display:block;}
.allservice1 span{background:url(../images/ji.gif) no-repeat 100% 0%;padding-right:14px;color:#666;}

.top_nav_a_here_up{width:310px;float:left;z-index:1000;}
.top_nav_b_here_up{position:relative;width:300px;float:right;}
.top_reg_here_up{width:360px;padding:0;text-align:center;}
</style>
<script type="text/javascript">
if (document.all) { //ie
	window.attachEvent("onload", loadType);
} else { //ff
	window.addEventListener("load", loadType, false);
}
function loadType() {
	var popIndex = -1;
	var top_nav = document.getElementById("top_nav_here_up").getElementsByTagName("a");
	for (var i = 0; i < top_nav.length; i++) {
		if (top_nav[i].hasChildNodes() && top_nav[i].firstChild.nodeName == "SPAN") {
			top_nav[i].onmouseover = function (i) {
				return function () {
					this.className = "titleon";
					if (popIndex != -1 && popIndex != i) {
						top_nav[popIndex].className = "title";
						document.getElementById("pop" + popIndex).style.display = "none";
					}
					showPop(i);
					popIndex = i;
				};
			}(i);
			top_nav[i].onmouseout = function (i) {
				return function (evt) {
					var popWrap = document.getElementById("pop" + i);
					if (/Firefox/.test(window.navigator.userAgent)) {
						if (!(this.compareDocumentPosition(evt.relatedTarget) & 16) && popWrap != evt.relatedTarget) {
							top_nav[i].className = "title";
							popWrap.style.display = "none";
							return;
						}
						popWrap.onmouseout = function (i) {
							return function (evt) {
								if (!(this.compareDocumentPosition(evt.relatedTarget) & 16) && popWrap != evt.relatedTarget) {
									top_nav[i].className = "title";
									this.style.display = "none";
								}
							};
						}(i);
						return;
					}
					if (!popWrap.contains(event.toElement)) {
						top_nav[i].className = "title";
						popWrap.style.display = "none";
						return;
					}
					popWrap.onmouseout = function (i) {
						return function () {
							if (!this.contains(event.toElement)) {
								top_nav[i].className = "title";
								this.style.display = "none";
							}
						};
					}(i);
				};
			}(i);
		}
	}
}
function showPop(num) {
	document.getElementById("pop" + num).style.display = "block";
}
</script>
</head>
<body>
<div id="top_nav_here_up">
	<ul class="top_nav_a_here_up">
		<li class="allservice1"><a href="#" target="_blank"><span>示例</span></a></li>
	</ul>
</div>
<div id="pop0" class="toppop1">
	<ul>
		<li><a href="http://www.hereonline.com/buy/trade/8.html">化工</a></li>
		<li><a href="http://www.hereonline.com/buy/trade/14.html">机械</a></li>
		<li><a href="http://www.hereonline.com/buy/trade/12.html">交通</a></li>
		<li><a href="http://www.hereonline.com/buy/trade/509.html">通讯</a></li>
	</ul>
</div>
</body>
</html>

  • 大小: 9.5 KB
分享到:
评论

相关推荐

    js 特效 html 特效 分类链接导航

    js 特效 html 特效 分类链接导航 js 特效 html 特效 分类链接导航

    仿京东商品左侧分类导航菜单JS特效代码.zip

    该资源是一个用于创建类似京东商品左侧分类导航菜单的JavaScript特效代码。这个代码库基于jQuery库构建,旨在提供一种大气且用户友好的导航体验。在实际应用中,此导航菜单不仅能够展示不同类别的商品,还支持展开...

    仿天猫商城分类导航JS特效代码

    仿天猫商城分类导航JS特效代码是一种常见的前端技术应用,它主要涉及到HTML、CSS和JavaScript三个核心技术,用于实现网站上交互式的导航菜单。这种特效能够提升用户体验,使用户在浏览商品分类时更加便捷,同时增强...

    仿京东商品左侧分类导航菜单JS特效代码

    "仿京东商品左侧分类导航菜单JS特效代码"就是一个专注于这方面设计的项目,它旨在为用户提供直观且吸引力强的商品浏览体验。这个特效代码是基于jQuery库构建的,jQuery是一款广泛应用于前端开发的JavaScript库,以其...

    Jquery实现超酷的左边商品分类导航菜单特效.zip

    接着,`js`目录下的JavaScript文件(可能命名为如`script.js`或`menu特效.js`)是实现特效的核心。在这个项目中,jQuery会用来监听用户的交互事件,例如鼠标悬停、点击等。通过`$(document).ready()`函数确保在页面...

    JS仿腾云建站左侧分类导航特效.zip

    总的来说,【JS仿腾云建站左侧分类导航特效】是网页开发中的一个实用技巧,它结合了JavaScript动态性、DOM操作和CSS样式,为用户提供了一种高效且美观的导航体验。通过学习并掌握这个特效,开发者可以提升网站的用户...

    shop导航分类 网页特效 很不错的

    在IT行业中,网页特效是提升用户体验和视觉吸引力的重要手段,特别是在电商网站中,导航分类的优化对于用户在网站上的浏览和购物体验至关重要。"Shop导航分类网页特效"这个主题聚焦于如何通过动态效果和交互设计来...

    仿天猫商城分类导航JS特效代码.zip

    实现效果: 仿天猫商城分类导航JS特效代码,左侧弹出式导航菜单,底部banner会伴随分类切换而改变,代码结构 清晰,非常易使用,需要的盆友可以改造成自己的电商网站分类导航特效。

    菜单js特效, 仿flash(横向导航和竖向导航)

    本篇将详细讲解"菜单js特效,仿Flash(横向导航和竖向导航)"这一主题,包括其原理、实现方法以及实际应用。 首先,我们需要理解JavaScript (js) 是一种客户端脚本语言,它在用户浏览器上运行,可以动态地更新页面...

    JS左侧文字导航特效.zip

    在JavaScript的世界里,创建动态和交互性的网页元素是常见的需求,而JS左侧文字导航特效就是一个典型的例子。这种特效能够提升用户在网站上的体验,通过视觉反馈和动态效果引导用户更直观地了解网站结构。本文将深入...

    jQuery旅游网站左侧分类导航菜单特效.zip

    总的来说,"jQuery旅游网站左侧分类导航菜单特效"是一个结合了高效JavaScript库和创新设计思路的实践案例,对于提升旅游网站用户体验有着积极的作用。无论是开发者还是设计师,都可以从中学到如何利用jQuery来创建...

    jQuery旅游网站左侧分类导航菜单特效

    "jQuery旅游网站左侧分类导航菜单特效"就是一个专门针对这一需求的解决方案。它采用蓝色调,符合多数人对旅游网站清新、舒适的视觉期待,同时通过jQuery实现动态效果,提升交互体验。 首先,我们来了解一下jQuery。...

    JS仿淘宝导航菜单 仿当当网JS弹出导航特效,JS导航菜单

    总的来说,"JS仿淘宝导航菜单"是一个涵盖JavaScript基础、jQuery应用以及CSS定位技巧的实战项目。通过学习这个项目,开发者可以提升其前端开发技能,更好地理解和运用这些技术来创建动态、交互性强的网页导航菜单。...

    分类菜单右侧弹出详细分类特效打包

    "分类菜单右侧弹出详细分类特效打包"这一技术主题聚焦于提升用户体验,使得用户在浏览商品分类时能够快速找到所需信息。这种设计模式常见于诸如拍拍、京东等大型电商平台,通过鼠标悬停触发动态效果,展示更多的子...

    jQuery商城网站分类导航和幻灯片轮播特效

    而"statics"文件夹则可能包含了CSS样式文件(如styles.css)用于美化页面布局和元素,以及JavaScript脚本文件(如script.js)来编写jQuery代码,实现动态效果和交互逻辑。 总的来说,"jQuery商城网站分类导航和幻灯...

    移动横着长导航特效仿网易二级导航.zip

    "移动横着长导航特效仿网易二级导航"是一个针对这种设计模式的实现案例,主要用于解决导航栏因内容过多而无法在一个屏幕内完全展示的问题。通过引入滑动机制,用户可以左右滑动来查看和切换不同的导航项,从而提供更...

    jQ+Swiper仿今日头条APP顶部导航分类菜单特效.zip

    标题中的"jQ+Swiper仿今日头条APP顶部导航分类菜单特效.zip"表明这是一个基于jQuery和Swiper库实现的,模仿今日头条应用顶部导航分类菜单的Web前端特效项目。这个项目可能包含了一个动态展示、滑动切换的菜单系统,...

    javascript经典特效---分类链接导航.rar

    【JavaScript经典特效——分类链接导航】是Web开发中常见的需求,尤其在大型网站或应用中,清晰、高效的导航系统能够帮助用户快速定位信息,提升用户体验。在这个案例中,我们主要探讨的是如何使用JavaScript来实现...

Global site tag (gtag.js) - Google Analytics