最近想来做个CMS 之类的东西,打算用Java + JS来实现,所以写下了我的第一个稍微复杂一定的JavaScript 程序,呵呵,同时也可以支持一下公司的其他产品呗.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<link rel='stylesheet' type='text/css' href='testtabs.css' />
<body id="body">
<div id="nevagetion" style="left: 200px; top: 200px; position: absolute;"
οnmοuseοut="drag=0" οnmοuseοver="dragObj=nevagetion; drag=1;">
<div id='tabs'>
<div id='tab1' onmousedown = liMouseDown('http://www.baidu.com') > <a> Baidu </a></div>
<div id='tab2' onmousedown = liMouseDown('http://www.google.com') > Google </div>
</div>
<iframe id="content" frameborder='0' marginheight='0' marginwidth='0' width='400'>
</iframe>
</div>
</body>
<script language="JavaScript">
function liMouseDown(url){
document.getElementById("content").src = url;
}
</script>
<script language="JavaScript">
drag = 0
move = 0
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(dragObj.style.left)
clicktop = window.event.y - parseInt(dragObj.style.top)
dragObj.style.zIndex += 1
move = 1
}
}
function mouseStop() {
window.event.returnValue = false
}
function mouseMove(){
if (move) {
dragObj.style.left = window.event.x - clickleft
dragObj.style.top = window.event.y - clicktop
}
}
function mouseUp() {
move = 0
}
</script>
</html>
CSS:
div#nevagetion {
background: rgb(200, 50, 100);;
font: 18px Arial, sans-serif;
padding: 10px 10px 10px 10px;
filter : alpha(opacity=70);
}
div#content {
margin: 0;
padding: 10px 10px 10px 0;
height: 25px;
width: 400px;
}
div#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 25px;
width: 400px;
border-bottom: 1px solid black;
background: rgb(256, 256, 256);
}
div#tab1,
div#tab2 {
cursor: pointer;
float: left;
margin: 0 5px;
height: 23px;
width: 150px;
text-align: center;
background: rgb(200, 50, 100);
border-bottom: 1px solid white;
}