<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{
width:150px;
height:250px;
background:#999999;
position:absolute;
left:-150px;}
span{
width:15px;
height:65px;
line-height:23px;
background:#09C;
position:absolute;
right:-20px;
top:70px;}
</style>
<script type="text/javascript">
window.onload = function () {
var odiv = document.getElementById('div1');
odiv.onmouseover = function () {
startmove(0, 10); //第一个参数为div left属性的目标值 第二个为 每次移动多少像素
}
odiv.onmouseout = function () {
startmove(-150, -10);
}
}
var timer = null;
function startmove(target, speed) {
var odiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function () {
if (odiv.offsetLeft == target) {
clearInterval(timer);
}
else {
odiv.style.left = odiv.offsetLeft + speed + 'px';
}
}, 30)
}
</script>
</head>
<body>
<div id="div1">
<center>
<table style="width:140px;height:240px">
<tr>
<td style="width:140px;height:40px">
<asp:HyperLink ID="HyperLink1" runat="server">导航一</asp:HyperLink>
</td>
</tr>
<tr>
<td style="width:140px;height:40px">
<asp:HyperLink ID="HyperLink2" runat="server">导航二</asp:HyperLink>
</td>
</tr>
<tr>
<td style="width:140px;height:40px">
<asp:HyperLink ID="HyperLink3" runat="server">导航三</asp:HyperLink>
</td>
</tr>
<tr>
<td style="width:140px;height:40px">
<asp:HyperLink ID="HyperLink4" runat="server">导航四</asp:HyperLink>
</td>
</tr>
<tr>
<td style="width:140px;height:40px">
<asp:HyperLink ID="HyperLink5" runat="server">导航五</asp:HyperLink>
</td>
</tr>
</table>
<span>侧边栏</span>
</center>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
