html css js 1

In css , set some 'objects' in css :

.content{
  display:block;
  width:360px;
  height:239px;
  margin-right:-4px;
    ">}
div>div>div{
  width:16px;
  height:16px;
 
  display:inline-block;
  float:right;
  margin:2px;
}

"."corresponds "class" (can be used in html) while"#" corresponds "id"

"div>div>div" means the third deep "div"   like   <div><div><div></div></div></div>

 

　　Then we can use it in html  :

<body>
    <div class='content'> // corresponds ".content"
    <div style='padding-right:40px'>
      <div></div> // the third deep "div"
      <div></div> // too

　　</div>

　　</div>

　　the next is to change it in js to make it dynamic

function animate(){
      $('div>div>div').each(function(id){
    $(this).css({
      position: 'relative',
      top: '-200px',
            
      opacity:0
    });
    var wait = Math.floor((Math.random()*3000)+1);
    $(this).delay(wait).animate({
      top: '0px',
      opacity: 1
    },1000);
  });
}

codes from internet and "http://runjs.cn/code/gkarvkda"  saved

posted on 2016-04-08 21:14  shadow.0xf  阅读(103)  评论(0)    收藏  举报