茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
  • <sub id="ddbnn"><ol id="ddbnn"></ol></sub>

  • <legend id="ddbnn"></legend><s id="ddbnn"></s>

    jQuery控制的不同方向的滑動(向左、向右滑動等)
    來源:易賢網 閱讀:6653 次 日期:2014-07-19 18:55:25
    溫馨提示:易賢網小編為您整理了“jQuery控制的不同方向的滑動(向左、向右滑動等)”,方便廣大網友查閱!

    這篇文章主要介紹了jQuery控制的不同方向的滑動(向左、向右滑動等),需要的朋友可以參考下。

    引入jquery.js,復制以下代碼,即可運行。

    <style type="text/css">

    .slide {

    position: relative;

    height: 200;

    lightyellow;

    }

    .slide .inner {

    position: absolute;

    left: 0;

    bottom: 0;

    height: 100;

    lightblue;

    width: 100%

    }

    </style>

    1、slidetoggle() 交替slidedown(),slideup()

    Html代碼

    <div id="slidebottom" class="slide">

    <button>

    slide it

    </button>

    <div class="inner">

    Slide from bottom

    </div>

    </div>

    Js代碼

    $('#slidebottom button').click(function() {

    $(this).next().slideToggle();

    });

    2、左側橫向交替滑動 Animate Left

    Html代碼

    <div id="slidewidth" class="slide">

    <button>

    slide it

    </button>

    <div class="inner">

    Slide from bottom

    </div>

    </div>

    Js代碼

    $("#slidewidth button").click(function(){

    $(this).next().animate({width: 'toggle'});

    });

    3、左側橫向交替滑動 Animate Left Margin (非隱藏)

    Html代碼

    <div id="slideleft" class="slide" style="width: 50%;float: right">

    <button>

    slide it

    </button>

    <div class="inner">

    Slide from bottom

    </div>

    </div>

    Js代碼

    $("#slideleft button").click(function(){

    var $lefty = $(this).next();

    $lefty.animate({

    left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0

    });

    });

    4、右側橫向滑動Slide to right

    Html代碼

    <div id="slidemarginleft" class="slide" style="width: 60%;float: left">

    <button>

    slide it

    </button>

    <div class="inner">

    Slide from bottom

    </div>

    </div>

    Js代碼

    $("#slidemarginleft button").click(function(){

    var $marginlefty = $(this).next();

    $marginlefty.animate({

    marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0

    });

    });

    更多信息請查看IT技術專欄

    更多信息請查看網絡編程

    2026國考·省考課程試聽報名

    • 報班類型
    • 姓名
    • 手機號
    • 驗證碼
    關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
    工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
    聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
    咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網