注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

CSS+JS实现浮动隐藏  

2009-03-18 11:34:30|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

CSS部分:

.qqBox{
 width:132px;
 height:auto;
 overflow:hidden;
 position:absolute;
 right:0;
 top:274px;
}
.qqlv{
 width:22px;
 height:120px;
 overflow:hidden;
 position:relative;
 float:right;
 z-index:50px;
 background-image:url("qqonlinebg.gif");
 background-repeat:no-repeat;
}
.qqkf{
 width:120px;
 height:100px;
 overflow:hidden;
 right:0;
 top:0;
 z-index:99px;
 border:6px solid #D19906;
 background:#fff;
}

 

HTML部分:

将代码放至BODY最底端

<div class="qqBox" id="divQQbox">
<div class="qqlv" id="meumid" onmouseover="show()"></div>
<div class="qqkf" style="display:none;" id="contentid" onmouseout="hideMsgBox(event)"></div>
</div>

 

JS部分:

将代码放在最下端

<script>
function showandhide(h_id,hon_class,hout_class,c_id,totalnumber,activeno) {
    var h_id,hon_id,hout_id,c_id,totalnumber,activeno;
    for (var i=1;i<=totalnumber;i++) {
        document.getElementById(c_id+i).style.display='none';
        document.getElementById(h_id+i).className=hout_class;
    }
    document.getElementById(c_id+activeno).style.display='block';
    document.getElementById(h_id+activeno).className=hon_class;
}

var tips;
var theTop = 274;
var old = theTop;
function initFloatTips()
{
 tips = document.getElementById('divQQbox');
 moveTips();
}

function moveTips()
{
     var tt=50;
    if (window.innerHeight)
    {
     pos = window.pageYOffset 
    }else if (document.documentElement && document.documentElement.scrollTop) {
    pos = document.documentElement.scrollTop 
    }else if (document.body) {
      pos = document.body.scrollTop; 
    }
   
    pos=pos-tips.offsetTop+theTop;
    pos=tips.offsetTop+pos/10;
    if (pos < theTop){
    pos = theTop;
    }
    if (pos != old) {
    tips.style.top = pos+"px";
    tt=10;  //alert(tips.style.top); 
    }
    old = pos;
    setTimeout(moveTips,tt);
}
initFloatTips();

 if(typeof(HTMLElement)!="undefined")    //给firefox定义contains()方法,ie下不起作用
  { 
    HTMLElement.prototype.contains=function (obj) 
    { 
     while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素
        if(obj==this) return true; 
         obj=obj.parentNode;
         } 
     return false; 
    }
 }

function show()
{
 document.getElementById("meumid").style.display="none"
 document.getElementById("contentid").style.display="block"
}
 function hideMsgBox(theEvent){
   if (theEvent){
  var browser=navigator.userAgent;
  if (browser.indexOf("Firefox")>0){  //如果是Firefox
      if (document.getElementById("contentid").contains(theEvent.relatedTarget)) {  //如果是子元素
    return
   }
  }
  if (browser.indexOf("MSIE")>0 || browser.indexOf("Presto")>=0){  //如果是IE
         if (document.getElementById('contentid').contains(event.toElement)) {  //如果是子元素
       return;  //结束函式
      }
  }
   }
   document.getElementById("meumid").style.display = "block";
   document.getElementById("contentid").style.display = "none";
  }
</script>

备注:可以将HTML部分跟JS部分合写成一个JS文件进行调用

  评论这张
 
阅读(291)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017