jQuery는 shuffling effect_jquery를 사용하여 애니메이션 페이징 예제를 구현합니다.
- WBOY원래의
- 2016-05-16 15:41:361735검색
이 기사의 예에서는 셔플링 효과를 사용하여 jQuery의 애니메이션 페이징 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
이 jquery 페이징 예제는 LI 이미지 목록을 로드하고 jQuery 기술을 사용하여 이를 여러 페이지로 나누어 표시합니다. 페이징 프로세스 중에 애니메이션 효과도 추가되어 전체 페이징 효과가 매우 전문적으로 보입니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-list-page-flash-style-codes/
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery分页</title>
<style>
html,body,div,ul,li,img,button{
padding:0;
margin:0;
}
body{
background:#333;
}
img{
width:150px;
height:150px;
outline:none;
margin:5px;
vertical-align:middle;
}
#wrapBox{
width:1150px;
height:630px;
border:1px solid #000;
background:#E7E7E7;
margin:30px 0 0 65px;
position:relative;
}
ul{
position:relative;
}
ul li{
width:160px;
height:160px;
list-style:none;
position:absolute;
background:#FFF;
}
#button{
position:absolute;
left:525px;
top:580px;
}
#button button{
width:43px;
height:43px;
background:url('') no-repeat 2px;
cursor:pointer;
color:#666;
font-weight:bolder;
font-size:larger;
border:none;
}
#button button.click{
color:#A80000;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('li').each(function(index)
{
if(index < 12)
{
if(index % 4 == 0) $(this).css('left', 100 + 'px');
if(index % 4 == 1) $(this).css('left', 360 + 'px');
if(index % 4 == 2) $(this).css('left', 620 +'px');
if(index % 4 == 3) $(this).css('left', 880 + 'px');
if(index < 4) $(this).css('top', 30 + 'px');
if(4 <= index && index < 8) $(this).css('top', 220 + 'px');
if(8 <= index && index < 12) $(this).css('top', 410 + 'px');
}
else
{
$(this).css({'left':500 + 'px', 'top':500 + 'px', 'opacity':0});
}
});
var position = [
{left:880, top:410},
{left:620, top:410},
{left:360, top:410},
{left:100, top:410},
{left:880, top:220},
{left:620, top:220},
{left:360, top:220},
{left:100, top:220},
{left:880, top:30},
{left:620, top:30},
{left:360, top:30},
{left:100, top:30}
];
var animation = function(nStart, nEnd, _this)
{
var i = 1;
var bStop = false;
$(_this).attr('disabled', 'disabled');
(function hide()
{
$('li').eq(nStart - i).animate({left:500 + 'px', top:500 + 'px', opacity:0}, 'fast', function()
{
if(i == 12)
{
bStop = true;
(function show()
{
i++;
$('li').eq(nStart + nEnd - i).animate({left:position[i - 13].left + 'px', top:position[i - 13].top + 'px', opacity:1},
'fast', function()
{
if(i < 24) show();
if(i == 24) $(_this).removeAttr('disabled');
});
})();
}
if(!bStop)
{
i++;
hide();
}
});
})();
};
$('button:eq(0)').addClass('click').click(function()
{
if($(this).is('.click')) return;
$(this).addClass('click').siblings().removeClass();
animation(24, 0, $(this).siblings());
});
$('button:eq(1)').click(function()
{
if($(this).is('.click')) return;
$(this).addClass('click').siblings().removeClass();
animation(12, 24, $(this).siblings());
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="wrapBox">
<ul id="firstPage">
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
<li>
<img src="images/wall_s1.jpg" />
</li>
</ul>
<div id="button">
<button type="button">1</button>
<button type="button">2</button>
</div>
</div>
</body>
</html>
이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.