HTML5----图片或文字指定位子隐藏到显示动态效果

图片或文字隐藏到显示动态效果

各小图从一个位子过度移动显示到指定位子

CSS:

left0{position:absolute;top:0px; left:100px;

opacity: 0;filter:alpha(opacity=1);
-webkit-transition: all 1.2s ease .6s;
-moz-transition: all 1.2s ease .6s;
transition: all 1.2s ease .6s;

/*以下为自转动画*/
/* webkit chrome, safari, mobile */  
-webkit-animation-name: spin;   
-webkit-animation-duration: 12s;
-webkit-animation-iteration-count: 1;   /*1:自转一周; infinite:无限的自转*/
-webkit-animation-timing-function: linear;  

/* mozilla ff */  
-moz-animation-name: spin;   
-moz-animation-duration: 12s; 
-moz-animation-iteration-count: 1;   
-moz-animation-timing-function: linear;  

/* microsoft ie */  
-ms-animation-name: spin;   
-ms-animation-duration: 12s; 
-ms-animation-iteration-count: 1;   
-ms-animation-timing-function: linear; 

/* Opera */  
-o-animation-name: spin;   
-o-animation-duration: 12s; 
-o-animation-iteration-count: 1;   
-o-animation-timing-function: linear; 
}

.danmian { opacity: 1; filter:alpha(opacity=100);}

.mob-bd .anim .danmian .left0{ left:-40px}    /*将从左-40px向0px过度平滑显示*/

/**------按钮--0.3s过度到显示----------**/
.download-button:hover
{ background:#00aeff; 
-webkit-transition: all .5s ease .3s;
-moz-transition: all .5s ease .3s;
transition: all .5s ease .3s;
}

滑到一指定高度响应事件

JS:

<script type="text/javascript">
$(window).scroll( function(){
		scrollList();
})
function scrollList(){
	if($(window).scrollTop() > 140){
		$('.left0').addClass('danmian');}		
	if($(window).scrollTop() > 240){
		$('.left1').addClass('danmian');}

}
scrollList();
</script>