js代码汇总(五)...

时间：2010-08-10 来源：kiba518

网页上浮动滑出的DIV层，可以用作广告，也可以布置一些导航菜单，基本上没用图片，为了更好的展现功能，因此没有过多美化，这里使用了外围的浮动框解决了有可能出现的横向滚动条问题。

<!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=gb2312" />
<title>从右向左缓缓浮出的网页浮动层广告</title>
<script language="javascript">
var $ = function (d){return document.getElementById(d)};
var CLS={
   create: function() {
   return function() {
  this.$ADD = function (fn){CLS.add(this,fn)};
     this.init.apply(this, arguments);
   }
   },
   add:function (obj,fn){
    fn.apply(obj,arguments);
   },
   enterFrame:function (){
     this.onEnterFrame=function (){};
  this.$PLAY = function (g){
   this.enterFrameP = this.enterFrameP || 10;
   this.CLStimeIndex = CLS.ontimes.length;
   CLS.ontimes.push(this);
   window.clearTimeout(this.enterFrameTimeout);
   window.clearInterval(this.enterFrameInterval);
   if(g)this.enterFrameTimeout = window.setTimeout('CLS.ontimes['+this.CLStimeIndex+'].enterFrameInterval=window.setInterval("CLS.ontimes['+this.CLStimeIndex+'].onEnterFrame()",'+this.enterFrameP+')',parseInt(g*1000));
   else this.enterFrameInterval = window.setInterval("CLS.ontimes["+this.CLStimeIndex+"].onEnterFrame()",this.enterFrameP);
  }
  this.$STOP = function (){
   window.clearInterval(this.enterFrameInterval);
  }
  this.$SET = function (p){
   this.enterFrameP = p;
  }
   },
   ontimes:new Array()
};
CLS.Marquee = CLS.create();
CLS.Marquee.prototype = {
   init:function (button,box,speed){
      this.box = $(box);
   this.tit = $(button)
   this.kong = $("kong");
   this.onOpen = true;
   this.show = false;
   this.time = 0;
   this.speed = speed;
   this.kong.style.height = this.box.offsetHeight +"px";
   this.Maxw = this.box.offsetWidth-this.tit.offsetWidth;
   this.box.style.right = -this.box.offsetWidth + "px";
   this.boxTop = this.kong.offsetTop;
   var _t = this;
   this.tit.onclick = function (){
     this.show = true;
     if(_t.onOpen){
    _t.onEnterFrame = _t.close;
    _t.onOpen = false;
  }else{
    _t.onEnterFrame = _t.open;
    _t.onOpen = true;
  }
  _t.$PLAY();
   };
   this.$ADD(CLS.enterFrame);
   this.onEnterFrame = this.open;
   this.$PLAY();
   },
   open:function(){
      this.tit.innerHTML = "-";
      var _r = parseInt(this.box.style.right);
   var _b = (0 - _r)/30;
   this.box.style.right = (_r + _b) +"px";
   this.kong.style.top = (document.documentElement.scrollTop + this.boxTop) +"px";
   if(_b==0 && !this.show){
    this.time +=10;
    if(this.time>=this.speed*1000){
      this.show = true;
   this.onOpen = false;
   this.$STOP();
      this.onEnterFrame = this.close;
   this.$PLAY();
    }
   }
   },
   close:function (){
      this.tit.innerHTML = "+";
      var _r = parseInt(this.box.style.right);
   var _b = (-this.Maxw - _r)/5;
   this.box.style.right = Math.round(_r + _b) +"px";
   this.kong.style.top = (document.documentElement.scrollTop + this.boxTop) +"px";
   }
};
window.onload = function (){
setTimeout(function(){new CLS.Marquee("tit","abc",10)},3000);//tit是点击按钮的Id ，abc是浮动块的ID,10是显示时长
};
</script>
<style type="text/css">

</style>
</head>
<body style="margin:0px;">

<div id="kong">

<div id="abc">
   <div id="tit">-</div>
   <div class="right">
<a href="/">网页上从右边缓缓弹出的广告框效果</a></div>
</div>
</div>
3秒后弹出
</body>
</html>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

CSS制作列表，这是比较基础的技巧了，不过有很多朋友还是用不好，那么看一下本款列表，适合作新闻、下载排行，可以区分颜色，采用一行两列布局，这是最标准的一种CSS布局方式了

