最近想来做个CMS 之类的东西，所以写了我的第一个JavaScript

最新推荐文章于 2024-04-28 02:47:32 发布

zhuam

最新推荐文章于 2024-04-28 02:47:32 发布

阅读量1.9k

点赞数

分类专栏：技术文章文章标签： javascript cms function stylesheet div html

本文链接：https://blog.csdn.net/zhuam/article/details/1231415

版权

技术文章专栏收录该内容

46 篇文章 0 订阅

订阅专栏

最近想来做个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;
}

zhuam

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
6
评论
最近想来做个CMS 之类的东西，所以写了我的第一个JavaScript

最近想来做个CMS 之类的东西，打算用Java + JS来实现，所以写下了我的第一个稍微复杂一定的JavaScript 程序，呵呵，同时也可以支持一下公司的其他产品呗.http://www.w3.org/TR/html4/strict.dtd"> onmouseout="drag=0" onmouseover="dragObj=nevagetion; drag=1;">
复制链接

扫一扫

专栏目录