【html、CSS、javascript-12】jquery-效果

時間  2019-12-12
標籤 html css javascript jquery 效果 欄目 HTML 简体版
原文   原文鏈接

1、jQuery 效果- 隱藏和顯示css

經過 jQuery，您能夠使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：html

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。jquery

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。瀏覽器

下面的例子演示了帶有 speed 參數的 hide() 方法：ide

$("button").click(function(){
  $("p").hide(1000);
});

經過 jQuery，您能夠使用 toggle() 方法來切換 hide() 和 show() 方法。函數

顯示被隱藏的元素，並隱藏已顯示的元素：佈局

$("button").click(function(){
  $("p").toggle();
});

實例：三個按鈕分別是顯示、隱藏、顯示/隱藏動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>你好</p>
    <input id="show" type="button" value="顯示">
    <input id="hide" type="button" value="隱藏">
    <input id =show_Hide type="button" value="顯示/隱藏">
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $("#show").click(function () {
                $("p").show(1000)
            })
            $("#hide").click(function () {
                $("p").hide(1000)
            })
            $("#show_Hide").click(function () {
                $("p").toggle(1000)
            })
        })
    </script>
</body>
</html>
漸變更畫顯示、隱藏元素

 2、jQuery效果-淡入、淡出（fade）ui

經過 jQuery，您能夠實現元素的淡入淡出效果。this

jQuery 擁有下面四種 fade 方法：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() 用於淡入已隱藏的元素。

$(selector).fadeIn(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。.

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不一樣參數的 fadeIn() 方法：

jQuery fadeOut() 方法用於淡出可見元素。

$(selector).fadeOut(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不一樣參數的 fadeOut() 方法：

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法能夠在 fadeIn() 與 fadeOut() 方法之間進行切換。

若是元素已淡出，則 fadeToggle() 會向元素添加淡入效果。

若是元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不一樣參數的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法容許漸變爲給定的不透明度（值介於 0 與 1 之間）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。

可選的 callback 參數是該函數完成後所執行的函數名稱。

下面的例子演示了帶有不一樣參數的 fadeTo() 方法：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1,.d2,.d3{
            width:200px;
            height:100px;
        }
        .d1{
            background-color:green;
        }
        .d2{
            background-color: #396bb3;
        }
        .d3{
            background-color: pink;
        }
    </style>
</head>
<body>
    <input id="fade_in"  type="button" value="fadeIn">
    <input id="fade_out"  type="button" value="fadeOut">
    <input id="fade_toggle"  type="button" value="fadeToggle">
    <input id="fade_to" type="button" value="fadeTo">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $("#fade_in").click(function () {
                $("div").fadeIn(1000);
            });
            $("#fade_out").click(function () {
                $("div").fadeOut(1000);
            });
            $("#fade_toggle").click(function () {
                $("div").fadeToggle(1000);
            });
            $("#fade_to").click(function () {
                $("div").fadeTo(1000,0.5);
            });
        });
    </script>
</body>
</html>
淡入、淡出實例

 三、jQuery效果-滑動（slide）

經過 jQuery，您能夠在元素上建立滑動效果。

jQuery 擁有如下滑動方法：

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() 方法用於向下滑動元素。

$(selector).slideDown(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery slideUp() 方法用於向上滑動元素。

$(selector).slideUp(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
  $("#panel").slideUp();
});

jQuery slideToggle() 方法能夠在 slideDown() 與 slideUp() 方法之間進行切換。

若是元素向下滑動，則 slideToggle() 可向上滑動它們。

若是元素向上滑動，則 slideToggle() 可向下滑動它們。

$(selector).slideToggle(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>

<div id="flip">點我，顯示或隱藏面板。</div>
<div id="panel">Hello world!</div>

<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

</body>
</html>
滑動實例

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>

<div id="flip">點我，顯示或隱藏面板。</div>
<div id="panel">Hello world!</div>

<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow",callBackFunc);  //callBackFunc是回調函數，當滑動結束後執行回調函數
  });
});
callBackFunc = function Over() {
    alert("滑動結束！")
}
</script>

</body>
</html>
滑動結束執行回調函數

 4、定義jQuery函數

1）擴展jQuery對象自己

用來在jQuery命名空間上增長新函數，查看jQuery.fn.extend獲取更多添加插件的信息

在jQuery命名空間上增長兩個函數

jQuery.extend({
    min:function (a,b) {return  a<b?a:b;},
    max:function (a,b) {return a>b?a:b;}
})
    jQuery.min(2,3)  //結果2
    jQuery.max(4,5)  //結果5
    $.max(2,3) //與 jQuery.min(2,3)相同

 2）jQuery.fn.extend()

jQuery.fn.extend({
    check:function () {
        return this.each(function () {
            this.checked = true
        })
    },
    uncheck:function () {
        return this.each(function () {
            this.checked = false
        })
    }
})
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

 

<body>
<div id="d1">11111</div>
<script src="jquery.js"></script>
<script>
    $(function () {
        $.fn.extend({   //定義函數
            hello:function () {
                return $(this).text()
            }
        })
        var div_text = $("#d1").hello()  //調用函數
        alert(div_text) //彈出div的text值11111
    })
</script>
</body>

 

實例1：面板拖動

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="jquery.js"></script>
<style type="text/css">
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body style="padding-top: 50px;">


<div class="moveBar">
    <div id="banner">按住此處移動當前div</div>
    <div class="content">這裏是其它內容</div>
</div>
<script>
jQuery(document).ready( function () {
    $('#banner').mousedown( function (event) {
        var isMove = true;
        var abs_x = event.pageX - $('div.moveBar').offset().left;
        var abs_y = event.pageY - $('div.moveBar').offset().top;
        $(document).mousemove(function (event) {
            if (isMove) {
                var obj = $('div.moveBar');
                obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
            }
        }).mouseup( function () {
            isMove = false;
        });
    });
});
</script>
</body>
</html>
面板隨鼠標移動

 實例2：可編輯表格

一、在table的某個單元格點擊中，先取出該單元格的值，再將該值賦給一個input text，並將這個input text動態添加到這個單元格中，代碼能夠寫成：
    var tdvalue=$(this).val();
    $(this).html("<input id='tempinput' type='text' value='"+tdvalue+"'/>");
二、當單元格失去焦點時，將文本框的值回填給單元格，代碼寫成：
    $(this).html($("tempinput").val());
三、實際寫代碼時還要考慮臨時加入的文本框的寬度要與單元格一致等內容。



實例3：響應式佈局（能夠自適應手機屏幕）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*當瀏覽器的寬度>400px時執行下面語句*/
        @media (min-width: 400px) {
             .w6{
                width:50%;
                float: left;
                background-color: red;
            }
        }
        /*當瀏覽器的寬度>400px-800px時執行下面語句*/
        @media (min-width: 800px) {
            .w6{
            width:50%;
            float: left;
            background-color: blue;
            }
        }

    </style>
</head>
<body>
    <div class="w6">1111</div>
    <div class="w6">1111</div>
</body>
</html>
響應式佈局
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程