jquery+css动画效果

1.html页面

    
    
    
    
    
    




    时间轴
    旋转
    恢复
    漫游
    动画
    收起
    系统
    灌溉
    摄像头

 2.css----bottom.css

.web-bottom {
    width: 100vw;
    height: 64.8px;
}
.web-bottom .countyBox{
    width: 7vw;
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}
.countyBox .iconfont{
    color: #0066ff;
}
.countyBox .vertical{
    width: 1px;
    height: 30px;
    margin-top: 10px;
    background: #0066ff;
    margin-left: 1vw;
}

.dock-item2 {
    display: block;
    width: 30px;
    margin-right: 12px;
    color: #ffffff;
    position: relative;
    bottom: 0px;
    cursor: pointer;
    transition: all 0.3s;
}

.dock-item2 span {
    color: #ffffff;
    display: none;
    position: absolute;
    top: -19px;
    left: 12px;
    width: 36px;
    font-size: 12px;
}

.dock-item2 img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}
.active1{
    margin-bottom: 8px;
    margin-right: 20px;
    margin-left: 10px;
    font-size: 12px;
}
.activeImg1{
    transform: scale(1.7);
}
.activeImg2{
    transform: scale(1.2);
}
.active2{
    margin-bottom: 4px;
}

3.js---bottom.js

$('#bottomTools').on('mouseover','.dock-item2',function () {
        $(this).find('span').css('display','block');
        $(this).siblings().find('span').css('display','none');
        $(this).find('img').removeClass('activeImg1').removeClass('activeImg2')
        $(this).siblings().find('img').removeClass('activeImg1').removeClass('activeImg2')
        $(this).find('img').addClass('activeImg1')
        $(this).next(".dock-item2").find('img').addClass('activeImg2')
        $(this).prev(".dock-item2").find('img').addClass('activeImg2')

        $(this).removeClass('active1').removeClass('active2')
        $(this).siblings().removeClass('active1').removeClass('active2')
        $(this).addClass('active1')
        $(this).next(".dock-item2").addClass('active2')
        $(this).prev(".dock-item2").addClass('active2')
    })
    $('#bottomTools').on('mouseout','.dock-item2',function () {
        $(this).find('span').css('display','none');
        $(this).find('img').removeClass('activeImg1').removeClass('activeImg2')
        $(this).next().find('img').removeClass('activeImg1').removeClass('activeImg2')
        $(this).prev().find('img').removeClass('activeImg1').removeClass('activeImg2')

        $(this).removeClass('active1').removeClass('active2')
        $(this).next().removeClass('active1').removeClass('active2')
        $(this).prev().removeClass('active1').removeClass('active2')
    })
    $('#bottomTools').on('click','.dock-item2',function () {
        var _btnId = $(this).data('href')
        if(_btnId == 'timeLine'){
            
        }
        else if(_btnId == 'rotate'){//旋转-暂停
          
        }
        else if(_btnId == 'recovery'){//恢复初始视角
          
           
           
        }
        else if(_btnId == 'roam'){//漫游
           
        }
        else if(_btnId == 'animation'){
           
        }
        else if(_btnId == 'stow'){
            
        }
        else if(_btnId == 'system'){
           
        }
        else if(_btnId == 'irrigation'){
            
        }
        else if(_btnId == 'camera'){
            
        }
    })