<!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({"300" }, 1000).hide(2000).animate({height:"show", "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>