|
|
楼主 |
发表于 2004-5-30 21:27
|
显示全部楼层
回复：[公告]上传图片的朋友们注意了~~
不能吧。。。我试试。。
不可能只让发50字啊。。这个没那么多限制啊。。
要完成此效果需要两个步骤
第一步：把如下代码加入到<head>区域中
<style>
.menuBorder1 {
position:absolute;
left:-1000; top:-1000;
background-color:#C6C3C6; /* light gray */
border: solid 1px;
border-left-color:#C6C3C6; /* light gray */
border-top-color:#C6C3C6; /* light gray */
border-bottom-color:black;
border-right-color:black;
margin:0 0 0 0;
overflow:none;
visibility:visible;
}
.menuBorder2{
position:absolute; top:0; left:0;
background-color:#C6C3C6; /* light gray */
overflow:none;
margin: 4px 0px 4px 0px;
border: solid 1px;
border-left-color:white;
border-top-color:white;
border-bottom-color:#848284; /* dark grey */
border-right-color:#848284; /* dark grey */
cursor:default;
}
.menuTable {}
.menuRow {
font-size: 9pt;
color:black;
background-color:transparent;
cursor:default;
height:12pt;
}
.menuImageCell {
text-align:left;
cursor:default;
}
.menuCaptionCell {
text-align:left;
cursor:default;
}
.menuArrowCell {
text-align:right;
font-size: 8pt;
cursor:default;
}
#MENUINSERT {
position:absolute;
top:0; left:0;
}
</style>
<script>
var menus = new Array()
function MenuRegister(item)
{
menus[menus.length] = item
return (menus.length - 1)
}
function MenuItem(caption, command, image, submenu, separator) //创建自己的菜单目录的对象
{
this.caption = caption;
this.command = command;
this.image = image;
this.submenu = submenu;
this.separator = (separator) ? true : false;
this.id = MenuRegister(this);
}
function MenuItemOnClick(obj) //响应鼠标oncklick事件
{
var item = menus[obj.menuid]
var menub1 = document.all['MENU' + item.parent + 'B1']
window.event.cancelBubble = true
if (item == null) return
if ((typeof item.command) == 'function') item.command()
if ((typeof item.command) == 'string') window.location = item.command
}
function MenuItemOnMouseOver(obj) //鼠标在菜单上移动时的事件处理
{
var item = menus[obj.menuid]
var parent = menus[item.parent]
var menub1 = document.all['MENU' + item.parent + 'B1']
var fromElement = window.event.fromElement
var toElement = window.event.toElement
window.event.cancelBubble = true
//鼠标在菜单边缘,则什么也不做
if ((fromElement != null) && (toElement != null))
{
if (fromElement.menuid == toElement.menuid) return;
}
obj.style.backgroundColor = '#000084' // 改变背景颜色为蓝色
obj.style.color = 'white' // 改变文字颜色为白色
//处理子菜单状态
//关闭当前打开的子菜单
if ((parent.submenu != null) && (parent.submenu != item.submenu))
{
parent.submenu.hide()
parent.submenu = null
}
// 打开当前菜单目录的子菜单
if ((item.submenu != null) && (parent.submenu != item.submenu))
{
item.submenu.top = menub1.offsetTop + obj.offsetTop;
item.submenu.left = menub1.offsetLeft + obj.offsetWidth;
item.submenu.show()
parent.submenu = item.submenu
return;
}
}
function MenuItemOnMouseOut(obj) //鼠标移出菜单的事件处理
{
var item = menus[obj.menuid]
var parent = menus[item.parent]
var toElement = window.event.toElement
window.event.cancelBubble = true
if ((toElement != null) && (toElement.menuid == parent.id)) {
if ((parent.submenu != null) && (parent.submenu != item))
{
parent.submenu.hide()
parent.submenu = null
}
}
if ((window.event.fromElement != null) && (window.event.toElement != null))
{
if (window.event.fromElement.menuid == window.event.toElement.menuid) return;
}
obj.style.backgroundColor = "transparent"
obj.style.color = 'black'
}
function MenuItemToString()
{
if (this.separator)
return "<tr><td class=menuSep colspan=3><hr></td></tr>\n"
return " <tr class=menuRow \n" +
" onMouseOver='MenuItemOnMouseOver(this)'\n" +
" onMouseOut='MenuItemOnMouseOut(this)'\n" +
" onClick='MenuItemOnClick(this)'\n" +
" menuid=" + this.id +
" >\n" +
" <td class=menuImageCell noWrap=noWrap menuid=" + this.id + ">" +
((this.image != null) ? " <img class=menuImage menuid=" + this.id + "
src='" + this.image + "'> " : " " ) + "</td>\n" +
" <td class=menuCaptionCell noWrap=noWrap menuid=" + this.id + ">" + this.caption +
"</td>\n" +
" <td class=menuArrowCell noWrap=noWrap menuid=" + this.id + " " +
((this.submenu != null) ? "style='font-family:Webdings'>4" :
"style='font-family:times'> ") + "</td>\n" +
" </tr>\n";
}
MenuItem.prototype.toString = MenuItemToString;
function Menu(top, left) //将鼠标的位置作为菜单的左顶点创建菜单
{
this.items = new Array()
this.top = top
this.left = left
this.id = MenuRegister(this)
this.update = true;
MENUINSERT.insertAdjacentHTML('BeforeEnd', this.borders())
}
function MenuAddItem(item) //添加子菜单,子菜单继承其父菜单的的属性
{
this.items[this.items.length] = item
item.parent = this.id
}
function MenuShow(noDisplay) //实现菜单的显示
{
var menub1 = document.all['MENU' + this.id + 'B1']
var menub2 = document.all['MENU' + this.id + 'B2']
if (this.update)
{
menub2.innerHTML = this.getTable()
this.update = false
}
var menu = document.all['MENU' + this.id]
menub1.style.top = this.top
menub1.style.left = this.left
menub2.style.width = menu.offsetWidth + 2
menub2.style.height = menu.offsetHeight + 2
menub1.style.width = menu.offsetWidth + 4
menub1.style.height = menu.offsetHeight + 12
//处理在窗口边缘单击鼠标时,菜单显示的位置
// 菜单超出窗口底边时,上移
if ((menub1.offsetTop + menub1.offsetHeight) > (MenuBodyRef.offsetHeight - 4))
menub1.style.top = MenuBodyRef.offsetHeight - menub1.offsetHeight - 4
// 菜单超出窗口右边时,左移
if ((menub1.offsetLeft + menub1.offsetWidth) > (MenuBodyRef.offsetWidth - 24))
menub1.style.left = MenuBodyRef.offsetWidth - menub1.offsetWidth - 24
// 菜单超出窗口顶边时,下移
if (menub1.offsetTop < 0)
menub1.style.top = 0
// 菜单超出窗口左边时,右移
if (menub1.offsetLeft < 0)
menub1.style.left = 0
if (noDisplay)
{
menub1.style.top = -1000
menub1.style.left = -1000
} else {
menub1.style.visibility = 'visible'
}
}
function MenuHide() //实现菜单的隐藏
{
var menub1 = document.all['MENU' + this.id + 'B1']
if (this.submenu != null) this.submenu.hide()
menub1.style.visibility = 'hidden'
menub1.style.top = -1000
menub1.style.left = -1000
}
function MenuBorders() //响应鼠标的onclick事件
{
return "<div id=MENU" + this.id +"B1 class=menuBorder1 menuid=" + this.id + "
onClick='window.event.cancelBubble = true'>\n" +
" <div id=MENU" + this.id +"B2 class=menuBorder2 menuid=" + this.id + ">\n" +
" </div>\n" +
"</div>\n";
}
function MenuTable() //创建用于装菜单内容的表格,便于菜单界面的排版
{
var str
str = "<table id=MENU" + this.id + "\n" +
" cellpadding=0 cellspacing=0 border=0 class=menuTable>\n"
for (var i=0; i < this.items.length; i++)
str += this.items;
str += "</table>\n"
return str
}
Menu.prototype.addItem = MenuAddItem;
Menu.prototype.borders = MenuBorders;
Menu.prototype.getTable = MenuTable;
Menu.prototype.show = MenuShow;
Menu.prototype.hide = MenuHide;
var MenuBodyRef;
function MenuInit() //创建菜单所在的层,达到显示和隐藏的效果
{
for(var i in document.all){
if (document.all.tagName == 'BODY')
{
MenuBodyRef = document.all
MenuBodyRef.insertAdjacentHTML('AfterBegin', '<div id=MENUINSERT></div>')
break
}
}
}
var mainMenu = null;
function DocOnLoad() //在此添加菜单内容.
{
var submenu
MenuInit();
mainMenu = new Menu(100, 20);
submenu = new Menu(0,0)
submenu.addItem(new MenuItem('流行歌曲', '#'))
submenu.addItem(new MenuItem('民族风采', '#'))
submenu.addItem(new MenuItem('乐曲欣赏', '#'))
submenu.addItem(new MenuItem('交响乐', '#'))
submenu.show(true)
mainMenu.addItem(new MenuItem('音乐空间', null, null, submenu, null))
submenu = new Menu(0,0)
submenu.addItem(new MenuItem('杂家杂文', '#'))
submenu.addItem(new MenuItem('宏篇巨著', '#'))
submenu.addItem(new MenuItem('诗词歌赋', '#'))
submenu.show(true)
mainMenu.addItem(new MenuItem('文学殿堂', null, null, submenu, null))
mainMenu.addItem(new MenuItem('软件下载', '#'))
mainMenu.addItem(new MenuItem('在线游戏', '#'))
submenu = new Menu(0,0)
submenu.addItem(new MenuItem('网上定购', '#'))
submenu.addItem(new MenuItem('家居房产', '#'))
submenu.addItem(new MenuItem('股票交易', '#'))
submenu.show(true)
mainMenu.addItem(new MenuItem('社区服务', '#', null, submenu))
mainMenu.addItem(new MenuItem('聊天室', '#'))
mainMenu.addItem(new MenuItem('收藏', 'h#'))
mainMenu.addItem(new MenuItem(null, null, null, null, true))
mainMenu.addItem(new MenuItem('收索', '#', 'find.gif'))
mainMenu.addItem(new MenuItem('离开', new Function('DocOnClick()'), 'x.gif'))
mainMenu.show(true)
}
var flag = false
function DocOnClick() //菜单隐藏和显现
{
if (flag) {
mainMenu.hide()
} else {
mainMenu.left = window.event.x
mainMenu.top = window.event.y
mainMenu.show()
}
flag = ! flag
}
</script>
第二步：把“onLoad="DocOnLoad()" onClick="DocOnClick()"”加在<body>标记里
例如：<body onLoad="DocOnLoad()" onClick="DocOnClick()"> |
|
IP卡
狗仔卡
发表于 2004-5-29 12:17
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
发表于 2004-5-29 13:17
发表于 2004-7-3 00:53
