L'exemple de cet article décrit le code d'effet d'empreinte de pagination d'imitation Baidu implémenté par jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Il s'agit d'un effet d'empreinte de pagination similaire à Baidu. Basé sur jquery, le principe est que tous les éléments d'empreinte impairs reçoivent des styles différents et que les autres éléments non impairs suivent le style par défaut.
Description du paramètre :
obj est constitué d'éléments impairs
Même le clic en cours déclenche l'événement
bg est l'élément empreinte
active_bg est l'arrière-plan des pas après avoir cliqué sur
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/jquery-f-baidu-page-style-codes/
Le code spécifique est le suivant :
<!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>
J'espère que cet article sera utile à tous ceux qui programment jQuery.