您的位置：首页 > 其它

制作树形菜单

2015-04-07 00:00 218 查看

摘要: 树形菜单对联广告

1、树形菜单

<!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>树形菜单</title>
<style type="text/css">
.childMenu{ display:none; list-style:none;}
</style>
<script type="text/javascript">
function show (id) {
var ul = document.getElementById(id);

if (ul.style.display == "block") {
ul.style.display = "none";
} else {
ul.style.display = "block";
}
}
</script>
</head>
<body>
<P><a href="javascript:show('art');">文学艺术</a></P>
<ul class="childMenu" id="art">
<li>先锋写作</li>
<li>小说散文</li>
<li>诗风词韵</li>
</ul>
<p><a href="javascript:show('photo');">贴图专区</a></p>
<ul class="childMenu" id="photo">
<li>真我风采</li>
<li>视频贴图</li>
<li>行行摄摄</li>
</ul>
<p><a href="javascript:show('house');">房产论坛</a></p>
<ul class="childMenu" id="house">
<li>楼市话题</li>
<li>我要买房</li>
<li>租房心语</li>
</ul>
<p></p>
</body>
</html>

执行结果：

2、对联广告

样例：

<!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>随鼠标滚动的广告图片</title>
<style type="text/css">
#adv{ position:absolute; left:50px; top:30px; z-index:2;}
</style>
<script type="text/javascript">
function test (id) {
var divObj = document.getElementById(id);
var left,top;

if (divObj.currentStyle) {
// IE浏览器
left = divObj.currentStyle.left;
top = divObj.currentStyle.top;
} else {
left = document.defaultView.getComputedStyle(divObj,null).left;
top = document.defaultView.getComputedStyle(divObj,null).top;
}

//alert("left=" + divObj.style.left + ";top=" + divObj.style.top);
alert("left=" + left + ";top=" + top);

divObj.style.left = parseInt(left) + 20 + "px";
divObj.style.top = parseInt(top) + 20 + "px";
}
</script>
</head>
<body>
<div id="adv"><img src="images/钱塘湖春行.jpg"/></div>
<div id="testDiv" style="background-color:#F00; position:absolute; left:300px; top:50px; width:80px; height:200px;">内部样式的div</div>
<input type="button" value="测试内部样式坐标位置" onclick="test('testDiv')"/>
<input type="button" value="测试内部样式坐标位置2" onclick="test('adv')"/>
</body>
</html>

3、获取鼠标滚动距离

样例：

<!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>随鼠标滚动的广告图片</title>
<style type="text/css">
#adv{ position:absolute; left:50px; top:30px; z-index:2;}
#main{height:2000px; background-color:#0FF;}
</style>
<script type="text/javascript">
function test (id) {
var divObj = document.getElementById(id);
var left,top;

if (divObj.currentStyle) {
// IE浏览器
left = divObj.currentStyle.left;
top = divObj.currentStyle.top;
} else {
left = document.defaultView.getComputedStyle(divObj,null).left;
top = document.defaultView.getComputedStyle(divObj,null).top;
}

//alert("left=" + divObj.style.left + ";top=" + divObj.style.top);
alert("left=" + left + ";top=" + top);

divObj.style.left = parseInt(left) + 20 + "px";
divObj.style.top = parseInt(top) + 20 + "px";
}

function getScroll () {
// 获取文档根元素html
//var obj = document.documentElement;
var obj = document.body;
alert("scrollTop=" + obj.scrollTop + ";scrollLeft=" + obj.scrollLeft);
}
window.onscroll = getScroll;
</script>
</head>
<body>
<div id="adv"><img src="images/钱塘湖春行.jpg"/></div>
<div id="testDiv" style="background-color:#F00; position:absolute; left:300px; top:50px; width:80px; height:200px;">内部样式的div</div>
<input type="button" value="测试内部样式坐标位置" onclick="test('testDiv')"/>
<input type="button" value="测试内部样式坐标位置2" onclick="test('adv')"/>
<div id="main"></div>
</body>
</html>

4、对联广告

<!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>随鼠标滚动的广告图片</title>
<style type="text/css">
#adv{ position:absolute; left:50px; top:30px; z-index:2;}
#main{height:2000px; background-color:#0FF;}
</style>
<script type="text/javascript">
var advObj;
var left;
// 全局变量不能定义为top，为什么？
var top2;

// 获取初始化位置
function init () {
advObj = document.getElementById("adv");
//var left,top;

if (advObj.currentStyle) {
// IE浏览器
left = advObj.currentStyle.left;
top2 = advObj.currentStyle.top;
} else {
top2 = document.defaultView.getComputedStyle(advObj,null).top;
left = document.defaultView.getComputedStyle(advObj,null).left;
}

left = parseInt(left);
top2 = parseInt(top2);
}

// 获取滚动条位置
function getScroll () {
// 获取文档根元素html
//var obj = document.documentElement;
var obj = document.body;
//alert("scrollTop=" + obj.scrollTop + ";scrollLeft=" + obj.scrollLeft);
var scrollTop = obj.scrollTop;
var scrollLeft = obj.scrollLeft;
scrollTop = parseInt(scrollTop);
scrollLeft = parseInt(scrollLeft);

adv.style.left = left + scrollLeft + "px";
adv.style.top = top2 + scrollTop + "px";
}

window.onload = init;
window.onscroll = getScroll;
</script>
</head>
<body>
<div id="adv"><img src="images/钱塘湖春行.jpg"/></div>
<div id="main"></div>
</body>
</html>

5、总结

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 树形菜单对联广告

相关文章推荐

新的分享

章节导航