吳裕雄--天生自然WEB前端開發實戰--jQuery
阿新 • • 發佈:2020-10-24
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(e) { alert("hello jQuery World!"); }); </script> </head> <body> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(e) { $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>單擊我,我會自動消失</p> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(e) { $("#myId").click(function(){ $("#myId").html("World"); }); }); </script> </head> <body> <p id="myId">Hello</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery類選擇器</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $(".myClass").each(function (index,element){ $(this).html(index+"-"+$(this).text()) }); }); }); </script> </head> <body> <button>增加每個列表項的索引值</button> <ul> <li class="myClass">足球</li> <li class="myClass">羽毛球</li> <li class="myClass">籃球</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery祖先後代選擇器</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#box li").addClass("myClass") }); }); </script> <style> .myClass{ list-style:none; background:#C9C; width:200px; text-align:center; margin:5px;} </style> </head> <body> <button>改變列表顯示樣式</button> <div id="box"> <ul> <li>足球</li> <li>羽毛球</li> <li>籃球</li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery父子選擇器</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#myUl>li").css({"list-style":"none","background":"#C9C", "width":"200px","text-align":"center","margin":"5px"}) }); }); </script> </head> <body> <button>改變列表顯示樣式</button> <div> <ul id="myUl"> <li>足球</li> <li>羽毛球</li> <li>籃球</li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery前後選擇器</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ if($("#username").val()==""){ $("#username+span").html("使用者名稱不能為空!") $("#username+span").css("display","inline") } else{ $("#username+span").css("display","none") } }); }); </script> <style> div span{display:none; background:red; color:white;} </style> </head> <body> <div> <label>使用者名稱</label> <input type="text" id="username"> <span></span> </div> <button >測試</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery內容過濾器</title> <script src="js/jquery-1.11.2.min.js"></script> <script> $(function () { $('button').click(function () { //包含ha內容的層 $('div:contains(ha)').css('backgroundColor', 'green'); //空層 $('div:empty').css('backgroundColor', 'yellow'); //層裡面含有a標籤 $('div:has(a)').css('backgroundColor', 'pink'); }) }) </script> <style> div{ width:300px; height:50px; border:1px solid red; margin:5px; } </style> </head> <body> <button>顯示效果</button> <div> hahha </div> <div> heihei </div> <div></div> <div> <a href="http://www.baidu.com">content</a> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery可見性過濾器</title> <script src="js/jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function(){ $("div:visible").css("background","red"); }); $("#b2").click(function(){ $("div:hidden").show(1000); }); }); </script> </head> <body> <h3>可見性過濾選擇器.</h3> <input type="button" value="改變可見div元素屬性" id="b1"/> <input type="button" value="顯示不見元素屬性" id="b2"/> <br /><br /> <div class="one" id="one" > id為one,class為one的div <div class="mini">class為mini</div> </div> <div style="display:none;" class="none">style的display為"none"的div</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery可見性過濾選擇器</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(){ $("a[title]").css({ "color":"#FF9600", "font-size":"12px", "text-decoration":"none"}); }); </script> </head> <body> <a href="#" title="first">第一個包含title屬性的a元素</a><br/> <a href="#">第一個不包含title屬性的a元素</a><br/> <a href="#" title="second">第二個包含title屬性的a元素</a><br/> <a href="#">第二個不包含title屬性的a元素</a><br/> <a href="#" title="third">第三個包含title屬性的a元素</a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery子元素過濾器</title> <script src="js/jquery-3.2.0.min.js"></script> <script> $(document).ready(function(){ $("ul li:nth-child(even)").css("background-color","#FF9600"); }); </script> </head> <body> <ul> <li>音樂</li> <li>羽毛球</li> <li>足球</li> <li>籃球</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery遍歷元素</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(){ var colorArr=new Array("blue","red","pink","green"); $("li").each(function(index){ this.style.color=colorArr[index]; }); }); </script> </head> <body> <ul> <li>音樂</li> <li>羽毛球</li> <li>足球</li> <li>籃球</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery修改元素內容</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var newContent=$("#userInput").val(); //val()獲取表單元素內容 $("ul li:first").html(newContent); //html()設定選中元素內容 $("ul li:last").text(newContent); //text()設定選中元素內容 }); }); </script> </head> <body> <input type="text" id="userInput"> <button>修改HTML元素內容</button> <ul> <li>音樂</li> <li>羽毛球</li> <li>足球</li> <li>籃球</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery修改元素屬性</title> <script src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function(){ var index=0; setInterval(imgChange,1000); //定時1秒鐘改變一次圖片 function imgChange(){ index=(index+1)%4; //讓索引值在0~3之間變化 $("#box img").attr("src","images/"+index+".jpg"); //修改img元素的src屬性 } }); </script> </head> <body> <div id="box"> <img src="images/0.jpg"> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM操作</title> <script src="js/jquery-1.11.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").eq(0).after("<p>原始第一段落後插入元素</p>"); $("p").eq(2).before("<p>原始第二段落前插入元素</p>"); $("p").eq(3).replaceWith("<p>原始第二段內容修改</p>"); $("p").eq(4).empty();//刪除原始第一段落 }); }); </script> </head> <body> <button>DOM操作測試</button> <p>這是原始第一個段落。</p> <p>這是原始第二個段落。</p> <p>這是原始第三個段落。</p> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>郵件列表管理</title> <style> *{margin:0px; padding:0px;} #box{width:400px;margin:0px auto;} </style> <script src="js/jquery-3.2.0.min.js"></script> <script> $(function(){ $("#selectBtn").click(function(){ //全選 $("input[name=select]").prop("checked",true) }); $("#selectCancle").click(function(){ //取消選擇 $("input[name=select]").prop("checked",false) }); $("#notSelect").click(function(){ //反選 $("input[name=select]").each(function(index, element) { $(this).prop("checked",!$(this).prop("checked")) }) }); $("#delBtn").click(function(){ //刪除選中郵件項 $("input[name=select]").each(function(index, element) { if($(this).prop("checked")) $(this).parent().parent().remove(); }); }) }) </script> </head> <body> <div id="box"> <p>收件箱</p> <table width="400" border="1" > <tr> <td>狀態</td> <td>發件人</td> <td>主題</td> </tr> <tr> <td><input name="select" type="checkbox" value="select" ></td> <td>王者歸來</td> <td>羽毛球服裝</td> </tr> <tr> <td><input name="select" type="checkbox" value="select" ></td> <td>天下</td> <td>明天會下雨嗎?</td> </tr> <tr> <td><input name="select" type="checkbox" value="select" ></td> <td>滄海</td> <td>輪椅什麼時候還您?</td> </tr> <tr> <td><input name="select" type="checkbox" value="select" ></td> <td>王者歸來</td> <td>明天約了場比賽</td> </tr> </table> <button id="selectBtn">全選</button> <button id="selectCancle">取消</button> <button id="notSelect">反選</button> <button id="delBtn">刪除</button> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>bind方法</title> <script src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").bind("click",function(){ $("p").slideToggle(); }); }); </script> </head> <body> <p>這是一段文字</p> <button>請點選這裡</button> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>bind方法</title> <script src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ listArr=new Array("音樂","排球","羽毛球","籃球","泳池"); index=0; $("ul").delegate("li","click",function(){ $(this).append("<li>"+listArr[index]+"</li>") index++; index%=5; }) }); </script> </head> <body> <ul> <li>足球</li> </ul> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>事件舉例</title> <style> #mydiv{background:#00BFFF;position:absolute;width:100px;height:100px; } </style> <script src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $("#mydiv").fadeTo("slow", 0.5); $("#mydiv").mousedown(function(event) { var offset = $("#mydiv").offset(); x1 = event.clientX - offset.left; y1 = event.clientY - offset.top; $("#mydiv").mousemove(function(event) { $("#mydiv").css("left", (event.clientX - x1) + "px"); $("#mydiv").css("top", (event.clientY - y1) + "px"); }); $("#mydiv").mouseup(function(event) { $("#mydiv").unbind("mousemove"); }); }); }) }) </script> </head> <body> <button id="btn">滑鼠拖動</button> <div id="mydiv" ></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery顯示與隱藏</title> <style> p{width:200px; height:200px; background-color:pink; text-align:center; line-height:200px;} </style> <script src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* $(".btn1").click(function(){ $("p").hide(2000); }); $(".btn2").click(function(){ $("p").show(2000); }); */ $(".btn1").click(function(){ $("p").toggle(2000); }); }); </script> </head> <body> <body> <p>這是一個測試段落!</p> <button class="btn1">隱藏</button> <button class="btn2">顯示</button> </body> </html> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery淡入淡出</title> <style> #div1{width:200px; height:200px; background-color:pink; text-align:center; line-height:200px;} </style> <script src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //漸變顯示按鈕 $('#btnFadeIn').click(function(){ //$('#div1').fadeIn(); $('#div1').fadeIn(1000); //1000毫秒,表示動畫漸變過程時間。 }); //漸變隱藏按鈕 $('#btnFadeOut').click(function(){ $('#div1').fadeOut(1000); }); //合成按鈕 $('#btnTotal').click(function(){ //$('#div1').fadeToggle(); $('#div1').fadeToggle(1000); }); //半透明顯示按鈕 $('#btnBan').click(function(){ $('#div1').fadeTo(1000,0.5); //半透明顯示到0.5。 CSS屬性opacity 透明度(0-1)。 }); }); </script> </head> <body> <input type="button" id="btnFadeIn" value="顯示"/> <input type="button" id="btnFadeOut" value="隱藏"/> <input type="button" id="btnTotal" value="合成"/> <input type="button" id="btnBan" value="半透明"/> <div id="div1"></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery仿QQ好友列表</title> <script src="js/jquery-1.11.2.min.js"></script> <script> $(function(){ $(".subMenuItem").eq(0).show(); $(".subMenuTitle").click(function(){ $(".subMenuItem").slideUp(); $(".MenuItem b").text("▶"); if($(this).next().is(":hidden")){ $(this).next().slideDown(); $(this).find("b").text("▼"); } }); }) </script> <style> *{ margin:0px; padding:0px;} #box{ width:100px; height:500px; background:#FCF;} #box ul{ list-style:none;} #box ul li.MenuItem{width:100%; background:#F9C;} #box ul li a{ text-decoration:none;} #box ul li a{ margin-left:5px;} #box ul li ul{ display:none; } #box ul li ul li{width:100%; height:25px; background:#9CF; margin-bottom:2px; text-align:center; line-height:25px; } </style> </head> <body> <div id="box"> <ul class="menu"> <li class="MenuItem"> <a href="#" class="subMenuTitle"> <b>▼</b> 好友 </a> <ul class="subMenuItem"> <li><a href="#">好友1</a></li> <li><a href="#">好友2</a></li> <li><a href="#">好友3</a></li> </ul> </li> <li class="MenuItem"> <a href="#" class="subMenuTitle"> <b>▶</b> 朋友 </a> <ul class="subMenuItem"> <li><a href="#">朋友1</a></li> <li><a href="#">朋友2</a></li> <li><a href="#">朋友3</a></li> <li><a href="#">朋友4</a></li> </ul> </li> <li class="MenuItem"> <a href="#" class="subMenuTitle"> <b>▶</b> 同學 </a> <ul class="subMenuItem"> <li><a href="#">同學1</a></li> <li><a href="#">同學2</a></li> </ul> </li> <li class="MenuItem"> <a href="#" class="subMenuTitle"> <b>▶</b> 家人 </a> <ul class="subMenuItem"> <li><a href="#">家人1</a></li> <li><a href="#">家人2</a></li> <li><a href="#">家人3</a></li> </ul> </li> </ul> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>animate方法自定義動畫</title> <script src="js/jquery-1.11.2.min.js"></script> <script> $(function(){ //DIV塊被單擊事件處理函式 $("#box").click(function(){ //執行動畫,向左移動100畫素,使用時間1秒種 $(this).animate({left:"+=25px"},500) .animate({height:"+=20px"},500) .animate({opacity:"-=0.1"},500,function(){ $(this).css('background','blue') }) }) }) </script> <style> #box{ position:relative;/*設定為相對定位,如果這句沒有,元素不能移動*/ width:200px; /*DIV塊寬度200畫素*/ height:200px; /*DIV塊高度200畫素*/ background:red; /*DIV塊背景顏色紅色*/ cursor:pointer; /*設定滑鼠指標樣式*/ } </style></head> <body> <div> <div id="box"></div> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>animate方法自定義動畫</title> <script src="js/jquery-1.11.2.min.js"></script> <script> $(function(){ $("button:eq(0)").click(function(){ $("#panel").animate({height:"150" }, 1000).animate({width:"300" }, 1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"}, 1000); }); //stop([clearQueue][,gotoEnd]); //語法結構 $("button:eq(1)").click(function(){ $("#panel").stop();//停止當前動畫,繼續下一個動畫 }); $("button:eq(2)").click(function(){ $("#panel").stop(true);//清除元素的所有動畫 }); $("button:eq(3)").click(function(){ $("#panel").stop(false, true);//讓當前動畫直接到達末狀態 ,繼續下一個動畫 }); $("button:eq(4)").click(function(){ $("#panel").stop(true, true);//清除元素的所有動畫,讓當前動畫直接到達末狀態 }); }) </script> </head> <body> <button>開始一連串動畫</button> <button>stop()</button> <button>stop(true)</button> <button>stop(false,true)</button> <button>stop(true,true)</button> <div id="panel"> <h5 class="head">什麼是jQuery?</h5> <div class="content"> jQuery。 </div> </div> </body> </html>
<!DOCTYPE html> <lang="en"> <head> <script src="js/jquery-3.2.0.min.js"></script> <script > $(function () { $('.tab ul li').mouseover(function () { $(this).addClass('active').siblings().removeClass('active'); $('.tab-content>div:eq(' + $(this).index() + ')').css('display', 'block').siblings().css('display', 'none'); }); $('#agree').change(function () { // console.log(!$(this).attr('ch?ecked')); $('#nextstep').prop('disabled',!$(this).prop('checked'));//璇存槑鍦╟hrome嫻忚鍣ㄤ腑錛屼笉鑳界敤click浜嬩歡鏉ヤ慨鏀筪isabled灞炴�у�礆紝瑕佷笉鍦ㄦ祻瑙堝櫒涓笉鑳藉憟鐜版晥鏋溿�� }); }) </script> <style> * { margin: 0px; padding: 0px } .tab { width: 99%; margin: 20px auto; border: 5px solid #cccccc; } .tab ul { height: 40px; line-height: 40px; } .tab ul li{ list-style: none; float: left; height: 40px; line-height: 40px; width: 33%; text-align: center; background-color: dodgerblue; margin-right: 2px; cursor: pointer; font-family: 鍗庢枃鐞ョ弨; font: bold; } .tab ul li.active{ background-color: aqua; } .tab ul li:first-child{ margin-left: 5px; } .tab ul li:last-child{ margin-right: 0px; } .tab-content div{ display: none; height: 500px; } .local-new{ padding: 20px; } fieldset{ margin: 50px; padding: 20px; } input[type='text']:focus{ background-color: lightyellow; } input[type='radio']:checked+label{ font-weight: bold; } #nextstep :disabled{ background-color: #ccc; } #nextstep :enabled{ font-weight: bold; font-style: italic; } p:lang(zh-cn){ font-family: 寰蔣闆呴粦錛� } p:lang(us-en){ font-family: Arial, Helvetica, sans-serif; } </style> </head> <body> <div class="tab"> <ul> <li class="active">鍥藉唴鏂伴椈</li> <li>鍥介檯鏂伴椈</li> <li>緇忔祹鏂伴椈</li> </ul> <div class="tab-content"> <div class="local-new" style="display:block"> <fieldset> <legend>鐧誨綍</legend> 濮撳悕錛�<input type="text"><br><br> 鎬у埆:<input type="radio" name="sex" id="man"><label for="man">鐢�</label> <input type="radio" name="sex" id="woman"><label for="woman">濂�</label> <input type="radio" name="sex" id="secrect"><label for="secrect">淇濆瘑</label><br><br> <input type="checkbox" name="" id="agree"><label for="agree">鎴戝悓鎰忎互涓婂崗璁�</label><br><br> <input type="button" id="prestep" value="涓婁竴姝�"> <input type="button" id="nextstep" value="涓嬩竴姝�" disabled> </fieldset> </div> <div class="international-new" style="display:block">鍥介檯鏂伴椈</div> <div class="ecology-new" style="display:block">緇忔祹鏂伴椈</div> </div> </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>電影售票前端</title> <style> *{ margin:0px; padding:0px;} #mainBox{ border:1px solid blue; width:972px; height:500px; margin:100px auto; position:relative;} #box{width:485px; height:500px; border:1px solid red;} #box ul{list-style:none;} #box ul li{width:29px; height:30px; background:url(images/bg.png) 0px -28px; cursor:pointer; float:left; margin:10px;} #box ul li span{display:none;} #box ul li.selected{ background:url(images/bg.png) 0px 0px; } #box ul li.numDisp{ background:#F60; color:white; width:25px; height:25px; text-align:center; line-height:25px; border-radius:50%; margin:5px;} #right{ position:absolute; width:485px; height:500px; top:0px;left:486px; border:1px solid blue;} #right p{ margin-left:20px;} #right p.seat span{ border: 1px solid red; color:red; margin:10px;} #right p.selectedSum span,#right p.thisTime span{color:red; font-size:20px; margin:5px; font-weight:bolder;} #btn{ width:200px; background:#F06; color:white; font-size:20px; height:50px; margin-left:100px;} </style> <script src="js/jquery-1.11.2.min.js"></script> <script> $(function(){ /** 獲取當前時間 **/ function p(s) { return s < 10 ? '0' + s: s; } var myDate = new Date(); var year=myDate.getFullYear();//獲取當前年 var month=myDate.getMonth()+1;//獲取當前月 var date=myDate.getDate(); //獲取當前日 var h=myDate.getHours(); //獲取當前小時數(0-23) var m=myDate.getMinutes(); //獲取當前分鐘數(0-59) var now=year+'年'+p(month)+"月"+p(date)+"日 "+p(h)+':'+p(m); $("p.thisTime span").html(now); for(i=1;i<11;i++){ $("#box ul.appendLi").append("<li class='numDisp'>"+i+"</li>"); for(j=1;j<10;j++){ $("#box ul.appendLi").append("<li><span>"+i+"排"+two(j)+"座</span></li>"); } } function two(number){ return number>9?number:"0"+number; } $("#box ul li").click(function(){ if($(this).hasClass("selected")){ $(this).removeClass("selected"); }else{ $(this).addClass("selected"); } if($(".selected").length>5){ alert("一次最多僅能買5張票!") $(this).removeClass("selected"); }else{ selectedText=""; $(".selected").each(function(index, element) { selectedText+="<span>"+$(this).find("span").html()+"</span>"; }); $("p.seat").html("座位:"+selectedText); $("p.selectedSum span").html($(".selected").length) $("p.ticketGe span").html("¥30 * "+$(".selected").length) pj=$("input[name=pj]:checked").val() $("p.ticketTotal span").html(eval(pj * $(".selected").length)+"元") } }); $("input[name=pj]").change(function(){ pj=$("input[name=pj]:checked").val() $("p.ticketTotal span").html(eval(pj * $(".selected").length)+"元") }); /** * * 獲取當前時間 */ function p(s) { return s < 10 ? '0' + s: s; } var myDate = new Date(); //獲取當前年 var year=myDate.getFullYear(); //獲取當前月 var month=myDate.getMonth()+1; //獲取當前日 var date=myDate.getDate(); var h=myDate.getHours(); //獲取當前小時數(0-23) var m=myDate.getMinutes(); //獲取當前分鐘數(0-59) var s=myDate.getSeconds(); var now=year+'-'+p(month)+"-"+p(date)+" "+p(h)+':'+p(m)+":"+p(s); }) </script> </head> <body> <div id="mainBox"> <div id="box"> <ul class="appendLi"> </ul> </div> <div id="right"> <p >影院:王者歸來影世城</p><br> <p >影廳:八號廳</p><br> <p class="thisTime">時間:<span></span></p><br> <p class="seat">座位:</p><br> <p class="selectedSum">已經選擇了<span>0</span>個座位,再次點選座位可取消</p> <br> <p class="ticketGe"> 單價: <input type="radio" name="pj" value="50" checked>50元 <input type="radio" name="pj" value="35">35元 </p> <br> <p class="ticketTotal">總計: <span></span></p><br> <p> <input type="button" value="確認資訊,下單" id="btn"></p> </div> </div> </body> </html>
<html> <head> <style> *{margin:0px; padding:0px;} #box{ border:1px solid red; width:520px; height:280px; margin:0px auto; position:relative; overflow:hidden;} img{ margin:0px auto;} #dm1{position:absolute; top:15px; left:520px; font-size:20px; width:200px; color:white; } #dm2{position:absolute; top:35px; left:520px; font-size:20px; width:200px; } #dm3{position:absolute; top:55px; left:520px; font-size:20px; width:200px; } </style> <script src="js/jquery-1.11.2.min.js"></script> <script> $(document).ready(function(e) { dm1Arr=new Array("hello","鎮ㄥソ錛�","鏀鵑┈榪囨潵","鏋椾腹錛屽姞娌�","鎴戜滑鏄啝鍐涳紒") dm2Arr=new Array("浣撹偛綺劇錛�","杈撲簡灝辮緭浜�","澶╂墠錛屽ぉ鎵嶏紒","鍔姏","鏄庣櫧鏄庣櫧錛�") dm3Arr=new Array("涓浗闃熷姞娌�","濂芥牱鐨勶紝鍔犳補","we are Win錛�","鐪熺殑鍚楋紵","OK錛�") index1=0; index2=0; index3=0; setTimeout(dispDm1,1000); setTimeout(dispDm2,500); setTimeout(dispDm3,700); function dispDm1(){ index1++; index1%=6; $("#dm1").animate({left:'-200px'},3000,"linear",function(){ randTime=Math.floor(Math.random()*200) $("#dm1").css("left","520px") $("#dm1").html(dm1Arr[index1]); setTimeout(dispDm1,randTime); }) } function dispDm2(){ index2++; index2%=6; $("#dm2").animate({left:'-200px'},4000,"linear",function(){ randTime=Math.floor(Math.random()*500) $("#dm2").css("left","520px") $("#dm2").html(dm2Arr[index2]); setTimeout(dispDm2,randTime); }) } function dispDm3(){ index3++; index3%=6; $("#dm3").animate({left:'-200px'},3500,"linear",function(){ randTime=Math.floor(Math.random()*350) $("#dm3").css("left","520px") $("#dm3").html(dm3Arr[index3]); setTimeout(dispDm3,randTime); }) } /*function dispDm1(activeObj){ index++; index%=6; $("#dm1").animate({left:'-200px'},5000,"linear",function(){ randTime=Math.floor(Math.random()*200) $("#dm1").css("left","520px") $("#dm1").html(dm1Arr[index]); setTimeout(dispDm1,randTime); }) }*/ }); </script> </head> <body> <div id="box"> <img src="images/1.jpg"> <div id="dm1">hello</div> <div id="dm2">鏋椾腹錛屽姞娌�</div> <div id="dm3">鏀鵑┈榪囨潵</div> </div> </body> <html>