Показать сообщение отдельно
  #17 (permalink)  
Старый 06.07.2015, 23:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sash003,

<!DOCTYPE HTML>



<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <style type="text/css">
   p{
     height: 200px;
     background-color: #0000CC;
   }

   </style>
</head>

<body>

<p></p>
<script>
function _init_(el){
       this.s = document.querySelectorAll(el);
   }

 // главная и самая сложная функшн
 function _A_(el){
     return new _init_(el)
 }

_init_.prototype.css = function(obj){
    if(typeof obj === 'object'){
     for (var e = 0; e < this.s.length; e++){
         for (i in obj){
         this.s[e].style[i] = obj[i];
     }
     }
     return this;
    }
    else {
        if(obj === 'width') return this.s[0].offsetWidth;
        if(obj === 'height') return this.s[0].offsetHeight
        else return this.s[0].style[obj] || getComputedStyle(this.s[0])[obj];
    }
}

_init_.prototype.attr = function(){

}

_init_.prototype.slideUp = function (duration){
   var self = this;
   this.css({'overflow' : 'hidden'});
   var height = parseInt(this.css('height'));
   for(var  i = 1; i <= height ; i++){
       (function(i){
          setTimeout(function(){
                    self.css({'height' : (height-i)+'px'});  // this.css is not a function. хотя overflow устанавливает перед этим
          }, i*duration/height);
       })(i);
    }
    return this;
}

var x = _A_("p");
x.slideUp(3000)
</script>
</body>

</html>
Ответить с цитированием