집 >웹 프론트엔드 >JS 튜토리얼 >jQuery와 유사한 Baidu 페이징 공간 효과 code_jquery

jQuery와 유사한 Baidu 페이징 공간 효과 code_jquery

WBOY원래의: 2016-05-16 15:34:271376검색

이 기사의 예에서는 jQuery로 구현된 Baidu 페이지 매김 공간 효과 코드 모방을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

바이두(Baidu)와 유사한 페이지네이션 풋프린트 효과로, 홀수 번호가 있는 모든 요소에 서로 다른 스타일을 부여하고 홀수가 아닌 다른 요소는 기본 스타일을 따르는 것이 원칙입니다.

매개변수 설명:

obj는 모두 이상한 요소입니다
현재 클릭만으로도 이벤트가 발생합니다
bg는 발자국 요소입니다
active_bg는

을 클릭한 후의 발자국 배경입니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/jquery-f-baidu-page-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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度分页足迹</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
.page{padding:100px 0;zoom:1}
.page:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.page span{position:relative;margin:0 2px;border:solid 1px #ccc;float:left;}
.page span a{padding:2px 5px;cursor:pointer;}
.page span i{display:block;height:10px;width:10px;background:#ccc;border-radius:50%;position:absolute;left:50%;top:-20px;margin-left:-5px;}
.page span i.active_i{background:red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
 function pageStyle(obj,even,bg,active_bg){
  /*参数说明：
  obj为所有奇数元素
  even当前所要点击触发事件
  bg为足迹元素
  active_bg为点击后的足迹背景
  作者：zoowar
  */
  $(obj).css("top","-30px");
  $(even).click(function(){
  $(this).siblings(bg).addClass(active_bg).parent().siblings().find(bg).removeClass(active_bg);
  })
 }
 pageStyle(".page i:even",".page a","i","active_i");
 })
</script>
</head>
<body>
<div class="page">
 <span><a>上一页</a></span>
 <span><a>1</a><i class="active_i"></i></span>
 <span><a>2</a><i></i></span>
 <span><a>3</a><i></i></span>
 <span><a>4</a><i></i></span>
 <span><a>5</a><i></i></span>
 <span><a>5</a><i></i></span>
 <span><a>6</a><i></i></span>
 <span><a>7</a><i></i></span>
 <span><a>8</a><i></i></span>
 <span><a>9</a><i></i></span>
 <span><a>下一页</a></span>
</div>
</body>
</html>

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：자신만의 자바스크립트 프런트엔드 대기 control_javascript 기술을 작성하세요.다음 기사：자신만의 자바스크립트 프런트엔드 대기 control_javascript 기술을 작성하세요.

jQuery와 유사한 Baidu 페이징 공간 효과 code_jquery

관련 기사