模仿126的一个效果

最新推荐文章于 2022-01-09 22:49:17 发布

qiaolunihao

最新推荐文章于 2022-01-09 22:49:17 发布

阅读量464

点赞数

分类专栏： javascript 文章标签： function border url iframe div buffer

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!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> new document </title>
  <style type="text/css">
      html,body{ font-size:14px;}
      a { display:block; width:120px; height:40px; line-height:40px; float:left; text-align:center;}
      a span{ margin-left:60px; width:20px;}
      a:link,a:visited{ color:#00f; text-decoration:none;}
      a:hover,a:active{ color:#f00; text-decoration:none;}
      #win,#win iframe{ clear:both; width:800px;height:400px; overflow:hidden;}
      #nav { width:400px;}
      .px80 { width:80px;}
      .link { background:url(f2.gif) #fff repeat-x 0 5%;}
      .active { background:url(f2.gif) #fff repeat-x 0 87%;}
      .hidden { display:none;}
      #drop { width:150px; height:40px; line-height:18px; text-align:center; float:left;}
      #floatDiv a {width:150px; height:30px; line-height:30px; text-decoration:none; text-align:center; display:block; float:right;}
      #floatDiv a:link,#floatDiv a:visited{ border:1px solid #fff; background-color:#fff; color:#000;}
      #floatDiv a:hover,#floatDiv a:active{ border:1px solid #ff0; background-color:#dd0; color:#000;}
      .dropover { background:url(f3.gif) #fff no-repeat 10% 21%; border:0;}
      .dropdown { background:url(f3.gif) #fff no-repeat 10% 31%; border:0;}
      .dropup { background:url(f3.gif) #fff no-repeat 10% 21%; border:0;}
      .dropdefault { background:url(f3.gif) #fff no-repeat 10% 1%;}
      #floatDiv {  text-align:center; background:#fff; width:150px; height:90px; border:1px solid #ccc; position:absolute;left:0;top:0;display:;}
      #imgmove { background:url(ico.gif) transparent no-repeat 62% 25%; width:35px; height:40px; float:left; margin-left:20px; }
      .dropable { background:url(ico.gif) transparent no-repeat 41% 8%; width:70px; height:20px; text-align:left; float:left; margin:10px 20px 0 0;  }
  </style>
</head>

<body>
      <div id="drop" class="dropdefault">
               <span id="imgmove"> </span><span class="dropable">移动</span>
      </div>
      <div id="nav">
      <a href="#" id="defaultTag" οnclick="active('http://www.hao123.com/',this); return false;" class="px80 active">今日</a>
      <a href="#" οnclick="active('http://www.265.com/',this);return false;" class="link">收件箱<span οnclick="hid(this.parentNode);active('http://www.hao123.com/',document.getElementById('defaultTag'));">X</span>
      </a>
      </div>
      <div id="win"></div>


<script type="text/javascript">
//存储全局变量用的，吃饱了撑乱写的。
var S  = {
      'Dom' :{},
      'buffer':'',
      'push'  : function(domID,obj){
            obj = obj||'Dom';
            if(domID instanceof Array){
                     S.push(domID.shift(),obj);
                     S.push((domID.length==1)?domID[0]:domID,obj);
                     return;
            }
            S[obj][domID] = document.getElementById(domID);
      },
      'createElement':function(elementType,par/*parent element*/,att){
            var buffer = document.createElement(elementType);
            for(var property in att){
                     buffer[property] = att[property];
            }
            par.appendChild(buffer);
            return buffer;
      }
};

//把Dom引用#win,#nav,#drop存在S.Dom里
S.push(['win','nav','drop']);

//在#win里添加一个iframe元素，并初始化它的属性name和src
S.Dom['iframe'] = S.createElement('iframe',S.Dom['win'],{'name':'winMain','src':'http://www.hao123.com/'});

//根据你的点击,激活对应的选项卡
//这就是那个什么“淘宝导航”撒，改变CSS类选择器
function active(url,obj) {
      if(obj.className=='hidden')return false;//阻止事件向上冒泡的变通方法
      changeURL(url);
      var tagA = S.Dom['nav'].getElementsByTagName('a');
      for(var i = tagA.length ;i>0;i--){
            tagA[i-1].className=tagA[i-1].className.replace(/active/i,'link');
      }
      obj.className =obj.className.replace(/link/i,'active');
}
function changeURL (url) {
      S.Dom['iframe'].src = url;
}

//关闭相应的选项
function hid(obj) {
      obj.className = "hidden";
}

function floatDivClick(url) {
changeURL(url);
      hid(S.Dom['div']);
      S.dropDefault();
S.Dom['drop'].οnmοuseοut=S.dropDefault;
}

//由于偷懒,事件的注册没有统一规划

S.Dom['drop'].onmouseover = function(){
this.className = 'dropover';
}
S.Dom['drop'].onmouseout = S.dropDefault =  function(){
S.Dom['drop'].className = 'dropdefault';
}
S.Dom['drop'].onmousedown = function(){
  this.className = 'dropdown';
  if(document.body.onmousedown)document.body.onmousedown =null;//阻止一些特殊情况发生
}

//显示的下拉菜单是动态生成的
//当然也可以是控制已有节点的显示于隐藏
S.Dom['drop'].onmouseup = function(){
  this.className = 'dropup';
  S.Dom['div'] = S.createElement('div',document.body,{'id':'floatDiv'});
  S.Dom['div'].style.top =document.body.offsetTop + S.Dom['drop'].offsetTop + S.Dom['drop'].offsetHeight-5+"px";
  S.Dom['div'].style.left=document.body.offsetLeft + S.Dom['drop'].offsetLeft +"px";
  S.Dom['div'].innerHTML  = '<a href="#" οnclick="floatDivClick(/'http://www.baidu.com//');  return false;">baidu</a>'
  S.Dom['div'].innerHTML += '<a href="#" οnclick="floatDivClick(/'http://www.yahoo.com//'); return false;">yahoo</a>'
  S.Dom['div'].innerHTML += '<a href="#" οnclick="floatDivClick(/'http://www.163.com//'); return false;">163</a>'
  S.Dom['drop'].onmouseout = null;
  document.body.onmousedown = function(){
setTimeout("hid(S.Dom['div']);S.dropDefault();",500);
      document.body.onmousedown = null;
  }

}

</script>
</body>
</html>

qiaolunihao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿126的一个效果

new document html,body{ font-size:14px;} a { display:block; width:120px; height:40px; line-height:40px; float:left; text-align:center;} a span{ margin-left:60px;
复制链接

扫一扫

专栏目录