首頁 > 開發者 > JavaScript
淺談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>
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>
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>
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>
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還能做一些向上輪播圖片廣告的功能:<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>
以上就是我分享給大家的，謝謝。
關於這篇jQuery效果函數就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