#movie_rank { }
.box2 { border:1px solid #ADDFF2; text-align:left; overflow:hidden; color:#9C9C9C; text-align:left;}
.box2 { margin-bottom:7px;}
.box2 h2{ background:#EEF7FE; line- overflow-y:hidden; border-bottom:1px solid #ADDFF2; color:#1974C8; font-size:12px; padding:0px 8px;}
.box2 h2 a.more{ float:right; text-decoration:underline; background:url() no-repeat 100% -123px; padding-right:8px; font-weight:normal;}
.box2 h2 span{ margin-left:5px; font-weight:normal; color:#B9B7B8;}
.box2 .inner{ padding:8px; line- overflow:hidden; color:#3083C7;}
.box2 a{ color:#3083C7; white-space:nowrap;}
.rank_list{ line- margin:auto; padding-top:5px;}
.rank_list li{ margin-bottom:8px; width:290px; padding-left:20px; white-space:nowrap; overflow:hidden; position:relative;}
.rank_list li.top3 em{ background:#FFE4B7; border:1px solid #FFBB8B; color:#FF6800;}
.rank_list em{ position:absolute; left:0; top:0; width:12px; border:1px solid #B1E0F4; color:#6298CC; font-style:normal; font-size:10px; font-family:Arial; background:#E6F0FD; text-align:center; line- overflow:hidden;}
.rank_list span{ position:absolute; width:60px; color:#B7B7B7; text-align:right; background:#fff; left:110px;}
#movie_rank .rank_list span{ position:absolute; width:40px; color:#B7B7B7; text-align:right; background:#fff; left:260px;}
-->
</style>
</head>
<body>
<div class="box2" id="movie_rank">
<h2><a href="#" class="more">更多</a>源码排行</h2>
<div class="inner">
    <ul class="rank_list">
      <li class="top3"><em>1</em><a href="#">艾恩An-Upload 无组件上传类</a><span>21</span></li>
      <li class="top3"><em>2</em><a href="#">EasySlide jQuery图片轮显</a><span>528</span></li>
      <li class="top3"><em>3</em><a href="#">通用Ajax无刷新表彰验证类</a><span>232</span></li>
      <li><em>4</em><a href="#">支持中文的鼠标取词VB源码</a><span>74</span></li>
      <li><em>5</em><a href="#">通用Ajax无刷新表彰验证类</a><span>56</span></li>
      <li><em>6</em><a href="#">EasySlide jQuery图片轮显</a><span>85</span></li>
      <li><em>7</em><a href="#">支持中文的鼠标取词VB源码</a><span>25</span></li>
      <li><em>8</em><a href="#">多样式链接提示框组件</a><span>85</span></li>
      <li><em>9</em><a href="#">类似lightbox的无刷新图片显示插件</a><span>41</span></li>
      <li><em>10</em><a href="#">通用Ajax无刷新表彰验证类</a><span>62</span></li>
    </ul>
</div>
</div>
</body>
</html>

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

JavaScript动态打开、关闭一个DIV层的简洁代码，非常适合学习前台制作的朋友，特别是想学习JS技术的朋友，本示例用不同颜色区分出打开层时的动画过程，再配合JavaScript代码，有助于您理解Js的使用，感觉是很实用的。

<!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>
<title>层展开、关闭</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#main{width:500px; margin:100px; border:1px solid red}
#test{border:1px solid red;display:none;width:10px; background:yellow}
</style>
</head>
<body>
<input type="button" value="打开" id="bt" />
<input type="button" value="关闭" id="bt1" />
<div id="main"><div id="test"></div>
</div>
</body>
</html>
<script type="text/javascript">
function $ (o) {
      return document.getElementById(o);
}
function XslideDown(obj,type,mX,num) {
            if(!type){return;}
                        try{
                         var type1=type=="height"?"marginTop":"marginLeft";
                         var type2=type=="height"?"top":"left";
                                 XSetCss(obj,[type1,XgetOffset(obj)[type2]+"px"]);
                                XSetCss(obj,[type,XgetOffset(obj)[type]+num+"px"]);
                        if(XgetOffset(obj)[type]<mX){
                         setTimeout(function(){XslideDown(obj,type,mX,num);},10);
                        }
                        else{
                                  XSetCss(obj,[type,mX])
                         }
                        }
                        catch(e){}
                }
function XslideUp(obj,type,mX,num) {
            if(!type){return;}
                        try{
                        var type1=type=="height"?"marginTop":"marginLeft";
                        var type2=type=="height"?"top":"left";
                                XSetCss(obj,[type1,XgetOffset(obj)[type2]+"px"]);
                                XSetCss(obj,[type,XgetOffset(obj)[type]-num+"px"]);
                        if(XgetOffset(obj)[type]>mX){
                         setTimeout(function(){XslideUp(obj,type,mX,num);},1);
                        }
                        else{
                                  XSetCss(obj,[type,mX])
                                  obj.style.display="none";
                         }
                        }
                        catch(e){}
                }
function XSetCss(obj,cssArgs){
        if(arguments.length==2)
        {
          if(cssArgs.constructor==Object){
          for(var o in cssArgs)
                        {
                                if(obj.style[o]!="undefiend")
                                {
                                  obj.style[o]=cssArgs[o];
                                }
                        }
                }
         if(cssArgs.constructor==Array&&cssArgs.length==2){
                                obj.style[cssArgs[0]]=cssArgs[1];

         }
        }
}
function XgetOffset (obj) {
                 return {
                                                                               width:obj.offsetWidth,
                                        top:parseInt((obj.parentNode.offsetHeight-obj.offsetHeight)/2),
                                        left:parseInt((obj.parentNode.offsetWidth-obj.offsetWidth)/2)
                                }
}
function XopenDiv(o){
                o.style.display="block";
                XslideDown(o,"width",400,10);
            XslideDown(o,"height",400,10);
}
function XcloseDiv(o){
                XslideUp(o,"width",10,10);
            XslideUp(o,"height",10,10);
}
$("bt").onclick=function(){
                XopenDiv($("test"))
}
$("bt1").onclick=function(){

        XcloseDiv($("test"))
}
</script>