Javascript实现了内容转换对鼠标的下方和下侧的效果。
本文介绍了Javascript在鼠标放置在下下页后对内容转换的效果,供大家参考:这是互联网上常见的菜单效果。鼠标放置后,相应的内容将被切换,以及图形和文本的布局,在技术方面,它是JS和CSS的结合。代码的js部分可以单独保存为js文件,然后导入到页面中,从而使主页代码简洁。
运行效果如下图所示:
具体代码如下:
鼠标放置后鼠标底部的内容开关。
*边距:0;填充:0;}
答:链接,A:访问{文本装饰:无;}
答:悬停{文字装饰:无;}
列表样式:无;}
。menua {背景:# 333;浮动:左;填料顶部:2px;宽度:100%;}
。menua李{浮动:左;}
。menuA Li {显示:块;浮动:左;颜色:# FFF;身高:25px;线高度:25px;填充:0 5px;margin-left: 2px;}。
。menua.check一{背景:# FFF;颜色:# 000;}
。menub {明确:两;边界:2px固体# 000;边境上:无;背景:# FFF;}
。menub UL {显示:无;padding: 15px;线高度:180%;}
国际时事
壁纸
大国关系
欧美海关
国际时事
壁纸
大国关系
欧美海关
功能_class美元(name){
var elements = document.getelementsbytagname(*);
为(S = 0;S<elements.length;+ +){
如果(元素{ } = =名字。className){
返回元素{ };
}
}
}
VaR表示标签列表= $(_class menua ),GetElementsByTagName(李)
tabcon = $(_class menub)。GetElementsByTagName(UL);
为(i = 0;i < tablist.length;i++){
(函数(){())
var t = i;
表示标签列表{T}。onmouseover =函数(){
为(O = 0;o<tabcon.length;O + +){
tabcon {哦}。style.display =没有;
表示标签列表{ O }。类名= ;
如果(T = o){
this.classname =检查;
tabcon {哦}。style.display =块;
}
}
}
})
}
希望本文能对大家的javascript程序设计有所帮助。