jQuery效果函數

時間  2019-12-11
標籤 jquery 效果 函數 欄目 JQuery 简体版
原文   原文鏈接

jQuery有很個人效果能夠實現，好比說淡入淡出的效果:<html>
    <head>
        <style>
            #box{width:200px;height:200px;background:red;opacity:1;}
        </style>
    </head>
    <body>
        <div id="box">
        </div>
        <input type="button" value="隱藏/顯示"id="bt1"><br/><br/>
        <input type="button" value="淡入"id="bt2"><br/><br/>
        <input type="button" value="淡出"id="bt3"><br/><br/>
        <input type="button" value="滑入"id="bt4"><br/><br/>
        <input type="button" value="滑出"id="bt5"><br/><br/>
        <input type="button" value="半透明"id="bt6"><br/><br/>
        <input type="button" value="滑入/滑出"id="bt7"><br/><br/>
        <input type="button" value="淡入入/淡出"id="bt7"><br/><br/>
    </body>
    <script src="jquery-1.6.js"></script>
    <script>
        $(function(){
                $("#bt1").click(function(){

                            $("#box").toggle(1000)
                            }),
                $("#bt2").click(function(){

                            $("#box").slideDown(1500)
                            }),
                $("#bt3").click(function(){

                            $("#box").slideUp(1500)
                            }),
                $("#bt4").click(function(){

                            $("#box").fadeIn(1000)
                            }),
                $("#bt5").click(function(){

                            $("#box").fadeOut(1000)
                            }),
                $("#bt6").click(function(){

                            $("#box").fadeTo(1500,0.4)
                            }),
                $("#bt7").click(function(){
                            $("#box").fadeToggle(1000)
                            }),
                $("#bt8").click(function(){
                            $("box").slideToggle(1500)
                            })
                })
                              
    </script>
</html>javascript

　　jQuery也能夠來實現一個滾動字幕的效果，好比說下邊這個例子：<html>
    <head>
        <style>
            #box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}
            
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(function(){
                str="我是中國人"
                $("#box").html(str)
                setInterval(go,300)
                    function go(){
                        str=str.substr(1)+str.substr(0,1)
                        $("#box").html(str)
                        }    
            })
    </script>
</html>css

jQuery能夠用來實現一個刪除功能的實現,好比：<html>
    <head>
        <style>
            #box{
                width:400px;
                height:200px;
                border:1px solid black;
                }
        </style>
    </head>
    <body>
        <div id="box">
                <p id="a">第一a</p>
                <p>第二</p>
                <p id="a">第三a</p>
                <p>第四</p>
        </div>
        <button id="del">刪除</button>
        <button id="cle">清空</button>
    </body>
    <script src="jquery-1.6.js"></script>
    <script>
        $(function(){
                $("#del").click(
                        function(){
                            $("p").remove("#a")
                            });
                $("#cle").click(
                        function(){
                            $("#box").empty()
                            });
            })
    </script>
</html>html

jQuery還會作出一選課功能的實現,好比:<html>
<head>
<title></title>
<style>
li{
    list-style:none;
}
#you{
    position:absolute;
    left:300px;
    top:10px;
}
ul{
    position:absolute;
    left:150px;
    top:10px;
}
</style>
<script src="jquery-1.6.js"></script>
<script>
    $(function(){
        $("button:first").click(function(){
            $("#zuo>option:selected").prependTo($("#you"));
            //$("#you").append($("#zuo>option:selected");
        })
        $("button:eq(1)").click(function(){
            $("#you>option:selected").appendTo($("#zuo"));
            //$("#you").append($("#zuo>option:selected");
        })
        $("button:eq(2)").click(function(){
            $("#zuo>option").appendTo($("#you"));
            
        })
        $("button:eq(3)").click(function(){
            $("#you>option").appendTo($("#zuo"));
            
        })
        $("button:eq(4)").click(function(){
              //$("#zuo>option:first").before($("#zuo>option:selected"))
            $("#zuo>option:selected").prependTo($("#zuo"));
            
        })
        $("button:eq(5)").click(function(){
            //  $("#zuo>option:last").after($("#zuo>option:selected"))
            $("#zuo>option:selected").appendTo($("#zuo"));
            
        })
        $("button:eq(6)").click(function(){
         $("#zuo>option:selected").prev().before($("#zuo>option:selected")) ;   
            
        })
        $("button:eq(7)").click(function(){
         $("#zuo>option:selected").next().after($("#zuo>option:selected")) ;   
            
        })
    })
</script>
</head>
<body>
<select size="10" id="zuo" style="width:100px">
    <option>職業英語</option>
    <option>高等數學</option>
    <option>大學語文</option>
    <option>大學物理</option>
    <option>計算機基礎</option>
    <option>基本網頁設計</option>
    <option>c語言程序設計</option>
    <option>數據結構</option>
    <option>UI設計</option>
    <option>產品腳本設計</option>
    <option>產品腳本提升</option>
    <option>產品腳本實戰</option>
</select>
<ul>
<li><button>選擇</button></li>
<li><button>退選</button></li>
<li><button>全選</button></li>
<li><button>全退</button></li>
<li><button>置頂</button></li>
<li><button>置底</button></li>
<li><button>上移</button></li>
<li><button>下移</button></li>
</ul>
<select size="10" id="you" style="width:100px">

</select>

</body>
</html>java

jQuery還可以實現下滑框功能:<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你能夠找到你所須要的全部網站建設教程。</p>
</div>
 
<p class="flip">請點擊這裏</p>
 
</body>
</html>
jQuery可以實現簡單的動畫效果：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script>
</head>
 
<body>
<button>開始動畫</button>
<p>默認狀況下，全部 HTML 元素的位置都是靜態的，而且沒法移動。如需對位置進行操做，記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery能實現一個動畫的開始與中止的功能:<html>
    <head>
        <style>
            #box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}
        </style>
    </head>
    <body>
        <div id="box"></div>
        <button id="bt">開始</button>
        <button id="bt1">中止</button>
    </body>
    <script src="jquery-1.6.js"></script>
    <script>
        
        $(function(){
                $("#bt").click(function(){
                            $("div").animate({left:"800px",top:"300px",width:"500px",height:"500px"},3000)
                            }),
                $("#bt1").click(function(){
                            $("div").stop();
                            })            
                })
    </script>
</html>jquery

jQuery還能作一些向上輪播圖片廣告的功能:<html>
    <head>
        <style>
            #box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}
            ul{list-style:none;}
            img{width:600px;height:300px;}
            *{padding:0;margin:0;}
        </style>
    </head>
    <body>
        
        <div id="box">
            <ul id="pic">
                <li><img src="1.png"></li>
                <li><img src="2.png"></li>
                <li><img src="3.png"></li>
                <li><img src="4.png"></li>
                <li><img src="1.png"></li>
            </ul>
        </div>
    </body>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(function(){
                m=0;
                p=setInterval(go,100)
                function go(){
                        m+=20;
                        $("#pic").css("margin-top",-m+"px")
                        if(m>=1200){m=0}
                        }
            })
    </script>
</html>數據結構

jQuery還能實現兩個下拉展開於閉合的效果於一體的:<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 樂趣十足！</p>
<button>點擊這裏</button>

</body>
</html>app

　　以上就是我分享給你們的，謝謝。ide

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