首页 > 软件开发 > JQUERY >

jQuery上下滑动选项卡效果

来源:互联网 2023-03-16 23:54:58 版权归原作者所有,如有侵权,请联系我们

jQuery上下滑动选项卡效果bo7办公区 - 实用经验教程分享!

工具/原料

  • adobe dreamweaver

方法/步骤

  • 1

    准备好需要用到的图标。bo7办公区 - 实用经验教程分享!

    jQuery上下滑动选项卡效果bo7办公区 - 实用经验教程分享!

  • 2

    新建html文档。bo7办公区 - 实用经验教程分享!

    jQuery上下滑动选项卡效果bo7办公区 - 实用经验教程分享!

  • 3

    书写hmtl代码。bo7办公区 - 实用经验教程分享!

    div class="main-page">bo7办公区 - 实用经验教程分享!

    div class="left">bo7办公区 - 实用经验教程分享!

    div class="nav-back">/div>bo7办公区 - 实用经验教程分享!

    div class="nav">bo7办公区 - 实用经验教程分享!

    div class="on">餐饮/div>bo7办公区 - 实用经验教程分享!

    div>电商/div>bo7办公区 - 实用经验教程分享!

    div>旅游/div>bo7办公区 - 实用经验教程分享!

    div>汽车/div>bo7办公区 - 实用经验教程分享!

    div>美容/div>bo7办公区 - 实用经验教程分享!

    div>新闻/div>bo7办公区 - 实用经验教程分享!

    div>家居/div>bo7办公区 - 实用经验教程分享!

    div>健康/div>bo7办公区 - 实用经验教程分享!

    /div>bo7办公区 - 实用经验教程分享!

    /div>bo7办公区 - 实用经验教程分享!

    div class="right">bo7办公区 - 实用经验教程分享!

    div class="content">bo7办公区 - 实用经验教程分享!

    div class="con-ggh">bo7办公区 - 实用经验教程分享!

    div class="zcinfo fl">bo7办公区 - 实用经验教程分享!

    ul class="clearfix">bo7办公区 - 实用经验教程分享!

    li>bo7办公区 - 实用经验教程分享!

    div class="list-pic">img alt="" src="images/214a.png" />/div>bo7办公区 - 实用经验教程分享!

    p class="item-name">快乐美食/bo7办公区 - 实用经验教程分享!

    /li>bo7办公区 - 实用经验教程分享!

    li>bo7办公区 - 实用经验教程分享!

    div class="list-pic">img alt="" src="images/214.jpg" />/div>bo7办公区 - 实用经验教程分享!

    p class="item-name">艺术蛋糕小店/bo7办公区 - 实用经验教程分享!

    /li>bo7办公区 - 实用经验教程分享!

    li>bo7办公区 - 实用经验教程分享!

    div class="list-pic">img alt="" src="images/42f.jpg" />/div>bo7办公区 - 实用经验教程分享!

    p class="item-name">美味餐厅/bo7办公区 - 实用经验教程分享!

    /li>bo7办公区 - 实用经验教程分享!

    /ul>bo7办公区 - 实用经验教程分享!

    div class="b-intro">bo7办公区 - 实用经验教程分享!

    span class="dp">解决案例介绍/span>bo7办公区 - 实用经验教程分享!

    为餐饮行业提供一站式解决方案,凭借到店、预约、点餐等功能,以及积分系统搭建、可视化后台数据管理等强大的技术支持。拓展店铺营销的新渠道。/bo7办公区 - 实用经验教程分享!

    a href="#" class="ck-m bs tc dp">查看更多/a>bo7办公区 - 实用经验教程分享!

    /div>bo7办公区 - 实用经验教程分享!

    /div>bo7办公区 - 实用经验教程分享!

    div class="ptpic-dl fr">img alt="" src="images/sj-pic-pt.png" />/div>bo7办公区 - 实用经验教程分享!

    /div>bo7办公区 - 实用经验教程分享!

    /div>bo7办公区 - 实用经验教程分享!

    /div>bo7办公区 - 实用经验教程分享!

    div class="clear">/div>bo7办公区 - 实用经验教程分享!

    /div>bo7办公区 - 实用经验教程分享!

    jQuery上下滑动选项卡效果bo7办公区 - 实用经验教程分享!

  • 4

    书写css代码。bo7办公区 - 实用经验教程分享!

    style>bo7办公区 - 实用经验教程分享!

    body{background:url(images/65.jpg) no-repeat fixed center center;}bo7办公区 - 实用经验教程分享!

    form,ul,li,ol,dl,dt,dd,p,i,h1,h2,h3,h4,h5,h6{ margin:0; padding:0}bo7办公区 - 实用经验教程分享!

    ul,li{ list-style:none} img{ border:0} .dp{ display:block}bo7办公区 - 实用经验教程分享!

    .tc{ text-align:center} .fl{ float:left} .fr{ float:right}bo7办公区 - 实用经验教程分享!

    .clear{clear:both;} .clearfix:after{content:"."; display:block; visibility:hidden; height:0; clear:both}bo7办公区 - 实用经验教程分享!

    .main-page{margin:0 auto;width:1200px}bo7办公区 - 实用经验教程分享!

    .main-page .left{ padding-right: 25px; border-right: 1px #fff solid; margin-top:280px}bo7办公区 - 实用经验教程分享!

    .main-page .left, .main-page .right{float:left;}bo7办公区 - 实用经验教程分享!

    .main-page .nav-back{height:300px;}bo7办公区 - 实用经验教程分享!

    .main-page .nav{position:relative;margin-top:-300px;width:132px;text-align:center;font-size:18px;font-family:"微软雅黑";color:#fff;}bo7办公区 - 实用经验教程分享!

    .main-page .nav div{height:47px;line-height:47px; margin-bottom: 8px; border-radius: 2px; cursor: pointer;}bo7办公区 - 实用经验教程分享!

    .main-page .nav div.on{background:#3091f2; }bo7办公区 - 实用经验教程分享!

    .main-page .right{width:987px;height:800px;margin-left:55px;}bo7办公区 - 实用经验教程分享!

    .main-page .content{position:relative; width:987px; height:800px; overflow:hidden;}bo7办公区 - 实用经验教程分享!

    .main-page .content .con-ggh{ width:987px; height:800px;}bo7办公区 - 实用经验教程分享!

    .con-ggh ul{ padding-top:20px; display:block}bo7办公区 - 实用经验教程分享!

    .con-ggh ul li{ padding-top:20px; margin-right:20px; float:left}bo7办公区 - 实用经验教程分享!

    .list-pic{ background-color: rgba(255,255,255,0.3); padding: 19px; width: 110px; height: 110px; border: 1px solid #b9babe;}bo7办公区 - 实用经验教程分享!

    .list-pic img{ width:110px; height:110px; display:block}bo7办公区 - 实用经验教程分享!

    .con-ggh .item-name{ padding:20px 0; height: 20px; width: 150px; font-size: 16px; text-align: center; color: #fff; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}bo7办公区 - 实用经验教程分享!

    .b-intro{ margin-top:20px}bo7办公区 - 实用经验教程分享!

    .b-intro span{ font-size:24px; margin-bottom:12px; color:#fff}bo7办公区 - 实用经验教程分享!

    .b-intro p{ width:545px; height:45px; line-height:24px; overflow:hidden; color:#fff; font-size:14px}bo7办公区 - 实用经验教程分享!

    .ck-m{ width:123px; height:36px; line-height:36px; border:1px #fff solid; margin-top:25px}bo7办公区 - 实用经验教程分享!

    .zcinfo{ width:550px; margin-top:280px}bo7办公区 - 实用经验教程分享!

    .ptpic-dl,.ptpic-dl img{ width:354px; height:690px}bo7办公区 - 实用经验教程分享!

    .ptpic-dl{ margin-top:110px}bo7办公区 - 实用经验教程分享!

    /style>bo7办公区 - 实用经验教程分享!

    jQuery上下滑动选项卡效果bo7办公区 - 实用经验教程分享!

  • 5

    书写并添加js代码。bo7办公区 - 实用经验教程分享!

    script src="js/jquery-1.11.1.min.js">/script>bo7办公区 - 实用经验教程分享!

    script >bo7办公区 - 实用经验教程分享!

    $(".main-page .nav div").mouseenter(function () {bo7办公区 - 实用经验教程分享!

    var $this = $(this);bo7办公区 - 实用经验教程分享!

    var index = $this.index();bo7办公区 - 实用经验教程分享!

    }).mouseleave(function () {bo7办公区 - 实用经验教程分享!

    var $this = $(this);bo7办公区 - 实用经验教程分享!

    var index = $this.index();bo7办公区 - 实用经验教程分享!

    }).click(function () {bo7办公区 - 实用经验教程分享!

    var $this = $(this);bo7办公区 - 实用经验教程分享!

    var index = $this.index();bo7办公区 - 实用经验教程分享!

    var l = -(index * 800);bo7办公区 - 实用经验教程分享!

    $(".main-page .nav div").removeClass("on");bo7办公区 - 实用经验教程分享!

    $(".main-page .nav div").eq(index).addClass("on");bo7办公区 - 实用经验教程分享!

    $(".main-page .content .con-ggh:eq(0)").stop().animate({ "margin-top": l }, 500);bo7办公区 - 实用经验教程分享!

    });bo7办公区 - 实用经验教程分享!

    /script>bo7办公区 - 实用经验教程分享!

    jQuery上下滑动选项卡效果bo7办公区 - 实用经验教程分享!

  • 6

    代码整体结构。bo7办公区 - 实用经验教程分享!

    jQuery上下滑动选项卡效果bo7办公区 - 实用经验教程分享!

  • 6本页面未经许可获取自百度经验
  • 7

    查看效果。bo7办公区 - 实用经验教程分享!

    jQuery上下滑动选项卡效果bo7办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!bo7办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号