上下箭头替换内容功能实现

     过了一个春节回来，发现好多朋友在找工作。然后就是身边的师姐、师弟，空闲的时候都会聊一下。师姐说自毕业后一直都是做着P图和简单的网页设计，工作有点枯燥，想着重新找份工作，但又不知道能做什么？

还有师弟推荐了位应届毕业的师妹，专业是物联网应用技术，想要找份美工或者前端的工作。早上刚问公司人事，很不凑巧，暂不招聘实习。说了这些，其实也是想在这个平台上帮着推荐，如果有哪位公司招聘实习生，

可以留下招聘信息的哟。

 好了，回到正题。页面代码如下：

  

 <div class="wrap">
        <div class="box"><p>第一个盒子</p><div class="bom"><a class="up" href="javascript:;"></a><a class="down" href="javascript:;"></a></div></div>
        <div class="box"><p>第二个盒子</p><div class="bom"><a class="up" href="javascript:;"></a><a class="down" href="javascript:;"></a></div></div>
        <div class="box"><p>第三个盒子</p><div class="bom"><a class="up" href="javascript:;"></a><a class="down" href="javascript:;"></a></div></div>
    </div>

样式如下：

*{
    margin: 0;
    padding: 0;
}
img{
    border:0;
}
ol, ul ,li{list-style: none;} 
 .wrap{
        width: 500px;
        height: 500px;
        margin: 100px auto 0 auto;
        background: #eee;
    }
    .box{
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ddd;
        position: relative;
        overflow:hidden;
        cursor: pointer;
    }
    .box p{
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align:left;
        margin: 0;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .bom{
        width: 100%;
        height: 30px;
        position: absolute;
        left: 0;
        bottom: -30px;
        background: rgba(0,0,0,0.5);
        padding-top: 5px;
        box-sizing: border-box;
        z-index: 99;
    }
    .bom a{
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-left: 10px;
    }
    .bom a.up{
        background: url(../img/up.png);
    }
    .bom a.down{
        background: url(../img/down.png);
    }

js如下：

 $(function(){
           $('.box').on('mouseover',function(){
              $(this).children('.bom').animate({"bottom":0},200);
           })
            $('.box').on('mouseleave',function(){
              $(this).children('.bom').animate({"bottom":-30},200);
           })

            // 向下
            $('.box a.down').on('click',function(){
                var phtm = $(this).closest('.box').children('p').html();
                // console.log(phtm);  //获取到第一个盒子的内容，打印输出
                var p2htm = $(this).closest('.box').next().children('p').html();
                // console.log(p2htm);  //获取到第二个盒子的内容，打印输出
                $(this).closest('.box').children('p').html(p2htm);
                $(this).closest('.box').next().children('p').html(phtm);
            })

            // 向上
            $('.box a.up').on('click',function(){
                var uhtm = $(this).closest('.box').children('p').html();
                // console.log(uhtm);  //获取到第一个盒子的内容，打印输出
                var u2htm = $(this).closest('.box').prev().children('p').html();
                // console.log(u2htm);  //获取到第二个盒子的内容，打印输出
                $(this).closest('.box').children('p').html(u2htm);
                $(this).closest('.box').prev().children('p').html(uhtm);
            })


         })

效果图：

点击向下箭头：

 最后附上文件下载地址：http://files.cnblogs.com/files/cyppi/0208.zip