2015年1月14日 星期三

[ASP][JavaScript]圖片按鈕的動畫效果(圖片切換)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script type="text/javascript">
    //頁面初次載入
    $(document).ready(function () {
        //在非同步回傳執行個體化期間引發
        Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequestThis);

        //在完成非同步回傳之後,且已將控制項傳回瀏覽器時引發
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestThis);

        //增加按鈕動畫效果
        ChangeImager();
    });

    //在非同步回傳執行個體化期間引發
    function InitializeRequestThis(sender, args) {

    }

    //在完成非同步回傳之後,且已將控制項傳回瀏覽器時引發
    function EndRequestThis(sender, args) {
        //增加按鈕動畫效果
        ChangeImager();
    }

    //增加按鈕動畫效果
    function ChangeImager() {
        //更換停用的按鈕圖片
        $("input[type='image']").each(function (index) {

            if ($(this).attr("disabled")) {
                var Src;
                var Extension = $(this).attr("src").substring($(this).attr("src").lastIndexOf('.'), $(this).attr("src").length);

                if ($(this).attr("src").indexOf(" - Disable") > -1) {
                    Src = ($(this).attr("src").substring(0, $(this).attr("src").lastIndexOf('.'))).replace(" - Disable", "") + " - Disable" + Extension;
                }
                else {
                    Src = $(this).attr("src").substring(0, $(this).attr("src").lastIndexOf('.')) + " - Disable" + Extension;
                }
                $(this).attr("src", Src);
            }
        })

        //增加移出移入的按鈕圖片
        $("input[type='image']").each(function (index) {
            if (!$(this).attr("disabled")) {
                var Src = $(this).attr("src").substring(0, $(this).attr("src").lastIndexOf('.')).replace(" - Disable", "").replace(" - Action", "");

                var Extension = $(this).attr("src").substring($(this).attr("src").lastIndexOf('.'), $(this).attr("src").length);

                $(this).mouseover(function () {
                    $(this).attr("src", Src + " - Action" + Extension);
                });

                $(this).mouseout(function () {
                    $(this).attr("src", Src + Extension);
                });

                $(this).mousedown(function () {
                    $(this).attr("src", Src + " - Focus" + Extension);
                });

                $(this).mouseup(function () {
                    $(this).attr("src", Src + Extension);
                });
            }
        })
    }
</script>

沒有留言 :

張貼留言