js元素在中心点由小变大显示效果和隐藏

快乐打工仔 分类:实例代码

在不少的功能中有类似的,效果,那么就是元素能够从中心点进行放大和缩小。

下面就通过代码实例介绍一下如何利用javascript实现此功能。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#main{
  width:500px; 
  margin:100px;
  height:500px;
  border:1px solid red
}
#test{
  border:1px solid red;
  display:none;
  width:10px;
  height:10px; 
  background:yellow
}
</style>
<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 {
    height:obj.offsetHeight,
    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);
}
 
window.onload=function(){
  $("bt").onclick=function(){
    XopenDiv($("test"))
  }
  $("bt1").onclick=function(){
    XcloseDiv($("test"))
  }
}
</script>
</head>
<body>
<input type="button" value="打开" id="bt" />
<input type="button" value="关闭" id="bt1" />
<div id="main">
  <div id="test"></div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function $(o){  

  return document.getElementById(o);

},模拟实现了jQuery的id选择器。

(2).function XslideDown(obj,type,mX,num) {},此函数实现了div元素扩展效果,第一个参数是要扩展的元素对象,第二个参数是width或者height属性,第三个参数规定最大的尺寸,第四个参数表示每次增加的数目。

(3).if(!type){return;},如果不存在,那么直接返回。

(4).try{} catch{}语句这里也是为了安全起见。

(5).var type1=type=="height"?"marginTop":"marginLeft",如果type是"height",那么就返回marginTop,否则返回marginLeft。

(6).var type2=type=="height"?"top":"left",和上面一样的道理。

(7).XSetCss(obj,[type1,XgetOffset(obj)[type2]+"px"]),设置元素的左边距和上边距。

(8).XSetCss(obj,[type,XgetOffset(obj)[type]+num+"px"]),设置元素的width或者height值,每一次执行都会增加一定的尺寸。

(9).if(XgetOffset(obj)[type]<mX){

  setTimeout(function(){XslideDown(obj,type,mX,num);},10); 

},如果元素还没有到达最大尺寸,那么就采用递归的方式继续执行上面的代码。

(10).else{

  XSetCss(obj,[type,mX+"px"])

},否则的话,设置为最大尺寸。

(11).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]; 

    }

  }

},上面的代码就是设置元素的css属性,第一个参数就是元素对象,第二个参数是一个Object对象或者数组。

只是这两种不同的数据类型,读取属性值得方式不同。

(12).function XgetOffset(obj){

  return {

    height: obj.offsetHeight,

    width: obj.offsetWidth,

    top:parseInt((obj.parentNode.offsetHeight-obj.offsetHeight)/2),

    left:parseInt((obj.parentNode.offsetWidth-obj.offsetWidth)/2)

  }

},此方法返回一个对象,对象包含四个属性,分别是元素的长宽,还有元素能够实现居中的上边距和左边距尺寸。

二.相关阅读:

(1).三元运算符可以参阅javascript 三元运算符一章节。

(2).setTimeout()方法可以参阅setTimeout()一章节。

(3).constructor属性可以参阅javascript constructor一章节。

(4).for in语句可以参阅javascript for in一章节。

(5).offsetHeight可以参阅js offsetHeight一章节。

(6).parseInt()可以参阅javascript parseInt()一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容