基础代码
|
>>>> 基础代码 |
include的写法
<style>
@import url("/css/global.css");
</style>
网页游戏类代码
|
>>>> 模拟跳舞的代码 |
<html>
<head>
<style type="text/css">
<!--
body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none }
A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<BODY OnLoad="tick()">
<center>
<center>
<table border=1 borderlight=green width="252" cellspacing="5" bordercolorlight="#000000" bordercolordark="#C0C0C0">
<tr><td align=center width="234" bgcolor="#EFEFEF"><font face="宋体" size="3">模拟跳舞游戏好好看看吧!</td></tr><tr><td align=center width="234" bgcolor="#EFEFEF">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("mac") != -1)
var a="\r";
else
var a="\n";
var max=0;
function tlist() {
max=tlist.arguments.length;
for (i=0; i<max; i++)
this[i]=tlist.arguments[i];
}
tl = new tlist(
" o"+a+
" /|\\"+a+
" */ \\* 跳舞"+a,
" o_"+a+
" \<| *"+a+
" *\>\\ 跳舞"+a,
" _o/*"+a+
" * |"+a+
" / \\ 跳舞"+a,
" *\o_"+a+
" / *"+a+
" \<\\ 跳舞"+a,
" _o/*"+a+
" * |"+a+
" / \\ 跳舞"+a,
" *\\c/*"+a+
" )"+a+
" / \> 跳舞"+a,
" *"+a+
" \\__/c"+a+
" \> \\* 跳舞"+a,
" __/"+a+
" (o_*"+a+
" \\* 跳舞"+a,
" \\ /"+a+
" |"+a+
" */o\\* 跳舞"+a,
" \\_"+a+
" ("+a+
" */o\\* 跳舞"+a,
" \<_"+a+
" __("+a+
" * o|* 跳舞"+a,
" /_"+a+
" __("+a+
" * o|* 跳舞"+a,
" ___"+a+
" *\/ \>"+a+
" o|* 跳舞"+a,
" *"+a+
" o|_/"+a+
" */ \\ 跳舞"+a,
" *"+a+
" _o|_"+a+
" * \>\\ 跳舞"+a,
" _o/*"+a+
" * |"+a+
" / \\ 跳舞"+a,
" *\\o/*"+a+
" |"+a+
" / \\ 跳舞"+a,
" c/*"+a+
" \<\\"+a+
" */\\ 跳舞"+a,
" c__"+a+
" \<\ *"+a+
" */\\ 跳舞"+a,
" c__"+a+
" /\ *"+a+
" * /\> 跳舞"+a,
" c/*"+a+
" /(__"+a+
" * / 跳舞"+a,
" __o/*"+a+
" * (__"+a+
" \< 跳舞"+a,
" __o_"+a+
" * / *"+a+
" \<\\ 跳舞"+a,
" *_o_"+a+
" | *"+a+
" \< \\ 跳舞"+a,
" *_c_*"+a+
" |"+a+
" \>\\ 跳舞"+a,
" *_c_*"+a+
" |__"+a+
" \> 跳舞"+a,
" *_c_*"+a+
" __|__"+a+
" 跳舞"+a,
" "+a+
" *_c_*"+a+
" __)__ 跳舞"+a,
" "+a+
" *\\c/*"+a+
" __)__ 跳舞"+a
);
var x=0;
function tick() {
document.animation.cheerleader.value = " " + a +
tl[x];
x++;
if (x != max)
setTimeout("tick()", 200);
else
x = 0;
}
// End -->
</script>
<form name=animation>
<textarea name=cheerleader rows=6 cols=25 style="border: 1 solid #000000">
|
>>>> 试试你的运气获大奖 |
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
xloc = new Array(10);
yloc = new Array(10);
xloc[0] = "xa"
xloc[1] = "xb"
xloc[2] = "xc"
xloc[3] = "xd"
xloc[4] = "xe"
xloc[5] = "xf"
xloc[6] = "xg"
xloc[7] = "xh"
xloc[8] = "xi"
xloc[9] = "xj"
yloc[0] = "ya"
yloc[1] = "yb"
yloc[2] = "yc"
yloc[3] = "yd"
yloc[4] = "ye"
yloc[5] = "yf"
yloc[6] = "yg"
yloc[7] = "yh"
yloc[8] = "yi"
yloc[9] = "yj"
today=new Date();
jran=today.getTime();
var number=10;
var random_numx=0;
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;
random_numx=Math.ceil( (jran/(im*1.0)) *number);
today=new Date();
jran=today.getTime();
var number=10;
var random_numy=0;
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;
random_numy=Math.ceil( (jran/(im*1.0)) *number);
spyloc = xloc[random_numx-1] + yloc[random_numy-1]
function search(loc) {
if (loc==spyloc) {
alert("\n\n恭喜，你终于找到了!!!");
}
else {
alert("对不起，不在这儿.")
}
}
// End -->
</script>
<FORM method="POST" name="searchb">
<input type=checkbox onClick="javascript:search('xaya');">
<input type=checkbox onClick="javascript:search('xbya');">
<input type=checkbox onClick="javascript:search('xcya');">
<input type=checkbox onClick="javascript:search('xdya');">
<input type=checkbox onClick="javascript:search('xeya');">
<input type=checkbox onClick="javascript:search('xfya');">
<input type=checkbox onClick="javascript:search('xgya');">
<input type=checkbox onClick="javascript:search('xhya');">
<input type=checkbox onClick="javascript:search('xiya');">
<input type=checkbox onClick="javascript:search('xjya');">
<input type=checkbox onClick="javascript:search('xayb');">
<input type=checkbox onClick="javascript:search('xbyb');">
<input type=checkbox onClick="javascript:search('xcyb');">
<input type=checkbox onClick="javascript:search('xdyb');">
<input type=checkbox onClick="javascript:search('xeyb');">
<input type=checkbox onClick="javascript:search('xfyb');">
<input type=checkbox onClick="javascript:search('xgyb');">
<input type=checkbox onClick="javascript:search('xhyb');">
<input type=checkbox onClick="javascript:search('xiyb');">
<input type=checkbox onClick="javascript:search('xjyb');">
<input type=checkbox onClick="javascript:search('xayc');">
<input type=checkbox onClick="javascript:search('xbyc');">
<input type=checkbox onClick="javascript:search('xcyc');">
<input type=checkbox onClick="javascript:search('xdyc');">
<input type=checkbox onClick="javascript:search('xeyc');">
<input type=checkbox onClick="javascript:search('xfyc');">
<input type=checkbox onClick="javascript:search('xgyc');">
<input type=checkbox onClick="javascript:search('xhyc');">
<input type=checkbox onClick="javascript:search('xiyc');">
<input type=checkbox onClick="javascript:search('xjyc');">
<input type=checkbox onClick="javascript:search('xayd');">
<input type=checkbox onClick="javascript:search('xbyd');">
<input type=checkbox onClick="javascript:search('xcyd');">
<input type=checkbox onClick="javascript:search('xdyd');">
<input type=checkbox onClick="javascript:search('xeyd');">
<input type=checkbox onClick="javascript:search('xfyd');">
<input type=checkbox onClick="javascript:search('xgyd');">
<input type=checkbox onClick="javascript:search('xhyd');">
<input type=checkbox onClick="javascript:search('xiyd');">
<input type=checkbox onClick="javascript:search('xjyd');">
<input type=checkbox onClick="javascript:search('xaye');">
<input type=checkbox onClick="javascript:search('xbye');">
<input type=checkbox onClick="javascript:search('xcye');">
<input type=checkbox onClick="javascript:search('xdye');">
<input type=checkbox onClick="javascript:search('xeye');">
<input type=checkbox onClick="javascript:search('xfye');">
<input type=checkbox onClick="javascript:search('xgye');">
<input type=checkbox onClick="javascript:search('xhye');">
<input type=checkbox onClick="javascript:search('xiye');">
<input type=checkbox onClick="javascript:search('xjye');">
<input type=checkbox onClick="javascript:search('xayf');">
<input type=checkbox onClick="javascript:search('xbyf');">
<input type=checkbox onClick="javascript:search('xcyf');">
<input type=checkbox onClick="javascript:search('xdyf');">
<input type=checkbox onClick="javascript:search('xeyf');">
<input type=checkbox onClick="javascript:search('xfyf');">
<input type=checkbox onClick="javascript:search('xgyf');">
<input type=checkbox onClick="javascript:search('xhyf');">
<input type=checkbox onClick="javascript:search('xiyf');">
<input type=checkbox onClick="javascript:search('xjyf');">
<input type=checkbox onClick="javascript:search('xayg');">
<input type=checkbox onClick="javascript:search('xbyg');">
<input type=checkbox onClick="javascript:search('xcyg');">
<input type=checkbox onClick="javascript:search('xdyg');">
<input type=checkbox onClick="javascript:search('xeyg');">
<input type=checkbox onClick="javascript:search('xfyg');">
<input type=checkbox onClick="javascript:search('xgyg');">
<input type=checkbox onClick="javascript:search('xhyg');">
<input type=checkbox onClick="javascript:search('xiyg');">
<input type=checkbox onClick="javascript:search('xjyg');">
<input type=checkbox onClick="javascript:search('xayh');">
<input type=checkbox onClick="javascript:search('xbyh');">
<input type=checkbox onClick="javascript:search('xcyh');">
<input type=checkbox onClick="javascript:search('xdyh');">
<input type=checkbox onClick="javascript:search('xeyh');">
<input type=checkbox onClick="javascript:search('xfyh');">
<input type=checkbox onClick="javascript:search('xgyh');">
<input type=checkbox onClick="javascript:search('xhyh');">
<input type=checkbox onClick="javascript:search('xiyh');">
<input type=checkbox onClick="javascript:search('xjyh');">
<input type=checkbox onClick="javascript:search('xayi');">
<input type=checkbox onClick="javascript:search('xbyi');">
<input type=checkbox onClick="javascript:search('xcyi');">
<input type=checkbox onClick="javascript:search('xdyi');">
<input type=checkbox onClick="javascript:search('xeyi');">
<input type=checkbox onClick="javascript:search('xfyi');">
<input type=checkbox onClick="javascript:search('xgyi');">
<input type=checkbox onClick="javascript:search('xhyi');">
<input type=checkbox onClick="javascript:search('xiyi');">
<input type=checkbox onClick="javascript:search('xjyi');">
<input type=checkbox onClick="javascript:search('xayj');">
<input type=checkbox onClick="javascript:search('xbyj');">
<input type=checkbox onClick="javascript:search('xcyj');">
<input type=checkbox onClick="javascript:search('xdyj');">
<input type=checkbox onClick="javascript:search('xeyj');">
<input type=checkbox onClick="javascript:search('xfyj');">
<input type=checkbox onClick="javascript:search('xgyj');">
<input type=checkbox onClick="javascript:search('xhyj');">
<input type=checkbox onClick="javascript:search('xiyj');">
<input type=checkbox onClick="javascript:search('xjyj');">
</FORM>
网页综合特效代码
|
>>>> 代码在线运行器代码 |
<script language="javascript">
var userAgent = navigator.userAgent.toLowerCase();
var is_webtv = userAgent.indexOf('webtv') != -1;
var is_kon = userAgent.indexOf('konqueror') != -1;
var is_mac = userAgent.indexOf('mac') != -1;
var is_saf = userAgent.indexOf('applewebkit') != -1 || navigator.vendor == 'Apple Computer, Inc.';
var is_opera = userAgent.indexOf('opera') != -1 && opera.version();
var is_moz = (navigator.product == 'Gecko' && !is_saf) && userAgent.substr(userAgent.indexOf('firefox') + 8, 3);
var is_ns = userAgent.indexOf('compatible') == -1 && userAgent.indexOf('mozilla') != -1 && !is_opera && !is_webtv && !is_saf;
var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera && !is_saf && !is_webtv) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);
function $(id) {
return document.getElementById(id);
}
function copyCode(obj) {
if(is_ie && obj.style.display != 'none') {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
}
function runCode(obj) {
var winname = window.open('', "_blank", '');
winname.document.open('text/html', 'replace');
winname.document.write(obj.value);
winname.document.close();
}
function saveCode(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','code.htm');
winname.close();
}
</script>
<style>
.mainareayx{ height:100px; width:310px;border:1px solid #f5f5f5;
scrollbar-face-color:#313131;
scrollbar-shadow-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#333;
scrollbar-darkshadow-color:#666;
scrollbar-arrow-color:#AAAAAA;
scrollbar-base-color:#AAAAAA;
scrollbar-track-color:#000000;
filter: chroma(color=#E100E1);
background:#313131;
color:#b2d7ff;
}
.xiaoguo{height:20px;line-height:20px; color:#fff; font-weight:bold; width:80px; text-align:center; cursor:hand;font-size:12px; float:left;}
.collapsed {
display: none;
}
.title{border:1px dashed #9900FF; cursor:hand; color:#fff; height:12px; padding:4px 8px 2px 0; font-weight:bold; font-size:13px; width:120px}
.title .jiaobiao{font-size:10px; color:#FFFFFF; width:20px; height:14px; float:left; margin-left:6px}
.neirong{color:#b2d7ff; line-height:20px; font-size:12px;}
.mainwraoer{ width:330px; margin-left:5px; background:#313131; padding-left:10px}
</style>
<script language="javascript">
<!--
function outliner()
{
var child = document.all[event.srcElement.getAttribute("child",false)];
if (null != child){
if(child.className == "expanded")
{
child.className = "collapsed";
return;
}
if(child.className == "collapsed")
{
child.className = "expanded";
return;
}
}
}
//-->
</script>
<div class="mainwraoer">
<table>
<tr>
<td onmouseover="this.bgColor='#3366cc';" onmouseout="this.bgColor='#336633';" class="title">
<div onclick="outliner()" child="yunxing"><div class="jiaobiao">>></div>运行代码</div> </td>
<tr>
</tr></tr></table>
<div class="neirong">
<div id="yunxing" class="collapsed" onclick="outliner()" child="yunxing">
<textarea id="code0" class="mainareayx">
输入你要运行的代码
</textarea>
<table>
<tr>
<td onclick="runCode($('code0'))" class="xiaoguo" onmouseover="this.bgColor='#AF7B50';" onmouseout="this.bgColor='#63A9CF';" >运行代码</td>
<td onclick="copyCode($('code0'))" class="xiaoguo" onmouseover="this.bgColor='#AF7B50';" onmouseout="this.bgColor='#63A9CF';" >复制代码</td>
<td onclick="saveCode($('code0'))" class="xiaoguo" onmouseover="this.bgColor='#AF7B50';" onmouseout="this.bgColor='#63A9CF';" >另存代码</td>
</tr>
</table>
</div>
</div>
|
>>>> 后台内容管理页面 |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.lanrentuku.com</title>
<style type="text/css">
body{font-size:12px;}
ul,li,h2{margin:0;padding:0;}
ul{list-style:none;}
#top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00}
#top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;}
#topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left}
#topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;}
#main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;}
#leftMenu{width:150px;height:500px;background-color:#009900;float:left}
#leftMenu ul{margin:10px;}
#leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;}
#leftMenu ul li a{color:#000000;text-decoration:none;}
#content{width:750px;height:500px;float:left}
.content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;}
#footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;}
.content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;}
</style>
<script type="text/javascript">
window.onload=function(){
function $(id){return document.getElementById(id)}
var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器
var tags=menu.getElementsByTagName("li");//顶部菜单
var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单
var j;
//点击左侧菜单增加新标签
for(i=0;i<ck.length;i++){
ck[i].onclick=function(){
$("welcome").style.display="none"//欢迎内容隐藏
//循环取得当前索引
for(j=0;j<8;j++){
if(this==ck[j]){
if($("p"+j)==null){
openNew(j,this.innerHTML);//设置标签显示文字
}
clearStyle();
$("p"+j).style.backgroundColor="yellow";
clearContent();
$("c"+j).style.display="block";
}
}
return false;
}
}
//增加或删除标签
function openNew(id,name){
var tagMenu=document.createElement("li");
tagMenu.id="p"+id;
tagMenu.innerHTML=name+" "+"<img src='http://www.tjdadi.com.cn/off.gif' style='vertical-align:middle'/>";
//标签点击事件
tagMenu.onclick=function(evt){
clearStyle();
tagMenu.style.backgroundColor="yellow";
clearContent();
$("c"+id).style.display="block";
}
//标签内关闭图片点击事件
tagMenu.getElementsByTagName("img")[0].onclick=function(evt){
evt=(evt)?evt:((window.event)?window.event:null);
if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;
this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签
var color=tagMenu.style.backgroundColor;
//设置如果关闭一个标签时，让最后一个标签得到焦点
if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释
if(tags.length-1>=0){
clearStyle();
tags[tags.length-1].style.backgroundColor="yellow";
clearContent();
var cc=tags[tags.length-1].id.split("p");
$("c"+cc[1]).style.display="block";
}
else{
clearContent();
$("welcome").style.display="block"
}
}
}
menu.appendChild(tagMenu);
}
//清除标签样式
function clearStyle(){
for(i=0;i<tags.length;i++){
menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00";
}
}
//清除内容
function clearContent(){
for(i=0;i<7;i++){
$("c"+i).style.display="none";
}
}
}
</script>
</head>
<body>
<div id="top">
<h2>管理菜单</h2>
<div id="topTags">
<ul>
</ul>
</div>
</div>
<div id="main">
<div id="leftMenu">
<ul>
<li>个人资料</li>
<li>相册管理</li>
<li>日志管理</li>
<li>留言管理</li>
<li>风格管理</li>
<li>系统管理</li>
<li>帮助信息</li>
</ul>
</div>
<div id="content">
<div id="welcome" class="content" style="display:block;">
<div align="center">
<p> </p>
<p><strong>欢迎使用用户管理系统！</strong></p>
<p> </p>
</div>
</div>
<div id="c0" class="content">个人资料</div>
<div id="c1" class="content">相册管理</div>
<div id="c2" class="content">日志管理</div>
<div id="c3" class="content">留言管理</div>
<div id="c4" class="content">风格管理</div>
<div id="c5" class="content">系统管理</div>
<div id="c6" class="content">帮助信息</div>
</div>
</div>
<div id="footer">copyright for lalasxc </div>
</body>
</html>
|
>>>> 有箭头指示的升序和降序提示效果
|
*{font:12px arial;}
.sort{float:left;margin-left:20px;}
.sort a{ color:#900;}
#optDiv{position:relative;z-index:1;}
.arrowIcon{height:5px;background:url(http://www.lanrentuku.com/images/uppic/200812300057410.gif) no-repeat 50px 8px;}
.arrow{background:#900;height:25px;text-align:center;line-height:26px;width:100px;color:#fff}
</style>
<script type="text/javascript">
function move(wid)
{
var _op=document.getElementById("optDiv")
_op.style.left=wid+"px";
}
</script>
<div class="sort">
排序：<a href="" onmouseover="move(-290)">正常顺序</a> | <a href="" onmouseover="move(-220)">时间顺序</a> | <a href="#" onmouseover="move(-180)">重要性</a> | <a href="#">是否央行</a> | <a href="">币种</a>
</div>
<div id="optDiv" style="top:10px;left:-220px;">
<div class="arrowIcon"></div>
<div class="arrow">升序 | 降序</div>
</div>
|
>>>> 有箭头指示的升序和降序提示效果
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>换肤</title>
<style type="text/css">
body{font-size:12px}
*{margin:0;padding:0;}
ul,li{list-style:none}
.login_skin{height:25px;background:#E8E8E8;border:1px solid #e9e8e5;width:215px;color:#333;line-height:25px;margin:25px 0px 25px 10px;padding-left:15px;}
.login_skin li{float:left}
.login_skin .bor{border-right:1px solid #e9e8e5; padding-right:7px; margin-right:10px}
.login_skin li span{margin:7px 4px 0px 0px;cursor:pointer;display:block}
.login_skin li span em{display:block;height:9px;width:10px;overflow:hidden;text-indent:-9999px}
.login_skin a{color:#333;text-decoration:none; margin-right:5px}
.login_skin li .on{ border:1px solid #333;cursor:default}
h2{font-size:12px; padding:8px 0px 10px 15px}
#sk_blue{background:#2086b3;}
#sk_or{background:#e64c13}
#sk_byu{background:#b7a37a;}
#warpper{overflow:hidden;height:1%}
.contentl{margin-right:-244px;float:left;width:100%}
.contentr{width:230px;float:right;}
.main{margin-right:254px;margin-left:10px;height:300px}
.footer{height:30px;margin:30px 10px 0px 10px}
.blue .content{background:#2086b3;color:#fff;}
.blue .bb{border:2px solid #2086b3;}
.blue .bb h2{ color:#2086b3}
.blue .footer{background:#2086b3;}
.or .content{background:#e64c13}
.or .bb{border:2px solid #e64c13;}
.or .bb h2{ color:#e64c13}
.or .footer{background:#e64c13;}
.byu .content{background:#b7a37a;color:#f00}
.byu .bb{border:2px solid #b7a37a;}
.byu .bb h2{ color:#b7a37a}
.byu .footer{background:#b7a37a;}
</style>
<script type="text/javascript">
function setOnloadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
// --- 设置cookie
function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
//--- 获取cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function skin(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById("skin")) return false;
var skin_id="blue";
if(getCookie("id")!=null){
skin_id=getCookie("id");
}
var span_id=skin_id+"_sp";
var span_on=document.getElementById(span_id);
document.body.className=skin_id;
span_on.className="on";
var skinType=document.getElementById("skin");
var skin_nub=skinType.getElementsByTagName("em");
for(var i=0; i<skin_nub.length;i++){
skin_nub[i].onclick=function(){
var em_id=this.getAttribute("id");
var skin_id=em_id.split("_")[1];
var spanList=document.getElementsByTagName("span");
for(var j=0;j<spanList.length;j++){
spanList[j].className="";
if(spanList[j].getAttribute("id").indexOf(skin_id)!=-1)
{
spanList[j].className="on";
}
}
document.body.className=skin_id;
setCookie("id",skin_id,1);
}
}
}
setOnloadEvent(skin);
</script>
</head>
<body>
<div id="header">
<div class="login_skin" id="skin">
<ul>
<li><a href="http://www.lanrentuku.com/">登陆</a></li>
<li class="bor"><a href="http://www.lanrentuku.com/">注册</a></li>
<li>选择页面风格：</li>
<li><span id="blue_sp"><em id="sk_blue">ee</em></span></li>
<li><span id="or_sp"><em id="sk_or">ere</em></span></li>
<li><span id="byu_sp"><em id="sk_byu">ere</em></span></li>
</ul>
</div>
</div>
<div id="warpper">
<div class="contentl" >
<div class="main bb"><h2>换肤测试</h2></div>
</div>
<div class="contentr bb" ><h2>换肤测试</h2></div>
</div>
<div class="footer"></div>
</body>
</html>
|
>>>> 弹出城市选择框特效
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>城市选择框特效</title>
<style type="text/css">
<!--
body{padding-top:50px;font-size:12px;}
h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;}
.bton{border:1px solid #CCC;background:#DDD;}
.cont{padding:10px;}
#main{width:400px;margin:0px auto;}
#selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;margin-top:10px;width:400px;z-index:2;}
#preview{margin:1px;border:1px solid #CCC;}
#result{border:1px solid #CCC;margin-top:10px;}
.tit{line-height:20px;height:20px;margin:1px;padding-left:10px;}
.bgc_ccc{background:#CCC;}
.bgc_eee{background:#eee;}
.c_999{color:#999}
.pointer{cursor:pointer;}
.left{float:left;}
.right{float:right;}
.cls{clear:both;font-size:0px;height:0px;overflow:hidden;}
#bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;}
.hidden{display:none;}
.move{cursor:move;}
-->
</style>
</head>
<body>
<div id="main">
<input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)"/>
<div id="result">
<div class="tit bgc_eee">
<h2>您已选择的城市汇总</h2>
</div>
<div class="cont" id="makeSureItem">
</div>
</div>
</div>
<div id="bg">
</div>
<div id="selectItem" class="hidden">
<div class="tit bgc_ccc move" onmousedown="drag(event,this)">
<h2 class="left">请选择城市</h2>
<span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span>
<span class="pointer right" onclick="makeSure();">[确定]</span>
</div>
<div class="cls"></div>
<div class="cont">
<div id="selectSub">
<select name="" onchange="showSelect(this.value)" style="margin-bottom:10px;">
<option value="0">第0层</option>
<option value="1">第1层</option>
<option value="2">第2层</option>
<option value="3">第3层</option>
</select>
<div id="c00">
<input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京
<input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建
<input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川
<input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏
</div>
<div id="c01">
<input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海
<input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南
<input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州
</div>
<div id="c02">
<input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江
<input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林
<input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁
</div>
<div id="c03">
<input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国
<input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗
<input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本
</div>
</div>
</div>
<div id="preview">
<div class="tit bgc_eee c_999">
<h2>您已选择的城市</h2>
</div>
<div class="cont" id="previewItem">
</div>
</div>
</div>
<script type="text/javascript">
/* ------使用说明----- */
/*
添加城市方法：
添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增
添加二级傅选矿选项
复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。
*/
var grow = $("selectSub").getElementsByTagName("option").length; //组数
var showGrow = 0;//已打开组
var selectCount = 0; //已选数量
showSelect(showGrow);
var items = $("selectSub").getElementsByTagName("input");
//alert(maxItem);
//var lenMax = 2;
//alert(1);
function $(o){ //获取对象
if(typeof(o) == "string")
return document.getElementById(o);
return o;
}
function openBg(state){ //遮照打开关闭控制
if(state == 1)
{
$("bg").style.display = "block";
var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
//alert(document.body.offsetHeight);
//alert(document.documentElement.offsetHeight);
$("bg").style.height = h + "px";
}
else
{
$("bg").style.display = "none";
}
}
function openSelect(state){ //选择城市层关闭打开控制
if(state == 1)
{
$("selectItem").style.display = "block";
$("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";
$("selectItem").style.top = document.body.scrollTop + 100 + "px";
}
else
{
$("selectItem").style.display = "none";
}
}
function showSelect(id){
for(var i = 0 ; i < grow ;i++)
{
$("c0" + i).style.display = "none";
}
$("c0" + id).style.display = "block";
showGrow = id;
}
function open(id,state){ //显示隐藏控制
if(state == 1)
$(id).style.display = "block";
$(id).style.diaplay = "none";
}
function addPreItem(){
$("previewItem").innerHTML = "";
var len = 0 ;
for(var i = 0 ; i < items.length ; i++)
{
if(items[i].checked == true)
{
//len++;
//if(len > lenMax)
//{
// alert("不能超过" + lenMax +"个选项！")
// return false;
//}
var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;
$("previewItem").innerHTML += mes;
//alert(items[i].value);
}
}
}
function makeSure(){
//alert(1);
//$("makeSureItem").innerHTML = $("previewItem").innerHTML;
openBg(0);
openSelect(0);
copyItem("previewItem","makeSureItem")
}
function copyHTML(id1,id2){
$(id2).innerHTML = $("id1").innerHTML;
}
function copyItem(id1,id2){
var mes = "";
var items2 = $(id1).getElementsByTagName("input");
for(var i = 0 ; i < items2.length ; i++)
{
if(items2[i].checked == true)
{
mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value;
}
}
$(id2).innerHTML = "";
$(id2).innerHTML += mes;
//alert($(id2).innerHTML);
}
function same(ck){
for(var i = 0 ; i < items.length ; i++)
{
if(ck.value == items[i].value)
{
items[i].checked = ck.checked;
}
}
}
/* 鼠标拖动 */
var oDrag = "";
var ox,oy,nx,ny,dy,dx;
function drag(e,o){
var e = e ? e : event;
var mouseD = document.all ? 1 : 0;
if(e.button == mouseD)
{
oDrag = o.parentNode;
//alert(oDrag.id);
ox = e.clientX;
oy = e.clientY;
}
}
function dragPro(e){
if(oDrag != "")
{
var e = e ? e : event;
//$(oDrag).style.left = $(oDrag).offsetLeft + "px";
//$(oDrag).style.top = $(oDrag).offsetTop + "px";
dx = parseInt($(oDrag).style.left);
dy = parseInt($(oDrag).style.top);
//dx = $(oDrag).offsetLeft;
//dy = $(oDrag).offsetTop;
nx = e.clientX;
ny = e.clientY;
$(oDrag).style.left = (dx + ( nx - ox )) + "px";
$(oDrag).style.top = (dy + ( ny - oy )) + "px";
ox = nx;
oy = ny;
}
}
document.onmouseup = function(){oDrag = "";}
document.onmousemove = function(event){dragPro(event);}
</script>
</body>
</html>
|
>>>> js实现球状字体特效
|
<html>
<head>
<title>lanrentuku.com</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
span {position:absolute;font-family: verdana; font-weight: bold;}
</style>
<script type="text/javascript"><!--
T = "What is real?How do you define real? If you're talkingabout what youcan feel whatyou can smellwhat you cantaste and seethen real issimply electrical signalsinterpreted byyour brain! ";
I = 0;
o = new Array();
xm = -1000;
ym = -1000;
///////////////
rad = 80;
dim = 200;
///////////////
W = 0;
H = 0;
NX = 14;
NY = 14;
var nx;
var ny;
document.onmousemove = function(e){
if (window.event) e = window.event;
xm = (e.x || e.clientX) - (nx * .5) + dim * .5;
ym = (e.y || e.clientY) - (ny * .5) + dim * .5;
}
function resize() {
nx = document.body.offsetWidth;
ny = document.body.offsetHeight;
}
onresize = resize;
function CObj(N,i,j,c){
this.obj = document.createElement("span");
this.obj.innerHTML = c;
DOOT.appendChild(this.obj);
this.N = N;
this.To = 16;
this.x0 = i*2*W;
this.y0 = j*2*H;
this.anim = true;
this.mainloop = function(){
with (this) {
dx = xm - x0;
dy = ym - y0;
dist = Math.sqrt(dx * dx + dy * dy);
if (dist < rad) {
anim = true;
M = Math.cos(.5 * Math.PI * Math.abs(dist / rad));
c = Math.round(84 + M * 171);
with(obj.style){
left = x0 - dx * M;
top = y0 - dy * M;
zIndex = Math.round(100 + M);
fontSize = 8 + M * W * 2;
color = "RGB("+c+","+c+","+c+")";
}
} else {
if(anim){
with(obj.style){
left = x0;
top = y0;
zIndex = 0;
fontSize = 8;
color = "RGB(88,88,88)";
}
anim = false;
}
}
}
}
}
function run(){
for(i in o)o[i].mainloop();
setTimeout(run,16);
}
onload = function (){
DOOT = document.getElementById("doot");
with(DOOT.style){
left = -dim/2;
top = -dim/2;
width = dim;
height = dim;
}
resize();
W = (dim / NX) / 2;
H = (dim / NY) / 2;
K = 0;
for(var j=0;j<NY;j++){
for(var i=0;i<NX;i++){
c=T.charAt((I++)%T.length).toUpperCase();
if(c==" ")c="·";
o[K] = new CObj(K++,i,j,c);
}
}
run();
}
//-->
</script>
</head>
<body>
<span style="position:absolute;left:50%;top:50%">
<span id="doot"></span>
</span>
</body>
</html>
|
>>>> 滑动显示相册的效果（纵向）
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="懒人图库" />
<title>纵向的JS相册效果</title>
<style>
body {background:#000000;margin:20px 0;font:12px Verdana, Arial, Tahoma;text-align:center;vertical-align:middle;color:#FFFFFF}
img {border:none}
.txt_1 {font:bold 24px Verdana, Tahoma;color:#fff}
img.thumb_img {cursor:pointer;display:block;margin-bottom:10px}
img#main_img {cursor:pointer;display:block;}
#gotop {cursor:pointer;display:block;}
#gobottom {cursor:pointer;display:block;}
#showArea {height:355px;margin:10px;overflow:hidden}
.info {color:#666;font:normal 9px Verdana;margin-top:20px}
.info a:link, .info a:visited {color:#666;text-decoration:none}
.info a:hover {color:#fff;text-decoration:none}
</style>
</head>
<body>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td height="75" colspan="2" align="left" class="txt_1">纵向的JS相册效果</td>
</tr>
<tr>
<td width="640" align="center"><img src="http://download.makewing.com/lanren/code/jsphotobook/images/03.jpg" alt="懒人图库" width="640" height="400" border="0" id="main_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/03.jpg" link="http://www.makewing.com" /></td>
<td width="110" align="center" valign="top">
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/gotop.gif" width="100" height="14" id="gotop" />
<div id="showArea">
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/03.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/03.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/03.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/03.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/03.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" link="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/03.jpg" alt="懒人图库" width="80" height="50" border="0" class="thumb_img" rel="http://download.makewing.com/lanren/code/jsphotobook/images/03.jpg" link="http://www.makewing.com" />
</div>
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/gobottom.gif" width="100" height="14" id="gobottom" /></td>
</tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
function $(e) {return document.getElementById(e);}
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}
var MyMar;
var speed = 1; //速度，越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var ipath = 'http://download.makewing.com/lanren/code/jsphotobook/images/'; //图片路径
var thumbs = document.getElementsByClassName('thumb_img');
for (var i=0; i<thumbs.length; i++) {
thumbs[i].onmouseover = function () {$('main_img').src=this.rel; $('main_img').link=this.link;};
thumbs[i].onclick = function () {location = this.link}
}
$('main_img').onclick = function () {location = this.link;}
$('gotop').onmouseover = function() {this.src = ipath + 'gotop2.gif'; MyMar=setInterval(gotop,speed);}
$('gotop').onmouseout = function() {this.src = ipath + 'gotop.gif'; clearInterval(MyMar);}
$('gobottom').onmouseover = function() {this.src = ipath + 'gobottom2.gif'; MyMar=setInterval(gobottom,speed);}
$('gobottom').onmouseout = function() {this.src = ipath + 'gobottom.gif'; clearInterval(MyMar);}
function gotop() {$('showArea').scrollTop-=spec;}
function gobottom() {$('showArea').scrollTop+=spec;}
</script>
|
>>>> 滑动显示相册的效果（横向）
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="" />
<title>横向的JS相册效果</title>
<style>
body {background:#000;margin:0;font:12px Verdana;text-align:center;}
#tbody {width:650px;margin:20px auto;text-align:left;}
#mainbody {width:640px;margin:5px;border:1px solid #222;padding:1px}
#mainphoto {cursor:pointer;display:block;}
#goleft {float:left;clear:left;margin:6px 5px 0 3px;}
#goright {float:right;clear:right;margin:6px 3px 0 5px;}
#photos {width:610px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;}
#showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222}
.txt_1 {font:bold 24px Verdana, Tahoma;color:#fff;}
</style>
</head>
<body>
<div id="tbody"><span class="txt_1">横向的JS相册效果</span>
<div id="mainbody">
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="640" height="400" id="mainphoto" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
</div>
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/goleft.gif" width="11" height="56" id="goleft" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/goright.gif" width="11" height="56" id="goright" />
<div id="photos">
<div id="showArea">
<!--
SRC: 缩略图地址
REL: 大图地址
NAME: 网址
-->
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
</div>
</div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var browse = window.navigator.appName.toLowerCase();
var MyMar;
var speed = 1; //速度，越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var minOpa = 50; //滤镜最小值
var maxOpa = 100; //滤镜最大值
var spa = 2; //缩略图区域补充数值
var w = 0;
spec = (browse.indexOf("microsoft") > -1) ? spec : ((browse.indexOf("opera") > -1) ? spec*10 : spec*20);
function $(e) {return document.getElementById(e);}
function goleft() {$('photos').scrollLeft -= spec;}
function goright() {$('photos').scrollLeft += spec;}
function setOpacity(e, n) {
if (browse.indexOf("microsoft") > -1) e.style.filter = 'alpha(opacity=' + n + ')';
else e.style.opacity = n/100;
}
$('goleft').style.cursor = 'pointer';
$('goright').style.cursor = 'pointer';
$('mainphoto').onmouseover = function() {setOpacity(this, maxOpa);}
$('mainphoto').onmouseout = function() {setOpacity(this, minOpa);}
$('mainphoto').onclick = function() {location = this.getAttribute('name');}
$('goleft').onmouseover = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goleft2.gif'; MyMar=setInterval(goleft, speed);}
$('goleft').onmouseout = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goleft.gif'; clearInterval(MyMar);}
$('goright').onmouseover = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goright2.gif'; MyMar=setInterval(goright,speed);}
$('goright').onmouseout = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goright.gif'; clearInterval(MyMar);}
window.onload = function() {
setOpacity($('mainphoto'), minOpa);
var rHtml = '';
var p = $('showArea').getElementsByTagName('img');
for (var i=0; i<p.length; i++) {
w += parseInt(p[i].getAttribute('width')) + spa;
setOpacity(p[i], minOpa);
p[i].onclick = function() {location = this.getAttribute('name');}
p[i].onmouseover = function() {
setOpacity(this, maxOpa);
$('mainphoto').src = this.getAttribute('rel');
$('mainphoto').setAttribute('name', this.getAttribute('name'));
setOpacity($('mainphoto'), maxOpa);
}
p[i].onmouseout = function() {
setOpacity(this, minOpa);
setOpacity($('mainphoto'), minOpa);
}
rHtml += '<img src="' + p[i].getAttribute('rel') + '" width="0" height="0" alt="" />';
}
$('showArea').style.width = parseInt(w) + 'px';
var rLoad = document.createElement("div");
$('photos').appendChild(rLoad);
rLoad.style.width = "1px";
rLoad.style.height = "1px";
rLoad.style.overflow = "hidden";
rLoad.innerHTML = rHtml;
}
</script>
导航菜单特效
|
>>>> 用css实现的导航下拉菜单 |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">XHTML/CSS
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">标准</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">技术文章</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">布局教程专题</a></li>
<li><a href="#">CSS菜单</a></li>
<li><a href="#">浏览器兼容</a></li>
<li><a href="#">滚动条相关</a></li>
<li><a href="#">圆角矩形专题</a></li>
<li><a href="#">CSS特效欣赏专题</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">07艺术
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">网页教学网</a></li>
<li><a href="#">网页教学网</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Javascript
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">JSON</a></li>
<li><a href="#">技术文章</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">DOM</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">正则表达式
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">正则表达式简介</a></li>
<li><a href="#">正则表达式之道</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">网站优化</a></li>
<li><a href="#">电脑网络</a></li>
<li><a href="#">建站技术
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">HP</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Dreamweaver</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html></CODE>
|
>>>> 仿苹果机桌面js+css飞行菜单 |
演示在这里
基于Jquery和Fisheye，在IE 6, IE 7, Opera 9, Firefox 2, and Safari 2测试通过
原文：http://www.ndesign-studio.com/blog/design/css-dock-menu/
使用方法：
1、下载。先下载资源包
2、插入代码。在<head>区域插入以下代码：
代码:
| 以下是引用片段： <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/interface.js"></script> 代码: |
| 以下是引用片段： <link href="style.css" rel="stylesheet" type="text/css" /> |
代码:
| 以下是引用片段： <!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(iepngfix.htc) } </style> <![endif]–> |
第一部分是javascript，第二部分是css，最后一段是ie6的hack
3、设置。在<body>区域任意地方插入以下代码：
代码:
| 以下是引用片段： <script type="text/javascript"> $(document).ready( function() { $(’#dock2′).Fisheye( { maxWidth: 60, items: ‘a’, itemsText: ’span’, container: ‘.dock-container2′, itemWidth: 40, proximity: 80, alignment : ‘left’, valign: ‘bottom’, halign : ‘center’ } ) } ); </script> |
4、插入菜单。
如果在页面顶部，则插入以下代码（注意：<span>在<img>之后）
代码:
| 以下是引用片段： <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> |
如果在页面底部，则插入以下代码（注意：<span>在<img>之前）
代码:
| 以下是引用片段： <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> |
另：此人另外的一些设计也相当出色：icon和wp模板
|
>>>> 抖动的菜单效果 |
<head>
<title>test</title>
<style type="text/css">
#wrapper{
position:relative;
width:720px;
height:500px;
left:50%;
margin-left:-360px;
border:solid black 1px;
}
#d1,#d2,#d3,#d4,#d5,#d6{
position:absolute;
border:1px black solid;
margin-left:0;
margin-right:auto;
width:100px;
text-align:center;
}
#d1{
margin:5px;
}
#d2{
top:20px;
margin:10px 0 0 5px;
}
#d3{
top:40px;
margin:15px 0 0 5px;
}
#d4{
top:60px;
margin:20px 0 0 5px;
}
#d5{
top:80px;
margin:25px 0 0 5px;
}
#d6{
top:100px;
margin:30px 0 0 5px;
}
#content{
position:absolute;
border:1px solid black;
width:605px;
height:490px;
left:110px;
top:5px;
}
.contents{
padding:10px;
display:none;
}
#content1{
display:block;
}
</style>
<script type="text/javascript">
var currunt=0
function dis(menu_number){
currunt=menu_number;
width=30;
speed=5;
positionX=0;
preSpeed=0;
flag=1;
document.getElementById("content"+menu_number).style.display="block";
hidRest(menu_number);
}
function hidRest(menu_clicked){
var MENU_LENGTH=6;
for(i=1;i<=MENU_LENGTH;i++){
if(i!=menu_clicked){
document.getElementById("content"+i).style.display="none";
}
}
}
function shake(){
if(flag==1){
speed=1-speed*0.8
positionX+=speed;
positionX-=preSpeed;
document.getElementById("d"+currunt).style.left=positionX
if(Math.abs(speed)<1.0){
document.getElementById("d"+currunt).style.left=0;
flag=0;
}
preSpeed=speed;
setTimeout("shake()",50)
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="d1" onmousedown="dis(1);shake()">Home</div>
<div id="d2" onmousedown="dis(2);shake()">Products</div>
<div id="d3" onmousedown="dis(3);shake()">Download</div>
<div id="d4" onmousedown="dis(4);shake()">News</div>
<div id="d5" onmousedown="dis(5);shake()">Support</div>
<div id="d6" onmousedown="dis(6);shake()">About</div>
<div id="content">
<div class="contents" id="content1">Home page:<br/>www.google.com</div>
<div class="contents" id="content2">Products list:
<br/>AKG K701
<br/>Sennheiser HD650
<br/>beyerdynamic DT880
<br/>Sony SA5000</div>
<div class="contents" id="content3">Download list:
<br/>realtek_alc880_182_xp.zip
<br/>Analog_soundmaxhd_drv510014310.rar
<br/>RTL8168_565808142006.zip
<br/>realtek_hd_205_xp.zip
<br/>8-8_xp32_dd_67975.exe</div>
<div class="contents" id="content4">My first JS practice!</div>
<div class="contents" id="content5">Support Information:<br/>TEL:8888888</div>
<div class="contents" id="content6">JS demo 1.0 by iifksp</div>
</div>
</div>
</body>
</html>
|
>>>> 树形菜单（一） |
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<script language="JavaScript1.2">
scores = new Array(20);var numTotal=0;NS4 = (document.layers) ? 1 : 0;IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) { with (document) { write("<STYLE TYPE='text/css'>"); if (NS4) { write(".parent {position:absolute; visibility:visible}"); write(".child {position:absolute; visibility:visible}"); write(".regular {position:absolute; visibility:visible}") } else { write(".child {display:none}") } write("</STYLE>"); }}function getIndex(el) { ind = null; for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id == el) { ind = i; break; } } return ind;}function arrange() { nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height; for (i=firstInd+1; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.visibility != "hide") { whichEl.pageY = nextY; nextY += whichEl.document.height; } }}function initIt(){ if (!ver4) return; if (NS4) { for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; } arrange(); } else { divColl = document.all.tags("DIV"); for (i=0; i<divColl.length; i++) { whichEl = divColl(i); if (whichEl.className == "child") whichEl.style.display = "none"; } }}function expandIt(el) { if (!ver4) return; if (IE4) { whichEl1 = eval(el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval(scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.style.display = "none"; } } whichEl1 = eval(el + "Child"); if (whichEl1.style.display == "none") { whichEl1.style.display = "block"; } else { whichEl1.style.display = "none"; } } else { whichEl = eval("document." + el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval("document." + scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.visibility = "hide"; } } if (whichEl.visibility == "hide") { whichEl.visibility = "show"; } else { whichEl.visibility = "hide"; } arrange(); }}onload = initIt;
</script>
<body>
<div id='KB1Parent' class='parent'><a href="default.htm" onClick="expandIt('KB1'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>时间日期类</a></div>
<div id='KB1Child' class='parent'> <a href='time1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>任意位置显示时钟</a><br>
<a href='time2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>倒计时代码生成器</a><br>
<a href='time3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>八种风格时间显示</a><br>
<a href='time4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>显示登陆时间</a><br>
<a href='time5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>日历生成器</a><br>
<a href='time6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>退出显示访问时间</a><br>
<a href='time7.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>一款特酷的时钟</a><br>
<a href='time8.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>全中文日期显示</a></div>
<div id='KB2Parent' class='parent'><a href="default.htm" onClick="expandIt('KB2'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>页面导航类</a></div>
<div id='KB2Child' class='child'> <a href='dao1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>显示站点信息导航</a><br>
<a href='dao2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>任意显示导航信息</a><br>
<a href='dao3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>动态导航脚本</a><br>
<a href='dao4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>下拉式导航菜单</a><br>
<a href='dao5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>静止导航菜单</a><br>
<a href='dao6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>静止图片脚本</a><br>
<a href='dao7.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文本静止不动</a><br>
<a href='dao8.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>信息框显示链接</a><br>
<a href='dao9.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>友情链接导航框</a><br>
<a href='dao10.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>目录式导航菜单</a><br>
<a href='dao11.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>重要信息说明脚本</a> </div>
<div id='KB3Parent' class='parent'><a href="default.htm" onClick="expandIt('KB3'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>页面背景类</a></div>
<div id='KB3Child' class='child'> <a href='back1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>背景向下移动</a><br>
<a href='back2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>背景不停变换色彩</a><br>
<a href='back3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>使页面产生百叶窗</a><br>
<a href='back4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>颜色代码英文集</a><br>
<a href='back5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>自已选择背景颜色</a><br>
<a href='back6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>背景颜色安全测试</a><br>
<a href='back7.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>颜色选择器</a><br>
<a href='back8.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>背景图片居中</a><br>
<a href='back9.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>页面转换特效</a></div>
<div id='KB4Parent' class='parent'><a href="default.htm" onClick="expandIt('KB4'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>页面特效类</a></div>
<div id='KB4Child' class='child'> <a href='ye1.htm' target='_target'> <IMG SRC='blhttp://www.cn76.com/js/blankank.gif' BORDER=0>字符从空中掉下来</a><br>
<a href='ye2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>打字机式输出文字</a><br>
<a href='ye4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>滚动显示的LOGO</a><br>
<a href='ye6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文本自动滚屏</a><br>
<a href='ye7.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>控制别人输入字数</a><br>
<a href='ye10.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文本上下弹跳</a><br>
<a href='ye11.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>特酷消隐字体</a><br>
<a href='ye12.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文本框栏目介绍</a><br>
<a href='ye13.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>旋转变换文字</a><br>
<a href='ye14.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>特酷的文本输出</a><br>
<a href='ye18.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>页面自动滚屏效果</a><br>
<a href='ye16.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>炽热的文字特效</a><br>
<a href='ye17.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>鼠标响应文字变色</a> </div>
<div id='KB5Parent' class='parent'><a href="default.htm" onClick="expandIt('KB5'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>图形图象类</a></div>
<div id='KB5Child' class='child'> <a href='picture1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>禁止图片下载</a><br>
<a href='picture2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>图片隐现效果</a><br>
<a href='picture3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>随机显示图片</a><br>
<a href='picture4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>图片变形扭曲</a><br>
<a href='picture5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>雪景</a><br>
<a href='picture7.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>图片渐渐出现</a><br>
<a href='picture8.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>相片选择器</a><br>
<a href='picture9.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>图形循环渐显</a><br>
<a href='picture10.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>图形左右晃动</a><br>
<a href='picture11.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>图形选择脚本</a><br>
<a href='picture12.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>图片翻滚导航</a><br>
<a href='picture13.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>图片翻滚导航</a> </div>
<div id='KB6Parent' class='parent'><a href="default.htm" onClick="expandIt('KB6'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>按钮特效类</a></div>
<div id='KB6Child' class='child'> <a href='an2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>跑马灯式链接说明</a><br>
<a href='an3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>窗口打开关闭</a><br>
<a href='an4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>浮动的链接说明</a><br>
<a href='an5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>链接处变换色彩</a><br>
<a href='an6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>变换链接色和底色</a><br>
<a href='an7.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>按顺序点击链接</a></div>
<div id='KB7Parent' class='parent'><a href="default.htm" onClick="expandIt('KB7'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>鼠标事件类</a></div>
<div id='KB7Child' class='child'> <a href='shu1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>图片跟随鼠标</a><br>
<a href='shu2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>鼠标响应新页面</a><br>
<a href='shu3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>禁用鼠标左右键</a><br>
<a href='shu4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>鼠标控制窗口开关</a><br>
<a href='picture6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>鼠标点击效果</a><br>
<a href='shu5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>禁用右键自动导航</a><br>
<a href='shu6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>鼠标激活警告框</a> </div>
<div id='KB8Parent' class='parent'><a href="default.htm" onClick="expandIt('KB8'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>Cookie脚本</a></div>
<div id='KB8Child' class='child'> <a href='cook1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>随登陆次数变提示</a><br>
<a href='cook2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>集成Cookies</a><br>
<a href='cook3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>使窗口仅弹出一次</a><br>
<a href='cook4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>签名提示程序</a><br>
<a href='cook5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>记录上次登录时间</a><br>
<a href='cook6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>自由控制打开窗口</a><br>
<a href='cook7.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>记录页面修改时间</a><br>
<a href='cook8.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>检测IE去过站点</a><br>
<a href='cook9.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>离开时显示信息</a><br>
<a href='cook10.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>弹出窗口自动关闭</a><br>
<a href='cook11.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>离开页面弹出窗口</a><br>
<a href='cook12.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>进入时显示信息</a></div>
<div id='KB9Parent' class='parent'><a href="default.htm" onClick="expandIt('KB9'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>文本特效类</a></div>
<div id='KB9Child' class='child'> <a href='text1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>随机信息显示</a><br>
<a href='text2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>随机文本链接</a><br>
<a href='text3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>所有链接不停变色</a><br>
<a href='text4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>鼠标经过文字变色</a><br>
<a href='text5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>随日期变换文本</a><br>
<a href='ye9.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文字颜色渐变脚本</a><br>
<a href='ye5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文本自动输出</a></div>
<div id='KB10Parent' class='parent'><a href="default.htm" onClick="expandIt('KB10'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>状态栏特效</a></div>
<div id='KB10Child' class='child'> <a href='ye8.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>状态栏跑马灯脚本</a><br>
<a href='zhuang1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文字从右弹出</a><br>
<a href='zhuang2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文字从左依次弹出</a><br>
<a href='zhuang3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文字从右到左移动</a><br>
<a href='zhuang4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文字快速依次弹出</a><br>
<a href='zhuang5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文字组合弹出</a><br>
<a href='zhuang6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文字不停闪烁</a><br>
<a href='zhuang7.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>状态栏显示链接</a><br>
<a href='time9.htm' target='_blank'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>title显示日期</a><br>
<a href='zhuang8.htm' target='_blank'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>title变化弹出</a></div>
<div id='KB11Parent' class='parent'><a href="default.htm" onClick="expandIt('KB11'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>密 码 类</a></div>
<div id='KB11Child' class='child'> <a href='password1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>控制他人进入页面</a><br>
<a href='password3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>用来实现会员制度</a><br>
<a href='password4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>密码保护相应页面</a><br>
<a href='password5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>自己编制密码表</a></div>
<div id='KB12Parent' class='parent'><a href="default.htm" onClick="expandIt('KB12'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>综 合 类</a></div>
<div id='KB12Child' class='child'> <a href='zh1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>加密页面源代码</a><br>
<a href='zh2.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>访问时间限制</a><br>
<a href='zh3.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>给页面加“热键”</a><br>
<a href='zh4.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>两个脚本同时调用</a><br>
<a href='zh5.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>浏览器毁灭者</a><br>
<a href='zh6.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文本中首字母大写</a><br>
<a href='zh7.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>查看某网址源代码</a><br>
<a href='zh8.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>文本中首字母大写</a><br>
<a href='zh9.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>加快图片显示</a><br>
<a href='zh10.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>综合的搜索引擎</a><br>
<a href='zh11.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>搜索引擎登记</a><br>
<a href='zh12.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>下载记时器脚本</a> </div>
<div id='KB13Parent' class='parent'><a href="default.htm" onClick="expandIt('KB13'); return false"> <IMG SRC='http://www.cn76.com/js/plus.gif' BORDER=0>游 戏 类</a></div>
<div id='KB13Child' class='child'> <a href='you1.htm' target='_target'> <IMG SRC='http://www.cn76.com/js/blank.gif' BORDER=0>一款流行游戏</a></div>
<SCRIPT>numTotal=14;scores[1]='KB1';scores[2]='KB1';scores[3]='KB2';scores[4]='KB3';scores[5]='KB4';scores[6]='KB5';scores[7]='KB6';scores[8]='KB7';scores[9]='KB8';scores[10]='KB9';scores[11]='KB10';scores[12]='KB11';scores[13]='KB12';scores[14]='KB13';</SCRIPT>
|
>>>> 城市级联菜单 |
<!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" />
<title>城市联动菜单 www.lanrentuku.com</title>
<style type="text/css">
ul,li,dl,dd {
padding:0;
margin:0;
list-style-type:none;
}
.menu1{
width:182px;
border:1px solid #feb951;
background:#fef4ea;
padding-top:3px;
font-size:12px;
}
.area li{
height:22px;
line-height:22px;
text-align:left;
position:relative;
}
.area li a {
display:block;
padding-left:20px;
}
.area li dl {
width:180px;
overflow:hidden;
display:none;
position:absolute;
top:-1px;
right:-182px;
z-index:35533;
border:1px solid #feb951;
background:#fef4ea;
padding:5px 0;
}
.area li dl a:hover {
border:1px solid #feb951;
background:#fff;
margin:0 5px;
padding-left:14px;
}
.area li.lion {
height:20px;
line-height:20px;
text-align:left;
border-top:1px solid #ffb850;
border-bottom:1px solid #ffb850;
background:#ffe7cc;
}
.area li.lion dl {display:block;}
</style>
</head>
<body>
<div id="rtab2_box" class="menu1">
<ul id="area" class="area">
<li><a href="/a_01/">安徽省</a>
<dl>
<dd><a href="/a_010100/">安庆市</a></dd>
<dd><a href="/a_010200/">蚌埠市</a></dd>
<dd><a href="/a_010300/">亳州市</a></dd>
<dd><a href="/a_010400/">巢湖市</a></dd>
<dd><a href="/a_010500/">滁州市</a></dd>
<dd><a href="/a_010600/">阜阳市</a></dd>
<dd><a href="/a_010700/">合肥市</a></dd>
<dd><a href="/a_010800/">淮北市</a></dd>
<dd><a href="/a_010900/">淮南市</a></dd>
<dd><a href="/a_011000/">黄山市</a></dd>
<dd><a href="/a_011100/">六安市</a></dd>
<dd><a href="/a_011200/">马鞍山市</a></dd>
<dd><a href="/a_011300/">宿州市</a></dd>
<dd><a href="/a_011400/">太湖市</a></dd>
<dd><a href="/a_011500/">芜湖市</a></dd>
<dd><a href="/a_011600/">歙县</a></dd>
<dd><a href="/a_011700/">宣城市</a></dd>
<dd><a href="/a_011800/">池城市</a></dd>
<dd><a href="/a_011900/">铜陵市</a></dd>
</dl>
</li>
<li><a href="/a_02/">北京</a>
<dl>
<dd><a href="/a_020100/">昌平区</a></dd>
<dd><a href="/a_020200/">朝阳区</a></dd>
<dd><a href="/a_020300/">崇文区</a></dd>
<dd><a href="/a_020400/">大兴区</a></dd>
<dd><a href="/a_020500/">东城区</a></dd>
<dd><a href="/a_020600/">房山区</a></dd>
<dd><a href="/a_020700/">丰台区</a></dd>
<dd><a href="/a_020800/">海淀区</a></dd>
<dd><a href="/a_020900/">怀柔区</a></dd>
<dd><a href="/a_021000/">门头沟区</a></dd>
<dd><a href="/a_021100/">密云县</a></dd>
<dd><a href="/a_021200/">平谷区</a></dd>
<dd><a href="/a_021300/">石景山区</a></dd>
<dd><a href="/a_021400/">顺义区</a></dd>
<dd><a href="/a_021500/">通州区</a></dd>
<dd><a href="/a_021600/">西城区</a></dd>
<dd><a href="/a_021700/">宣武区</a></dd>
<dd><a href="/a_021800/">延庆县</a></dd>
<dd><a href="/a_021900/">燕山区</a></dd>
</dl>
</li>
<li><a href="/a_03/">重庆</a>
<dl>
<dd><a href="/a_030100/">巴南区</a></dd>
<dd><a href="/a_030200/">北碚区</a></dd>
<dd><a href="/a_030300/">璧山县</a></dd>
<dd><a href="/a_030400/">长寿区</a></dd>
<dd><a href="/a_030500/">城口县</a></dd>
<dd><a href="/a_030600/">大足县</a></dd>
<dd><a href="/a_030700/">垫江县</a></dd>
<dd><a href="/a_030800/">渡口区</a></dd>
<dd><a href="/a_030900/">丰都县</a></dd>
<dd><a href="/a_031000/">奉节县</a></dd>
<dd><a href="/a_031100/">涪陵区</a></dd>
<dd><a href="/a_031200/">涪陵市</a></dd>
<dd><a href="/a_031300/">合川市</a></dd>
<dd><a href="/a_031400/">江北区</a></dd>
<dd><a href="/a_031500/">江津市</a></dd>
<dd><a href="/a_031600/">九龙坡区</a></dd>
<dd><a href="/a_031700/">开县</a></dd>
<dd><a href="/a_031800/">梁平县</a></dd>
<dd><a href="/a_031900/">南岸区</a></dd>
<dd><a href="/a_032000/">南川市</a></dd>
<dd><a href="/a_032100/">彭水</a></dd>
<dd><a href="/a_032200/">綦江县</a></dd>
<dd><a href="/a_032300/">黔江区</a></dd>
<dd><a href="/a_032400/">荣昌县</a></dd>
<dd><a href="/a_032500/">沙坪坝区</a></dd>
<dd><a href="/a_032600/">石柱</a></dd>
<dd><a href="/a_032700/">双桥区</a></dd>
<dd><a href="/a_032800/">铜梁县</a></dd>
<dd><a href="/a_032900/">潼南县</a></dd>
<dd><a href="/a_033000/">万盛区</a></dd>
<dd><a href="/a_033100/">万县市</a></dd>
<dd><a href="/a_033200/">万州区</a></dd>
<dd><a href="/a_033300/">巫山县</a></dd>
<dd><a href="/a_033400/">巫溪县</a></dd>
<dd><a href="/a_033500/">武隆县</a></dd>
<dd><a href="/a_033600/">秀山</a></dd>
<dd><a href="/a_033700/">永川市</a></dd>
<dd><a href="/a_033800/">酉阳</a></dd>
<dd><a href="/a_033900/">渝北区</a></dd>
<dd><a href="/a_034000/">云阳县</a></dd>
<dd><a href="/a_034100/">忠县</a></dd>
<dd><a href="/a_034200/">渝中区</a></dd>
</dl>
</li>
<li><a href="/a_04/">福建省</a>
<dl>
<dd><a href="/a_040100/">福州市</a></dd>
<dd><a href="/a_040200/">龙岩市</a></dd>
<dd><a href="/a_040300/">南平市</a></dd>
<dd><a href="/a_040400/">宁德市</a></dd>
<dd><a href="/a_040500/">莆田市</a></dd>
<dd><a href="/a_040600/">泉州市</a></dd>
<dd><a href="/a_040700/">三明市</a></dd>
<dd><a href="/a_040800/">邵武市</a></dd>
<dd><a href="/a_040900/">石狮市</a></dd>
<dd><a href="/a_041000/">厦门市</a></dd>
<dd><a href="/a_041100/">永安市</a></dd>
<dd><a href="/a_041200/">漳州市</a></dd>
</dl>
</li>
<li><a href="/a_05/">甘肃省</a>
<dl>
<dd><a href="/a_050100/">白银市</a></dd>
<dd><a href="/a_050200/">定西市</a></dd>
<dd><a href="/a_050300/">甘南</a></dd>
<dd><a href="/a_050400/">嘉峪关市</a></dd>
<dd><a href="/a_050500/">金昌市</a></dd>
<dd><a href="/a_050600/">酒泉市</a></dd>
<dd><a href="/a_050700/">兰州市</a></dd>
<dd><a href="/a_050800/">临夏市</a></dd>
<dd><a href="/a_050900/">陇南市</a></dd>
<dd><a href="/a_051000/">平凉市</a></dd>
<dd><a href="/a_051100/">庆阳市</a></dd>
<dd><a href="/a_051200/">天水市</a></dd>
<dd><a href="/a_051300/">武威市</a></dd>
<dd><a href="/a_051400/">西峰市</a></dd>
<dd><a href="/a_051500/">玉门市</a></dd>
<dd><a href="/a_051600/">张掖市</a></dd>
</dl>
</li>
<li><a href="/a_06/">广东省</a>
<dl>
<dd><a href="/a_060100/">潮州市</a></dd>
<dd><a href="/a_060200/">潮阳市</a></dd>
<dd><a href="/a_060300/">东莞市</a></dd>
<dd><a href="/a_060400/">佛山市</a></dd>
<dd><a href="/a_060500/">广州市</a></dd>
<dd><a href="/a_060600/">河源市</a></dd>
<dd><a href="/a_060700/">惠州市</a></dd>
<dd><a href="/a_060800/">江门市</a></dd>
<dd><a href="/a_060900/">揭阳</a></dd>
<dd><a href="/a_061000/">茂名市</a></dd>
<dd><a href="/a_061100/">梅州市</a></dd>
<dd><a href="/a_061200/">清远市</a></dd>
<dd><a href="/a_061300/">汕头市</a></dd>
<dd><a href="/a_061400/">汕尾市</a></dd>
<dd><a href="/a_061500/">韶关市</a></dd>
<dd><a href="/a_061600/">深圳市</a></dd>
<dd><a href="/a_061700/">顺德</a></dd>
<dd><a href="/a_061800/">阳江市</a></dd>
<dd><a href="/a_061900/">云浮</a></dd>
<dd><a href="/a_062000/">湛江市</a></dd>
<dd><a href="/a_062100/">肇庆市</a></dd>
<dd><a href="/a_062200/">中山市</a></dd>
<dd><a href="/a_062300/">珠海</a></dd>
<dd><a href="/a_062400/">恩平市</a></dd>
</dl>
</li>
<li><a href="/a_07/">广西省</a>
<dl>
<dd><a href="/a_070100/">百色市</a></dd>
<dd><a href="/a_070200/">北海市</a></dd>
<dd><a href="/a_070300/">崇左市</a></dd>
<dd><a href="/a_070400/">防城港市</a></dd>
<dd><a href="/a_070500/">贵港市</a></dd>
<dd><a href="/a_070600/">桂林市</a></dd>
<dd><a href="/a_070700/">合山市</a></dd>
<dd><a href="/a_070800/">河池市</a></dd>
<dd><a href="/a_070900/">贺州市</a></dd>
<dd><a href="/a_071000/">来宾市</a></dd>
<dd><a href="/a_071100/">柳州市</a></dd>
<dd><a href="/a_071200/">南宁市</a></dd>
<dd><a href="/a_071300/">凭祥市</a></dd>
<dd><a href="/a_071400/">钦州市</a></dd>
<dd><a href="/a_071500/">梧州市</a></dd>
<dd><a href="/a_071600/">玉林市</a></dd>
</dl>
</li>
<li><a href="/a_08/">贵州省</a>
<dl>
<dd><a href="/a_080100/">安顺市</a></dd>
<dd><a href="/a_080200/">毕节市</a></dd>
<dd><a href="/a_080300/">赤水市</a></dd>
<dd><a href="/a_080400/">都匀市</a></dd>
<dd><a href="/a_080500/">贵阳市</a></dd>
<dd><a href="/a_080600/">凯里市</a></dd>
<dd><a href="/a_080700/">六盘水市</a></dd>
<dd><a href="/a_080800/">铜仁市</a></dd>
<dd><a href="/a_080900/">兴义市</a></dd>
<dd><a href="/a_081000/">遵义市</a></dd>
</dl>
</li>
<li><a href="/a_09/">海南省</a>
<dl>
<dd><a href="/a_090100/">白沙</a></dd>
<dd><a href="/a_090200/">保亭</a></dd>
<dd><a href="/a_090300/">昌江</a></dd>
<dd><a href="/a_090400/">澄迈县</a></dd>
<dd><a href="/a_090500/">儋州市</a></dd>
<dd><a href="/a_090600/">定安县</a></dd>
<dd><a href="/a_090700/">东方</a></dd>
<dd><a href="/a_090800/">海口市</a></dd>
<dd><a href="/a_090900/">乐东</a></dd>
<dd><a href="/a_091000/">临高县</a></dd>
<dd><a href="/a_091100/">陵水</a></dd>
<dd><a href="/a_091200/">琼海</a></dd>
<dd><a href="/a_091300/">琼中</a></dd>
<dd><a href="/a_091400/">三亚市</a></dd>
<dd><a href="/a_091500/">通什市</a></dd>
<dd><a href="/a_091600/">屯昌县</a></dd>
<dd><a href="/a_091700/">万宁</a></dd>
<dd><a href="/a_091800/">文昌</a></dd>
<dd><a href="/a_091900/">五指山</a></dd>
</dl>
</li>
<li><a href="/a_10/">河北省</a>
<dl>
<dd><a href="/a_100100/">保定市</a></dd>
<dd><a href="/a_100200/">泊头市</a></dd>
<dd><a href="/a_100300/">沧州市</a></dd>
<dd><a href="/a_100400/">承德市</a></dd>
<dd><a href="/a_100500/">定州市</a></dd>
<dd><a href="/a_100600/">邯郸市</a></dd>
<dd><a href="/a_100700/">衡水市</a></dd>
<dd><a href="/a_100800/">廊坊市</a></dd>
<dd><a href="/a_100900/">南宫市</a></dd>
<dd><a href="/a_101000/">秦皇岛市</a></dd>
<dd><a href="/a_101100/">任丘市</a></dd>
<dd><a href="/a_101200/">沙河市</a></dd>
<dd><a href="/a_101300/">石家庄市</a></dd>
<dd><a href="/a_101400/">唐山市</a></dd>
<dd><a href="/a_101500/">辛集市</a></dd>
<dd><a href="/a_101600/">邢台市</a></dd>
<dd><a href="/a_101700/">张家口市</a></dd>
<dd><a href="/a_101800/">涿州市</a></dd>
</dl>
</li>
<li><a href="/a_11/">河南省</a>
<dl>
<dd><a href="/a_110100/">安阳市</a></dd>
<dd><a href="/a_110200/">鹤壁市</a></dd>
<dd><a href="/a_110300/">济源</a></dd>
<dd><a href="/a_110400/">焦作市</a></dd>
<dd><a href="/a_110500/">开封市</a></dd>
<dd><a href="/a_110600/">漯河市</a></dd>
<dd><a href="/a_110700/">洛阳市</a></dd>
<dd><a href="/a_110800/">南阳市</a></dd>
<dd><a href="/a_110900/">平顶山市</a></dd>
<dd><a href="/a_111000/">濮阳市</a></dd>
<dd><a href="/a_111100/">三门峡市</a></dd>
<dd><a href="/a_111200/">商丘市</a></dd>
<dd><a href="/a_111300/">新乡市</a></dd>
<dd><a href="/a_111400/">信阳市</a></dd>
<dd><a href="/a_111500/">许昌市</a></dd>
<dd><a href="/a_111600/">义马市</a></dd>
<dd><a href="/a_111700/">郑州市</a></dd>
<dd><a href="/a_111800/">周口市</a></dd>
<dd><a href="/a_111900/">驻马店市</a></dd>
</dl>
</li>
<li><a href="/a_12/">黑龙江省</a>
<dl>
<dd><a href="/a_120100/">阿城市</a></dd>
<dd><a href="/a_120200/">北安市</a></dd>
<dd><a href="/a_120300/">大庆市</a></dd>
<dd><a href="/a_120400/">大兴安岭</a></dd>
<dd><a href="/a_120500/">哈尔滨市</a></dd>
<dd><a href="/a_120600/">鹤岗市</a></dd>
<dd><a href="/a_120700/">黑河市</a></dd>
<dd><a href="/a_120800/">鸡西市</a></dd>
<dd><a href="/a_120900/">佳木斯市</a></dd>
<dd><a href="/a_121000/">牡丹江市</a></dd>
<dd><a href="/a_121100/">七台河市</a></dd>
<dd><a href="/a_121200/">齐齐哈尔市</a></dd>
<dd><a href="/a_121300/">双鸭山市</a></dd>
<dd><a href="/a_121400/">绥汾河市</a></dd>
<dd><a href="/a_121500/">绥化市</a></dd>
<dd><a href="/a_121600/">同江市</a></dd>
<dd><a href="/a_121700/">五大连池市</a></dd>
<dd><a href="/a_121800/">伊春市</a></dd>
<dd><a href="/a_121900/">肇东市</a></dd>
</dl>
</li>
</ul>
</div>
<script type=text/javascript>
function onload() {
try{
var lies = document.getElementById("area").getElementsByTagName("li");
for (var i=0; i< lies.length; i++) {
lies[i].onmouseover= function() {
this.className="lion";
}
lies[i].onmouseout= function() {
this.className="";
}
}
}
catch(e){}
}
onload();
</script>
<br/><br/>
</body>
</html>
|
>>>> 城市级联菜单 |
<!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=gb2312" />
<title>仿经典导航菜单</title>
<style type="text/css">
td{font-size:12px;}
.unsel{background-color:#8c8ba1; background-position:top; background-repeat:repeat-x; color:#FFFFFF; font-weight:normal;}
.sel {background-color:#666688; color:#FFFFFF; font-weight:bold;}
.content{background-color:#666688; height:25px; padding-left:20px; padding-right:20px; color:#ffffff;}
.lineunsel{background-color:#FFFFFF;}
.linesel{background:#666688;}
a:link {color:#ffffff;text-decoration:none;}
a:visited {color:#ffffff;text-decoration:none;}
a:active {color:#ffffff;text-decoration:none;}
a:hover {color:#ffffff;text-decoration:underline;}
</style>
<script language="javascript">
function showdh(n){
for(var i=1;i<=10;i++){
eval("dh"+i).className="unsel"
eval("line"+i).className="lineunsel";
eval("menu"+i).style.display="none";
}
eval("dh"+n).className="sel"
eval("line"+n).className="linesel";
eval("menu"+n).style.display="";
}
</script>
</head>
<body onload="javascript:showdh(1);">
<table width="915" height="30" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="86" class="unsel" id="dh1"><div align="center"><a href="javascript:showdh(1);">业界动态</a></div></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
<td width="86" class="unsel" id="dh2"><div align="center"><a href="javascript:showdh(2);">技术文档</a></div></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
<td width="86" class="unsel" id="dh3"><div align="center"><a href="javascript:showdh(3);">艺术设计</a></div></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
<td width="86" class="unsel" id="dh4"><div align="center"><a href="javascript:showdh(4);">摄影摄像</a></div></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
<td width="86" class="unsel" id="dh5"><div align="center"><a href="javascript:showdh(5);">计算机技术</a></div></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
<td width="86" class="unsel" id="dh6"><div align="center"><a href="javascript:showdh(6);">资源下载</a></div></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
<td width="86" class="unsel" id="dh7"><div align="center"><a href="javascript:showdh(7);">个人专档</a></div></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
<td width="86" class="unsel" id="dh8"><div align="center"><a href="javascript:showdh(8);">CG绘画</a></div></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
<td width="86" class="unsel" id="dh9"><div align="center"><a href="javascript:showdh(9);">专题</a></div></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="6" /></div></td>
<td width="87" class="sel" id="dh10"><div align="center"><a href="javascript:showdh(10);">经典论坛</a></div></td>
</tr>
</table>
<table width="915" height="3" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="86" height="6" id="line1"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
<td width="86" id="line2"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
<td width="86" id="line3"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
<td width="86" id="line4"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
<td width="86" id="line5"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
<td width="86" id="line6"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
<td width="86" id="line7"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
<td width="86" id="line8"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
<td width="86" id="line9"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
<td width="6"><div align="center"><img src="http://www.blueidea.com/img/spacer.gif" width="6" height="3" /></div></td>
<td width="87" id="line10"><img src="http://www.blueidea.com/img/spacer.gif" width="86" height="1" /></td>
</tr>
</table>
<table width="915" border="0" align="center" cellpadding="0" cellspacing="0">
<tr id="menu1" style="display:none">
<td class="content"><a href="#">业界动态一</a> <a href="#">业界动态二</a> <a href="#">业界动态三</a> <a href="#">业界动态四</a> <a href="#">业界动态五</a> <a href="#">业界动态六</a> <a href="javascript:showdh(3);">业界动态七</a></td>
</tr>
<tr id="menu2" style="display:none;">
<td class="content"><a href="#">技术文档一</a> <a href="#">技术文档二</a> <a href="#">技术文档三</a> <a href="#">技术文档四</a></td>
</tr>
<tr id="menu3" style="display:none;">
<td class="content"><a href="#">艺术设计一</a> <a href="#">艺术设计二</a> <a href="#">艺术设计三</a> <a href="#">艺术设计四</a> <a href="#">艺术设计五</a> <a href="#">艺术设计六</a></td>
</tr>
<tr id="menu4" style="display:none;">
<td class="content"><a href="#">摄影摄像一</a> <a href="#">摄影摄像二</a> <a href="#">摄影摄像三</a></td>
</tr>
<tr id="menu5" style="display:none;">
<td class="content"><a href="#">计算机技术一</a> <a href="#">计算机技术二</a> <a href="#">计算机技术三</a> <a href="#">计算机技术四</a> <a href="#">计算机技术五</a> <a href="#">计算机技术六</a> <a href="#">计算机技术七</a> <a href="#">计算机技术八</a></td>
</tr>
<tr id="menu6" style="display:none;">
<td class="content"><a href="#">资源下载一</a> <a href="#">资源下载二</a> <a href="#">资源下载三</a> <a href="#">资源下载四</a></td>
</tr>
<tr id="menu7" style="display:none;">
<td class="content"><a href="#">个人专档一</a> <a href="#">个人专档二</a> <a href="#">个人专档三</a> <a href="#">个人专档四</a> <a href="#">个人专档五</a> <a href="#">个人专档六</a> <a href="#">个人专档七</a> <a href="#">个人专档八</a></td>
</tr>
<tr id="menu8" style="display:none;">
<td class="content"><a href="#">CG绘画一</a> <a href="#">CG绘画二</a> <a href="#">CG绘画三</a> <a href="#">CG绘画四</a> <a href="#">CG绘画五</a></td>
</tr>
<tr id="menu9" style="display:none;">
<td class="content"><a href="#">专题一</a> <a href="#">专题二</a> <a href="#">专题三</a> <a href="#">专题四</a> <a href="#">专题五</a> <a href="#">专题六</a> <a href="#">专题七</a> <a href="#">专题八</a> <a href="#">专题九</a> <a href="#">专题十</a> <a href="#">专题十一</a> <a href="#">专题十二</a> <a href="#">专题十三</a></td>
</tr>
<tr id="menu10" style="display:none;">
<td class="content"><a href="#">经典论坛一</a> <a href="#">经典论坛二</a> <a href="#">经典论坛三</a> <a href="#">经典论坛四</a> <a href="#">经典论坛五</a> <a href="#">经典论坛六</a></td>
</tr></table>
<table width="915" border="0" cellspacing="0" cellpadding="0"><tr></tr>
</table>
</body>
</html>
|
>>>> css+js滑动导航菜单 |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 一个精彩的JS+CSS精彩导航实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
h4,div,ul,li,span{ padding:0px; margin:0px}
/* 最外面DIV的样式 */
#slidingBlock {
width:980px;
over-flow:hidden;
margin:auto;
height:60px;
border:#ccc solid 1px;
background-image: url(http://www.lanrentuku.com/images/uppic/200812180856440.jpg);
background-repeat: repeat-x;
background-position: top;
}
#nav_box{
height:33px;
width:958px;
text-align:center;
margin-left: 11px;
}
#slidingBlock a{ color:#000;
}
#slidingBlock h4 {
float:left;
width:78px;
height:33px;
line-height:33px;
text-align:center;
font-size:12px;
over-flow:hidden;
float:left;
background-image: url(http://www.lanrentuku.com/images/uppic/200812180856440.jpg);
background-repeat: repeat-x;
}
#slidingBlock h4.menuNo {
font-weight:normal;
color: #fff;
}
#slidingBlock h4.menuOn {
background-image: url(http://www.lanrentuku.com/images/uppic/200812180857440.jpg);
background-repeat: no-repeat;
background-position: 6px bottom;
color:#1368c2
}
#line{ width:2px; height:33px;
background-image: url(http://www.lanrentuku.com/images/uppic/200812180858210.jpg);
background-repeat: no-repeat;
float:left
}
#slidingBlock DIV.slidingList_none {
display:none
}
#slidingBlock DIV.slidingList {
width:auto;
margin:0px;
padding:0px;
height:27px;
clear:both;
background-image: url(http://www.lanrentuku.com/images/uppic/200812180858590.jpg);
background-repeat: repeat-x;
line-height:27px
}
#slidingBlock DIV.slidingList ul {
margin:0px;padding:0px; list-style:none;
}
#slidingBlock DIV.slidingList li {
float:left;
height:20px;
line-height:20px;
font-size:12px;
text-indent:20px;
}
</style>
</head>
<body>
<div id="slidingBlock">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1; i <13; i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}
else {
document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}
}
}
</script><div id="nav_box">
<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
法规政策</h4><div id="line"></div>
<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
政策标准</h4><div id="line"></div>
<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
环保规划</h4><div id="line"></div>
<h4 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','4');this.blur();">
环境评价</h4><div id="line"></div>
<h4 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','5');this.blur();">
环保工程</h4><div id="line"></div>
<h4 class="menuNo" id="mod6" onmouseover="switchmodTag('mod','slidingList','6');this.blur();">
环境监测</h4><div id="line"></div>
<h4 class="menuNo" id="mod7" onmouseover="switchmodTag('mod','slidingList','7');this.blur();">
环保考试</h4><div id="line"></div>
<h4 class="menuNo" id="mod8" onmouseover="switchmodTag('mod','slidingList','8');this.blur();">
环境论文</h4><div id="line"></div>
<h4 class="menuNo" id="mod9" onmouseover="switchmodTag('mod','slidingList','9');this.blur();">
环境导航</h4><div id="line"></div>
<h4 class="menuNo" id="mod10" onmouseover="switchmodTag('mod','slidingList','10');this.blur();">
求职招聘</h4><div id="line"></div>
<h4 class="menuNo" id="mod11" onmouseover="switchmodTag('mod','slidingList','11');this.blur();">
供求信息</h4><div id="line"></div>
<h4 class="menuNo" id="mod12" onmouseover="switchmodTag('mod','slidingList','12');this.blur();">
环保论坛</h4></div>
<div class="slidingList" id="slidingList1">
<ul>
<li ><a href="#">国家法律</a></li>
<li ><a href="/">地方法规</a></li>
<li ><a href="/">行政法规</a></li>
<li ><a href="/">部门规章</a></li>
<li ><a href="/">执法解释</a></li>
<li ><a href="/">文件规范</a></li>
<li ><a href="/">国际公约</a></li>
<li ><a href="/">功能区划</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2">
<ul>
<li > <a href="/">第二个的</a></li>
<li > <a href="/">第二个的</a></li>
<li > <a href="/">第二个</a></li>
<li > <a href="/">第二个的</a></li>
<li > <a href="/">第二个的</a></li>
<li > <a href="/">第二个的</a></li>
<li > <a href="/">第二个的</a></li>
<li > <a href="/">第二个的</a></li>
<li > <a href="/">第二个的</a></li>
<li > <a href="/">第二个的</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3">
<ul>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList4">
<ul>
<li> <a href="/">第4个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第4个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList5">
<ul>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList6">
<ul>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第5个</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList7">
<ul>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList8">
<ul>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList9">
<ul>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList10">
<ul>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList11">
<ul>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList12">
<ul>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第5个的</a></li>
<li> <a href="/">第三个的</a></li>
<li> <a href="/">第三个的</a></li>
</ul>
</div>
</div>
</body>
</html>
|
>>>> css+js滑动导航菜单（一） |
<!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=gb2312" />
<title>Chinaz菜单导航</title>
<style type="text/css">
<!--
div, ul, p{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
}
body {
color: #333;
background: #deebf3;
text-align: center;
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
}
a:link, a:visited {
color: #333;
text-decoration: none;
}
/* Nav
==========================================================*/
.nav {
width:910px;
position: relative;
margin:0px auto;
background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 0 -36px;
}
.navinner {
background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 100% -72px;
}
.navlist {
height: 36px;
line-height: 36px;
overflow: hidden;
margin: 0 10px;
background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) repeat-x 0 0;
}
.nav li {
float: left;
display: inline;
margin: 0 0 0 -2px;
padding: 0 4px 0 6px;
background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 0 -108px;
}
.nav a {
display: block;
width: 102px;
text-align: center;
font-size: 120%;
}
.nav a:link, .nav a:visited {
color: #fff;
}
.nav a.current, .nav a:hover, .nav a:active {
color: #fff;
font-weight: bold;
background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 50% -144px;
}
.subnav {
position: absolute;
top: 41px;
left: 0;
float: left;
height: 27px;
line-height: 27px;
white-space: nowrap;
background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 0 -180px;
}
* html .subnav {
margin: 0 10px 0 -10px; /* IE 6 and below */
}
.subnav p {
padding: 0 10px;
background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) no-repeat 100% -234px;
}
.subnav p span {
display: block;
background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) repeat-x 0 -207px;
}
.subnav p.pointer {
position: absolute;
top: -4px;
left: 0;
height: 5px;
width: 11px;
padding: 0;
margin-left: 20px;
text-indent: -999em;
background: url(http://www.lanrentuku.com/images/uppic/lrtk.png) repeat-x 0 -261px;
}
.subnav a {
display: inline;
padding: 0;
font-size: 100%;
}
[class~="subnav"] a {
padding: 0 3px;
}
.subnav, .subnav a:link, .subnav a:visited {
color: #235e99;
}
.subnav a:hover, .subnav a:active {
color: #235e99;
}
.subnav a:hover, .subnav a:active {
font-weight: normal;
background: none;
border-bottom: 2px solid;
}
/* subnav position and pointer position */
#subnav1 { left: 120px; }
#subnav2 { left: 230px; }
#subnav3 { left: 340px; }
#subnav4 { left: 450px; }
#subnav5, #subnav6, #subnav7 {
left: auto;
right: 0px;
}
#subnav1 .pointer,
#subnav2 .pointer,
#subnav3 .pointer,
#subnav4 .pointer { left: 30px; }
#subnav5 .pointer { left: auto; right: 290px; }
#subnav6 .pointer { left: auto; right: 180px; }
#subnav7 .pointer { left: auto; right: 70px; }
#subnav1, #subnav2, #subnav3, #subnav4 {
min-width: 110px;
}
#subnav5 { min-width: 340px; }
#subnav6 { min-width: 240px; }
#subnav7 { min-width: 130px; }
/* Note
==========================================================*/
.note {
margin: 0 15px 10px;
color:#666666;
}
.note span{
float:right;
}
.disable {
display: none;
}
-->
</style>
<script type="text/javascript">function $(id) {
return document.getElementById(id);
}
function showMenu (baseID, divID) {
baseID = $(baseID);
divID = $(divID);
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
showMenu.cur = divID;
if (! divID.isCreate) {
divID.isCreate = true;
//divID.timer = 0;
divID.onmouseover = function () {
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
};
function hide () {
showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);
}
divID.onmouseout = hide;
baseID.onmouseout = hide;
}
function hideCur () {
showMenu.cur && (showMenu.cur.style.display = 'none');
}
}</script>
</head>
<body>
<div class="nav">
<div class="navinner">
<ul class="navlist">
<li><a href="#">首页</a></li>
<li><a href="/News/Index.html" id="nav_1" onmouseover="showMenu('nav_1','subnav1')">asp教程</a>
<div class="subnav disable" id="subnav1">
<p class="pointer">.</p>
<p><span>
<a href="#">基础教程</a> |
<a href="#">实例教程</a> |
<a href="#">高级教程</a> |
<a href="#">组件教程</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_2" onmouseover="showMenu('nav_2','subnav2')">javascript教程</a>
<div class="subnav disable" id="subnav2">
<p class="pointer">.</p>
<p><span>
<a href="#">基础教程</a> |
<a href="#">实例教程</a> |
<a href="#">高级教程</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_3" onmouseover="showMenu('nav_3','subnav3')">网站运营</a>
<div class="subnav disable" id="subnav3">
<p class="pointer">.</p>
<p><span>
<a href="#">建站经验</a> |
<a href="#">策划盈利</a> |
<a href="#">搜索优化</a> |
<a href="#">网站推广</a> |
<a href="#">免费资源</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_4" onmouseover="showMenu('nav_4','subnav4')">css方面</a>
<div class="subnav disable" id="subnav4">
<p class="pointer">.</p>
<p><span>
<a href="#">酷站推荐</a> |
<a href="#">网页设计</a> |
<a href="#">WEB标准</a> |
<a href="#">设计活动</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_5" onmouseover="showMenu('nav_5','subnav5')">网络编程</a>
<div class="subnav disable" id="subnav5">
<p class="pointer">.</p>
<p><span>
<a href="#">Asp编程</a> |
<a href="#">Php编程</a> |
<a href="#">.Net编程</a> |
<a href="#">Xml编程</a> |
<a href="#">Access</a> |
<a href="#">Mssql</a> |
<a href="#">Mysql</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_6" onmouseover="showMenu('nav_6','subnav6')">联盟资讯</a>
<div class="subnav disable" id="subnav6">
<p class="pointer">.</p>
<p><span>
<a href="#">联盟新闻</a> |
<a href="#">联盟介绍</a>
</span></p>
</div>
</li>
<li><a href="#" id="nav_7" onmouseover="showMenu('nav_7','subnav7')">服务器</a>
<div class="subnav disable" id="subnav7">
<p class="pointer">.</p>
<p><span>
<a href="#">Web服务器</a> |
<a href="#">Ftp服务器</a>
</span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
>>>> 鼠标移过放大的导航效果 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.lanrentuku.com</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
background: #222;
}
#menu {
padding: 10px;
background: #000;
height: 300px;
width: 400px;
}
#menu a {
display:block;
text-decoration:none;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
}
</style>
<script type="text/javascript"><!--
var P,T;
var over = -1;
///////////////
var fontSize = 38;
var lensFX = 1;
var num = true;
var color = "#FFF";
var selected = "#F80";
///////////////
function zoom(s){
if(s!=over){
over = s;
for(var i=0;i<T;i++){
P[i].style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
P[i].style.color=(i==s)?selected:color;
}
}
}
onload = function(){
P = document.getElementById("menu").getElementsByTagName("a");
T = P.length;
for (var i=0;i<T;i++){
if(num){
x=i+".";
if(x.length<3)x="0"+x;
P[i].innerHTML = x+P[i].innerHTML;
}
P[i].style.width = "100%";
P[i].onmouseover=new Function("zoom("+i+");");
}
zoom(0);
}
//-->
</script>
</head>
<body>
<div id="menu">
<a href="http://del.icio.us/tag/scripting">scripting</a>
<a href="http://del.icio.us/tag/javascript">javascript</a>
<a href="http://del.icio.us/tag/web">web</a>
<a href="http://del.icio.us/tag/dhtml">dhtml</a>
<a href="http://del.icio.us/tag/css">css</a>
<a href="http://del.icio.us/tag/ajax">ajax</a>
<a href="http://del.icio.us/tag/programming">programming</a>
<a href="http://del.icio.us/tag/design">design</a>
<a href="http://del.icio.us/tag/webdesign">webdesign</a>
<a href="http://del.icio.us/tag/html">html</a>
<a href="http://del.icio.us/tag/dom">dom</a>
<a href="http://del.icio.us/tag/webdev">webdev</a>
<a href="http://del.icio.us/tag/reference">reference</a>
<a href="http://del.icio.us/tag/tools">tools</a>
<a href="http://del.icio.us/tag/tutorial">tutorial</a>
<a href="http://del.icio.us/tag/xmlhttprequest">xmlhttprequest</a>
<a href="http://del.icio.us/tag/menu">menu</a>
<a href="http://del.icio.us/tag/xml">xml</a>
<a href="http://del.icio.us/tag/library">library</a>
<a href="http://del.icio.us/tag/development">development</a>
</div>
</body>
</html>