当前位置: 主页->网页特效专栏->代码生成特效->一个QQ菜单编辑器!
栏目导航
网页特效
  典型特效 状态栏
  游戏类 页面背景
  页面特效 页面导航
  文本操作 文本特效
  图形特效 鼠标特效
  时间日期 密码类
  浏览相关 警告对话
  技巧类 计数转换
  测试搜索 代码生成
  播放音乐 按钮特效
  系统相关 链接特效
  黑客性质 相关特效
  窗口特效 其它特效
最新更新
 
 
 
 
 
 
 
 
 
 
热点文章
 
 
 
 
 
 
 
 
 
 

一个QQ菜单编辑器!

夜鹰电脑教学网 加入日期:2005-11-11 22:46:00 点击数:

查看:[大字体 中字体 小字体]

说明: 一个QQ菜单编辑器!

效果: 点这里在新窗口中看效果!

代码:


<html>
<head>
<title>QQ菜单编辑器!</title>
<META NAME ="keywords" CONTENT="CreateCode,QQ菜单">
<META NAME="description" CONTENT="代码生成">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
//生成代码
function createCode()
{
totalheight = parseInt(fcreate.bodyheight.value) + fcreate.headheight.value * (fcreate.itemcount.value - 1);
textCode.value = text1.value +
"var headHeight = " + fcreate.headheight.value + ";" +
"var bodyHeight = " + fcreate.bodyheight.value + ";" +
"var objcount = " + fcreate.itemcount.value + ";" +
"var step = " + fcreate.mspeed.value + ";" +
text2.value +
".headtd1 { background: #" + fcreate.headcolorn.value + "; border: 2px outset; border-color: #" + fcreate.lbordern.value + " #" + fcreate.dbordern.value + " #" + fcreate.dbordern.value + " #" + fcreate.lbordern.value + "; cursor: hand; font-size: 9pt}" +
".headtd2 { background: #" + fcreate.headcolora.value + "; border: 2px outset; border-color: #" + fcreate.lbordera.value + " #" + fcreate.dbordera.value + " #" + fcreate.dbordera.value + " #" + fcreate.lbordera.value + "; cursor: hand; font-size: 9pt}" +
".bodytd { background: #" + fcreate.bodycolor.value + "; border: 2px outset; border-color: #" + fcreate.lborderb.value + " #" + fcreate.dborderb.value + " #" + fcreate.dborderb.value + " #" + fcreate.lborderb.value + "; font-size: 9pt}" +
text3.value +
"<div id='mainboard' style='position:absolute; left:2px; top:2px; width:120px; height:" + totalheight + "px; z-index:1; overflow: hidden; background: #" + fcreate.bodycolor.value + ";'> ";

itemtop = 0;
for (i = 1; i <= parseInt(fcreate.itemcount.value); i++)
{
textCode.value += "<div id='item" + i + "body' style='position:absolute; left:0; top:" + itemtop + "; width:120px; height:" + fcreate.bodyheight.value + "px; z-index:" + (i+1) +"; overflow: hidden'>" +
"<table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'>" +
"<tr>" +
"<td id='item" + i + "head' height='" + (fcreate.headheight.value-2) + "' class=";
if (i == 1)
textCode.value += "'headtd2'";
else textCode.value += "'headtd1'";
textCode.value += " onclick='showme(item" + i + "body,this)' align='center'>";
//textCode.value += getValue("fcreate.item" + i);
textCode.value +=document.all["item"+i].value+"</td>"+
"</tr>" +
"<tr>" +
"<td class='bodytd' align='center'>" +
"test" +
"</td>" +
"</tr>" +
"</table>" +
"</div>";
if (i == 1)
itemtop += parseInt(fcreate.bodyheight.value);
else itemtop += parseInt(fcreate.headheight.value);
}
textCode.value += "</div></body></html>"
}
//获取对象的值
function getValue(obj)
{
//obj = Object(obj);
return obj.value;
}
//清空代码
function clearCode()
{
textCode.value = "";
}
//预览代码
function prevCode()
{
createCode();
open().document.write(textCode.value);
}
//选择代码
function selectCode()
{
textCode.select();
}
//根据输入的数字,自动生成子菜单的填写项
function checkItems()
{
if ((fcreate.itemcount.value.length > 0 && isNaN(fcreate.itemcount.value)) || fcreate.itemcount.value.length == 0)
{
alert("请输入数字!");
fcreate.itemcount.focus();
}
else
{
if (fcreate.itemcount.value > 50)
{
alert("太夸张了吧,小一点呀,不用这么玩命吧!(50以下,含50)")
fcreate.itemcount.focus();
return;
}
if (fcreate.itemcount.value < 1)
{
alert("太夸张了吧,一个不要你要做什么!(1以上,含1)")
fcreate.itemcount.focus();
return;
}
itemtext = "<table width='700' border='0' align='center' cellpadding='1' cellspacing='1'>";
for (i = 1; i <= fcreate.itemcount.value; i++)
{

itemtext += "<tr>"+
"<td class='td2' width='76'>菜单项目"+i+"</td>" +
"<td colspan='2' class='td2'>" +
" <input type='text' name='item" + i + "' class='back2' style='width:200' value='菜单" + i + "'>" +
"</td>" +
"<td class='td2' width='173'>菜 单 项 目 内 容 网 页</td>" +
"<td colspan='2' class='td2'>" +
" <input type='file' name='itemsrc" + i + "' class='back2' style='width:200'>" +
"</td>" +
"</tr>";
}
itemtext+="</table>"
document.all.itemmenu.innerHTML = itemtext;
}
}
//检查是否是一个合法的颜色数值
function changebkclr(obj)
{
hexv = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
flag = false;
if (obj.value.length != 6)
{
alert("请用正确填写!(六位数)");
obj.focus();
}
else
{
for (i = 0; i < 6; i++)
{
for (j = 0; j <16; j++)
if (obj.value.charAt(i).toLowerCase() == hexv[j])
flag = true;
if (!flag)
{
alert("请用十六进制填写。(0-9,a-f)");
obj.focus();
return;
}
flag = false;
}
obj.style.background=obj.value;
}
}
//检查是否是一个合法的数字
function checknum(obj)
{
if (isNaN(obj.value))
{
alert("请输入数字!");
obj.focus();
return;
}
}
//检查改变数值的速度合法性
function changespd(obj)
{
fcreate.mspeed.value = 1;
}
//检查是否是一个合法的速度
function checkspeed(obj)
{
if (isNaN(obj.value))
{
alert("请输入数字!");
obj.focus();
}
else
{
if ((obj.form.bodyheight.value - obj.form.headheight.value)%obj.value != 0)
{
alert("请确认可以被 “菜单体高度 - 菜单题头高度” 整除");
obj.focus();
}
}
}
//控制总题目的填写
function ctrltitle(obj)
{
if (obj.value == "有")
obj.form.titlename.disabled = false;
else
obj.form.titlename.disabled = true;
}
</script>
<style type="text/css">
<!--
.td1{ font-size: 9pt; background: #66CCFF}
.td2{ font-size: 9pt; background: #66aaFF}
.back1 { font-size: 9pt; width:100}
.back2 { font-size: 9pt; background: #BECFEE}
-->
</style>
</head>


<body bgcolor='#FFFFFF' text='#000000'>
<div align="center">
<textarea name="textCode" rows="28" style="width:700" class="back2" readonly></textarea>
<br>
<input type="button" name="btnCreate" value="<- 生成代码 (ALT+M)" class="back2" style="width:150" onclick="createCode()" accessKey="m">
<input type="button" name="btnClear" value="#= 清空代码 (ALT+C)" class="back2" style="width:150" onclick="clearCode()" accessKey="c">
<input type="button" name="btnPrev" value="O- 预览效果 (ALT+P)" class="back2" style="width:150" onclick="prevCode()" accessKey="p">
<input type="button" name="btnSelect" value="@@ 全选代码 (ALT+A)" class="back2" style="width:150" onclick="selectCode()" accessKey="a">
</div>
<form name="fcreate" method="post" action="">
<table width="700" border="0" align="center" cellpadding="2" cellspacing="1">
<tr>
<td class="td1" width="13%" height="13">菜单项目个数</td>
<td class="td1" width="12%" height="13">
<input type="text" name="itemcount" style="width:40" class="back2" onblur="checkItems()" value="2">
</td>
<td class="td1" width="13%" height="13">菜单题头高度</td>
<td class="td1" width="12%" height="13">
<input type="text" name="headheight" class="back2" value="22" style="width:50" onblur="checknum(this)" onchange="checkspeed(fcreate.mspeed)">
</td>
<td class="td1" width="13%" height="13">菜单体高度</td>
<td class="td1" width="12%" height="13">
<input type="text" name="bodyheight" class="back2" value="202" style="width:50" onblur="checknum(this)" onchange="checkspeed(fcreate.mspeed)">
</td>
<td class="td1" width="13%" height="13">填写移动速度</td>
<td class="td1" width="12%" height="13">
<input type="text" name="mspeed" class="back2" value="10" style="width:50" onblur="checkspeed(this)">
</td>
</tr>
<tr>
<td class="td1" colspan="8" height="55">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" dwcopytype="CopyTableRow">
<tr>
<td class="td1" width="20%">一 般 题 头 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="headcolorn" class="back1" style="background:#00A4E1" value="00A4E1" onblur="changebkclr(this)" maxlength="6">
</td>
<td class="td1" width="16%">亮 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="lbordern" class="back1" style="background:#00BBFF" value="00BBFF" onblur="changebkclr(this)" maxlength="6">
</td>
<td class="td1" width="16%">暗 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="dbordern" class="back1" style="background:#0077FF" value="0077FF" onblur="changebkclr(this)" maxlength="6">
</td>
</tr>
<tr>
<td class="td1" width="20%">当 前 题 头 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="headcolora" class="back1" style="background:#20C1FF" value="20C1FF" onblur="changebkclr(this)" maxlength="6">
</td>
<td width="16%" class="td1">亮 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="lbordera" class="back1" style="background:#60D3FF" value="60D3FF" onblur="changebkclr(this)" maxlength="6">
</td>
<td class="td1" width="16%">暗 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="dbordera" class="back1" style="background:#0077FF" value="0077FF" onblur="changebkclr(this)" maxlength="6">
</td>
</tr>
<tr>
<td class="td1" width="20%">菜 单 主 体 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="bodycolor" class="back1" style="background:#99CCFF" value="99CCFF" onblur="changebkclr(this)" maxlength="6">
</td>
<td width="16%" class="td1">亮 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="lborderb" class="back1" style="background:#B0D8FF" value="B0D8FF" onblur="changebkclr(this)" maxlength="6">
</td>
<td class="td1" width="16%">暗 边 颜 色</td>
<td class="td1" width="16%">
<input type="text" name="dborderb" class="back1" style="background:#0077FF" value="0077FF" onblur="changebkclr(this)">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="td1" width="80">菜单 总题目</td>
<td class="td1" width="85">
<select name="title" style="width:40" class="back2" onchange="ctrltitle(this)">
<option value="有">有</option>
<option value="无" selected>无</option>
</select>
</td>
<td width="95" class="td1">题目名称</td>
<td colspan="5" class="td1">
<input type="text" name="titlename" class="back2" value="填写总题目" disabled>
</td>
</tr>
</table>
<div id="itemmenu">
<table width='700' border='0' align='center' cellpadding='1' cellspacing='1'>
<tr>
<td class='td2' width='76'>菜单项目1</td>
<td colspan='2' class='td2'>
<input type='text' name='item1' class='back2' style='width:200' value="菜单1">
</td>
<td class='td2' width='173'>菜 单 项 目 内 容 网 页</td><td colspan='2' class='td2'>
<input type='file' name='itemsrc1' class='back2' style='width:200'>
</td>
</tr>
<tr>
<td class='td2' width='76'>菜单项目2</td>
<td colspan='2' class='td2'>
<input type='text' name='item2' class='back2' style='width:200' value="菜单2">
</td>
<td class='td2' width='173'>菜 单 项 目 内 容 网 页</td><td colspan='2' class='td2'>
<input type='file' name='itemsrc2' class='back2' style='width:200'>
</td>
</tr>
</table>
</div>
</form>
<div style="display:none">
<textarea name="text1" rows="5" style="width:700" class="back1" readonly>
<html>
<head>
<title>QQ菜单</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<script language='JavaScript'>
</textarea>
<textarea name="text2" rows="5" style="width:700" class="back1" readonly>
var moving = false;
function showme(obj1, obj2)
{
if (moving)
return;
moving = true;
for(i=0;i<document.all.tags('td').length;i++)
if (document.all.tags('td')[i].className.indexOf('headtd') == 0)
document.all.tags('td')[i].className = 'headtd1';
obj2.className = 'headtd2';
moveme(obj1);
}
function moveme(obj)
{
idnumber = parseInt(obj.id.substr(4));
objtop = headHeight * (idnumber - 1);
objbuttom = bodyHeight + headHeight * (idnumber - 2);
currenttop = parseInt(obj.style.top);
if (currenttop >= objbuttom)
{
countid = 1;
for(i=0;i<document.all.tags('div').length;i++)
if (document.all.tags('div')[i].id == 'item'+countid+'body')
{
obj = document.all.tags('div')[i];
objtop = headHeight * (countid - 1);
if (countid == idnumber)
{
moveup(obj,objtop,false);
break;
}
else
moveup(obj,objtop,true);
countid++;
}
}
else if ((currenttop <= objtop) && (idnumber < objcount))
{
idnumber++;
countid = objcount;
for(i=document.all.tags('div').length-1;i>=0;i--)
if (document.all.tags('div')[i].id == 'item'+countid+'body')
{
obj = document.all.tags('div')[i];
objbuttom = bodyHeight + headHeight * (countid - 2);
if (countid == idnumber)
{
movedown(obj,objbuttom,false);
break;
}
else
movedown(obj,objbuttom,true);
countid--;
}
}
}
function moveup(obj,objtop,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop > objtop)
{
obj.style.top = currenttop - step;
setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)
return;
}
moving = ismove;
}
function movedown(obj,objbuttom,ismove)
{
currenttop = parseInt(obj.style.top);
if (currenttop < objbuttom)
{
obj.style.top = currenttop + step;
setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)
return;
}
moving = ismove;
}
</script>
</script>
<style type='text/css'>
</textarea>
<textarea name="text3" rows="5" style="width:700" class="back1" readonly>

</style>
</head>
<body bgcolor='#FFFFFF' text='#000000'>
</textarea>
</div>
</body>
</html>

作者:佚名 来源: 网上转帖  

   

上篇:   下篇:MP3播放列表文件生成器


[夜鹰论坛] [我要留言] [关闭窗口] [ ][TOP]

此文章最新评论(不超过十条)
■评论此文章 ( 有问题请去夜鹰论坛发帖 )
共有评论: 查看全部评论 姓名:
【 声明 】 您所发表的言论将被众多网友阅读,因此,您所发表的言论应不违反中国法律,不违背一般的道德原则,否则,您必须对您的不当言论引发的一切不良后果负责;此外,我们的管理员有权删除您发表的不当言论,谢谢合作!