仿京东右侧导航栏jquery特效样式伸缩

最新推荐文章于 2022-12-11 19:23:13 发布

pursuePeng

最新推荐文章于 2022-12-11 19:23:13 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/wujinpengjiusan/article/details/89458762

版权

在这里插入图片描述
点击哪一个隐藏的内容显示出来.



jquery布局
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".item").hover(function(){
        var index = $(this).index()
        $(this).css("background","red")
        $("span").eq(index).show(200)
    },function(){
        var index = $(this).index()
        $(this).css("background","#aaa")
        $("span").eq(index).hide()
    })
})
</script>

html布局
每个li里包了一个span标签和p标签 p标签储存图片路径
<body>
<ul class="items">
    <li class="item">
    <span>京东会员</span>
    <p><img src="小logo/toolbars.png" alt="" /></p></li>
    <li class="item">
    <span>购物车</span><p>
    <img src="小logo/toolbars1.png" alt="" /></p></li>
    <li class="item">
    span>我的关注</span>
    <p><img src="小logo/toolbars2.png" alt="" /></p></li>
    <li class="item">
    <span>我的足迹</span>
    <p><img src="小logo/toolbars3.png" alt="" /></p></li>
    <li class="item">
    <span>我的信息</span>
    <p><img src="小logo/toolbars4.png" alt="" /></p></li>
    <li class="item">
    <span>咨询JIMI</span>
    <p><img src="小logo/toolbars5.png" alt="" /></p></li>
</ul> 
</body>


css布局
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
    span{
        position:fixed;
        right:40px;
        width: 80px;
        height: 43px;
        line-height: 43px;
        background: red;
        color: white;
        text-align: center;
        display: none;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
    }
    li{ 
        width:43px;
        height: 43px;
        background: #aaa;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
        margin-top:2px;
    }
    .items{
        position: fixed;
        right: 0;
        top:50px;
    }
</style>

pursuePeng

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
仿京东右侧导航栏jquery特效样式伸缩

点击哪一个隐藏的内容显示出来.jquery布局<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){ $(".item").hover(function(){ ...
复制链接

扫一扫