Home >Web Front-end >JS Tutorial >jQuery-like Baidu paging footprint effect code_jquery

jQuery-like Baidu paging footprint effect code_jquery

WBOYOriginal: 2016-05-16 15:34:271375browse

The example in this article describes the imitation Baidu pagination footprint effect code implemented by jQuery. Share it with everyone for your reference, the details are as follows:

This is a pagination footprint effect similar to Baidu. Based on jquery, the principle is that all odd-numbered footprint elements are given different styles, and other non-odd-numbered elements follow the default style.

Parameter description:

obj is all odd elements
Even the current click triggers the event
bg is the footprint element
active_bg is the background of the footsteps after clicking

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-f-baidu-page-style-codes/

The specific code is as follows:

<!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>

I hope this article will be helpful to everyone in jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Write your own javascript front-end wait control_javascript skillsNext article：Write your own javascript front-end wait control_javascript skills

See more

jQuery-like Baidu paging footprint effect code_jquery

Related articles