그림 상하 전환 효과

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>  jQuery         (     )</title>
<link rel="stylesheet" href="http://mrthink.net/demo/css/base.css" />
<link rel="shortcut icon" type="image/x-icon" href="http://mrthink.net/wp-content/themes/zsofa/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
/*demo css*/
#demo h2{background:#a40000; font-size:12px; color:#fff; font-weight:normal; text-align:center; width:100px; height:25px;line-height:25px; margin:30px 0 0 20px}
#demo ul{width:800px; height:300px; background:#eee; overflow:hidden;margin-bottom:20px;border:2px solid #a40000}
#demo li{height:30px;text-indent:15px; font-size:12px; line-height:30px;list-style:none}
#demo {height:300px;overflow:hidden;}
</style>
<script>
$(function(){
	//    @Mr.Think
	var _wrap=$("#demo");//      
	var _interval=1000;//        
	var _moving;//       
	_wrap.hover(function(){
		clearInterval(_moving);//          ,    
	},function(){
		_moving=setInterval(function(){
			var _field=_wrap.find('ul:first');//             ,li:first      
			var _h=_field.height();//        
			_field.animate({marginTop:-_h+'px'},600,function(){//    margin ,     
				_field.css('marginTop',0).appendTo(_wrap);//   ,    margin   ,      ,      
			})
		},_interval)//         _interval
	}).trigger('mouseleave');//     ,    mouseleave,     
});
</script>
</head>
<body>

<div id="demo">
	<ul style=" width:800px; height:400px;">
		<li style="float:left;"><img  src="imgs/index_2.png"></li>
		<li style=" float:left;"><img  src="imgs/index-3.png"></li>
	</ul>
	<ul style=" width:800px; height:400px;">
		<li style="float:left;"><img src="imgs/index_2.png"></li>
		<li style="float:left;"><img  src="imgs/index-3.png"></li>
	</ul>
</div>

</body>
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[전] 자바 로 pdf 를 jpg 그림 으로 변환 하 는 코드

이 코드 는 pdf 를 jpg 그림 으로 변환 할 수 있 습 니 다. 그림 이 뚜렷 하 지 는 않 지만 충분히 사용 할 수 있 습 니 다. 표지 의 그림 만 문서 의 미리 보기 그림 을 만 들 고 싶 기 때 문 입 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

그림 상하 전환 효과

좋은 웹페이지 즐겨찾기