• 01板块结构


    <div id="work-wrap" style=" " class="work-wrap">
    <div class="work-content" style="">
    <div class="work-content-body" style="">
    <div class="number" style="font-size:90px;150px;font-family:'宋体';padding-left:20px">03</div>
    <div class="title" style="280px;text-align:right;padding-top:30px;font-family:'宋体';">
    <h2 style="color:#666;font-size:22px;" >淘钢云商金融服务平台</h2>
    <p style="color:#666;font-size:16px;">financial service platform</p>
    </div>
    <div class="centerImg" style="margin-left:20px;">
    <img src="../../images/20200107/mg003.png" />
    </div>
    <div class="boody-des" style="340px;color:#666;letter-spacing:2px;line-height:26px;margin-left:20px;margin-top:40px;">
    <p style="font-size:16px;">如何赊销采购商品?</p>
    </div>
    <div class="close open"></div>

    </div>
    <div class="work-detail" style="display:none;">
    <p style="1000px;font-size:14px;color:#666;letter-spacing:2px;line-height:22px;margin-left:60px;margin-bottom:20px;text-indent:2em;">
    现货商城选购商品-下单-联系我们。
    </p>
    </div>
    </div>
    </div>

    #work-wrap .work-content{
    1200px;
    border-bottom:2px dashed #e0e0e0;
    margin-bottom:50px;

    }
    #work-wrap .work-content .work-detail{
    display:none;
    margin-left:45px;
    }
    #work-wrap .work-content .work-content-body{
    height:116px;
    padding-bottom:30px;
    }
    #work-wrap .work-content .work-content-body *{
    float:left;

    }
    #work-wrap .work-content .work-content-body .close{
    67px;
    height:67px;
    background:url(../images/20200107/open.png) no-repeat;
    cursor:pointer;
    margin-left:60px;
    margin-top:20px;
    transition:all 0.5s ease 0s;

    }
    #work-wrap .work-content .work-content-body .close.open{
    background:url(../images/20200107/open.png) no-repeat 0 -67px;
    transition:all 0.5s ease 0s;

    }

    <script>
    var oDiv=$('.work-wrap');
    var ocenterImgs=oDiv.find('.centerImg');
    var oIcons=oDiv.find('.close');
    var oDteail=oDiv.find('.work-detail');
    var nowIndex=0;

    ocenterImgs.add(oIcons).hover(function(){
    $(this).addClass('animated tada')
    },function(){
    $(this).removeClass('animated tada')
    })
    function goSlide(){
    if(oIcons.eq(nowIndex).hasClass('open')){
    oDteail.stop().slideUp()
    oIcons.removeClass('open')

    }else{
    oDteail.stop().slideUp(300).delay(300).eq(nowIndex).slideDown(300);
    oIcons.removeClass('open').eq(nowIndex).addClass('open')
    }

    }
    oIcons.click(function(){

    nowIndex=oIcons.index($(this));
    goSlide()
    })
    ocenterImgs.click(function(){
    nowIndex=ocenterImgs.index($(this));
    goSlide()


    })
    </script>

  • 相关阅读:
    Decoration4:分页展示
    Decoration3:增删改的实现
    Decoration2:引入Angularjs显示前台一条数据
    SqlServer 查看被锁的表和解除被锁的表
    Quarz.net 设置任务并行和任务串行
    第三方博客平台足迹
    Oracle PL/SQL Developer 上传下载Excel
    SSRS使用MySql作为数据源遇到的问题。
    "类工厂模式"改写SqlHelper
    Centos7 redis 5.0 服务设置、启动、停止、开机启动
  • 原文地址:https://www.cnblogs.com/wensx/p/12169644.html
Copyright © 2020-2023  润新知