| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
12年前发布

利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果

   主要运用css的border属性来实现三角形,jQuery实现切换和选中的效果:

 

html代码如下:<div class="page">

<a href=""><span>上一页</span></a>

<a href=""><span>1</span><i></i></a>

<a href=""><span>2</span><i></i></a>

<a href=""><span>3</span><i></i></a>

<a href=""><span>4</span><i></i></a>

<a href=""><span>5</span><i></i></a>

<a href=""><span>6</span><i></i></a>

<a href=""><span>7</span><i></i></a>

<a href=""><span>8</span><i></i></a>

<a href=""><span>下一页</span></a>

</div>

 

css代码如下:

 

<style type="text/css">
* {
    margin:0;
    padding:0;
    font-size:12px;
}
.page {
    margin:110px auto;
    width:1004px;
    padding:0 10px;
}
.page a, .page strong {
    display:inline-block;
    position:relative;
    margin:0 5px;
    text-decoration:none;
    color:#999;
}
.page a span, .page strong span {
    border:1px solid #ccc;
    line-height:18px;
    padding:0 6px;
    height:18px;
}
.page strong span {
    font-weight:bold;
    color:#000;
}
.page i {
    font-style:normal;
    position:absolute;
    left:0px;
    top:-30px;
    width:0;
    height:0;
    border:10px solid #000;
    border-color: transparent transparent #FF0000 transparent;
    border-style:dashed dashed solid dashed;
    line-height:0;
    font-size:0;
}
.page i.current {
    border:10px solid #000;
    border-color: #CCC transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
</style>

 

jQuery部分代码如下:

 

<script type="text/javascript">
$(document).ready(function(){
    $(".page i:even").css("top", "-40px");
    $(".page a").click(function(){
        $(this).css({fontWeight:"bold",background:"#ccc",color:"#fff"}).find("i").addClass("current");
        $(this).siblings().css({fontWeight:"normal",background:"#fff",color:"#999"}).find("i").removeClass("current");
        return false;
        
        })
    })
</script>

 

简单的预览效果:

 利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1346684586584.html
jQuery jQuery分页插件