<!-- 引入jQuery -->
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
$(function() {
var subshowtime = ""; //变量，“2秒后自动隐藏”的对象赋值给这个变量
var urlparamsub = ""; //接收从上一链接的页面传递过来的参数1 子菜单(span)
var urlparammain = "" //接收从上一链接的页面传递过来的参数2 主菜单(图片)id
var $imghoverobj = ""; //记录鼠标悬停的图片对象
var $subspanhoverobj = ""; //记录鼠标悬停在某个子菜单（span）的对象
var $subspanchkedobj = ""; //记录点击的子菜单的span对象
// 页面跳转后接收传递的参数，并初始化一些参数：选中的子菜单和主菜单
//根据url传来的参数，对主菜单和子菜单的处理
// 功能：1，将点击的主菜单样式变成点击后的样式。2，点击的主菜单对应的子菜单(div)显示。
// 3，显示的子菜单里的点击的子菜单（span）的显示
function getUrlParameter() {
var strHref = "";
//接收当前URL的信息,注意 这里加 parent,获得 整个框架的url
strHref = parent.document.location.toString();
var intPos = strHref.indexOf("?"); //取得"?"的位置
var urlparam = strHref.substr(intPos + 1); //获取到右边的参数部分"f=..&page=..."
intPos = urlparam.indexOf("&");
urlparamsub = urlparam.substr(2, intPos - 2); //子菜单(span)id :spanimgsolutions2
urlparammain = urlparam.substr(intPos + 6); //主菜单的名字，其中前面的img被省略了
if (urlparamsub == "") { //页面第一次打开的时候，参数设定
urlparamsub = "spanimghome";
urlparammain = "home";
}
urlparammain = "img" + urlparammain + "id"; //主菜单(图片)的id
$subspanchkedobj = $("#" + urlparamsub); //记录点击的子菜单的span对象
imgClickStyle($("#" + urlparammain)); // 1
imgMatchSubShow($("#" + urlparammain)); //2 和 3
}
getUrlParameter(); //页面加载的时候直接运行
//===================================================================================================================\\
//|| 鼠标点击某个子菜单(span)的事件,传递的参数：1，f:点击的子菜单(span)的id . 2，主菜单的名字，其中前面的img被省略了||
//===================================================================================================================\\
$("#subMenu span").click(function() {
SubSpanclickedStyle($(this)); //子菜单（即span）点击后的样式
var f = ""; //子菜单的名字
var varpage = ""; //主菜单的名字
var varhref = $(this).parent().attr("href");
var varhrefspanid = $(this).attr("id"); //这里是span的id e.g : spanimgsolutions2
f = $(this).text(); //暂时没用 span 里的 text
varpage = $(this).parent().parent().attr("id").substr(3); //solutions
window.open(varhref + "?f=" + varhrefspanid + "&page=" + varpage, "_parent");
})
//鼠标悬停在主某一菜单上（一个图片上）
$("#imgDiv :not(.imgblank)").hover(function() {
allHide(); //先将所有的子菜单隐藏
if (subshowtime != "")
clearTimeout(subshowtime); //停止2秒后自动隐藏
if ($imghoverobj != "") { //上次鼠标悬停的菜单，恢复原来的图片
imgOriginalStyle($imghoverobj); //上次悬停的菜单恢复原来的src
}
imgHoverStyle($(this)); //悬停时候图片的新src属性
if ($("#" + urlparammain).attr("id") == $(this).attr("id")) {
imgClickStyle($(this)); //保持点击后的样式
}
//this 对应的子菜单显示，及被选中的子菜单的样式的改变
imgMatchSubShow($(this));
$imghoverobj = $(this); //鼠标悬停的图片对象
}, function() { // 鼠标移开后（与上面的是联合事件）
var varthisobj = $(this).attr("class"); //从主菜单的属性class 获得子菜单的id(认为设定主菜单class属性值==对应该子菜单的id)
var thisobj = document.getElementById(varthisobj); //获得子菜单的对象（子菜单的div）
var $hiddiv = $(thisobj); //DOM 对象 转化成 Jquery 对象, $hiddiv 为 点击的主菜单对应的子菜单（div）对象
subshowtime = setTimeout(function() { subDivHidAnChkedShow($hiddiv) }, 2000); //2秒后自动隐藏及点击的菜单显示
});
$("#imgDiv :not(.imgblank)").click(function() { //点击主菜单事件
//主菜单点击后的样式
imgClickStyle($(this));
//imgcontactid --- spanimgcontact
var varid = $(this).attr("id");
var indexvar = varid.lastIndexOf("id");
var temp = varid.slice(0, indexvar); //取出字符串的中间部分 “contact”
var subid = "span" + temp; //取得子菜单的id
$("#" + subid).triggerHandler("click");
})
//-----------------------下面是对子菜单的处理--------------◆------------------\\
$("#subMenu div").hover(function() { //鼠标悬停在子菜单（div层）的事件
if (subshowtime != "")
clearTimeout(subshowtime);
$(this).show();
}, function() { //鼠标离开子菜单（div层）的事件
var $hiddiv = $subspanhoverobj.parent().parent();
subshowtime = setTimeout(function() { subDivHidAnChkedShow($hiddiv) }, 2000); //2秒后自动隐藏及点击的菜单显示
});
$("#subMenu span").hover(function() { //鼠标悬停在某个子菜单的事件
if ($subspanchkedobj.attr('id') == $(this).attr('id')) { //如果this 是有点击过的子菜单
SubSpanclickedStyle($(this));
}
else {
subSpanHoverStyle($(this)); //鼠标悬停的span的样式
$subspanhoverobj = $(this); //记录鼠标悬停的span的对象
}
}, function() { //鼠标离开某个子菜单的事件
if ($subspanchkedobj.attr('id') == $(this).attr('id')) { //如果this 是有点击过的子菜单
SubSpanclickedStyle($(this));
} else {
subSpanOriginalStyle($(this)); //恢复span 最原始的样式
}
});
//=====================================================================\\
//|| 某一子菜单（div）2秒后自动隐藏,被点中的主菜单对应的子菜单显示 ||
//======================================================================\\
function subDivHidAnChkedShow($subdiv) {
$subdiv.hide(); //子菜单隐藏
if ($subspanchkedobj != "") //如果有子菜单（span）被选中，则该子菜单对应的父级的父级的菜单（div）显示
$subspanchkedobj.parent().parent().show();
}
//=========================================\\
//|| 某一主菜单（即图片）最原始的样式 ||
//=========================================\\
function imgOriginalStyle($imgObj) {
var Num1 = $imgObj.attr("src").indexOf("_"); // “_”的位置，（js 下标从0开始）
var NewStrUrl1 = $imgObj.attr("src").substring(0, Num1 + 1); //截取 “_”之前的字符串
var NewSrc1 = NewStrUrl1 + "up.gif"; //原来的图片
$imgObj.attr("src", NewSrc1); // 菜单恢复原来的src
}
//==========================================\\
//|| 某一主菜单（即图片）鼠标悬停时的样式 ||
//==========================================\\
function imgHoverStyle($imgObj) {
var Num = $imgObj.attr("src").indexOf("_"); // “_”的位置，（js 下标从0开始）
var NewStrUrl = $imgObj.attr("src").substring(0, Num + 1); //截取 “_”之前的字符串
var NewSrc = NewStrUrl + "over.gif"; //记下this的src
$imgObj.attr("src", NewSrc); //悬停时候图片的新src属性
$imgObj.css("cursor", "pointer"); //鼠标变成手型
}
//======================================\\
//|| 某一主菜单（即图片）点击后的样式 ||
//======================================\\
function imgClickStyle($imgObj) {
var ckNum = $imgObj.attr("src").indexOf("_"); // “_”的位置，（js 下标从0开始）
var ckNewStrUrl = $imgObj.attr("src").substring(0, ckNum + 1); //截取 “_”之前的字符串
var ckNewSrc = ckNewStrUrl + "there.gif"; //点击后的图片src
$imgObj.attr("src", ckNewSrc); //点击图片的新src属性
$imgObj.css("cursor", "auto"); //鼠标变成手型
}
//========================================\\
//||点击主菜单，对应的子菜单（div）的显示||
//========================================\\
function imgMatchSubShow($imgobj) {
var varthisobj = $imgobj.attr("class"); //从主菜单的属性class 获得子菜单的id(认为设定主菜单class属性值==对应该子菜单的id)
var thisobj = document.getElementById(varthisobj); //获得子菜单的对象（子菜单的div）
$thisobj = $(thisobj); //DOM 对象 转化成 Jquery 对象
$thisobj.show(); //子菜单显示
//如果“子子菜单（span）”对应的父级主菜单是显示的子菜单(div)
if ($subspanchkedobj.parent().parent().attr("id") == $thisobj.attr("id"))
SubSpanclickedStyle($subspanchkedobj); //点击的子菜单的span对象显示
}
//========================================\\
//|| 某一子菜单（即span）点击后的样式 ||
//========================================\\
function SubSpanclickedStyle($subspanobj) {
if ($subspanobj.text().length != 0) { //筛选，因为页面上有2个主菜单对应的子菜单内容知识个空格
$subspanobj.css("background-color", "#112277");
$subspanobj.css("color", "#ffffff");
}
}
//==========================================\\
//|| 某一子菜单（即span）鼠标悬停的样式 ||
//==========================================\\
function subSpanHoverStyle($subspanobj) {
if ($subspanobj.text().length != 0) { //筛选，因为页面上有2个主菜单对应的子菜单内容知识个空格
$subspanobj.css("background-color", "#7788bb"); //背景颜色变换
$subspanobj.css("color", "#ffffff"); //字体颜色发生变化
}
}
//==========================================\\
//|| 某一子菜单（即span）最原始的样式 ||
//==========================================\\
function subSpanOriginalStyle($subSpanObj) {
$subSpanObj.css("background-color", "#bbccee");
$subSpanObj.css("color", "#666666");
}
}) // “$(function() { ” 的结果标签
function allHide() { //全部的子菜单隐藏，除了点击后的主菜单对应的子菜单
$("#subMenu div").hide();
}
</script>
作者：沐雪
文章均系作者原创或翻译，如有错误不妥之处，欢迎各位批评指正。本文版权归作者，如需转载恳请注明。
如果您觉得阅读这篇博客让你有所收获
为之网-热爱软件编程 http://www.weizhi.cc/
