jQuery效果 简单演示
1、二级联动，动态添加select标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="sheng" class="select_pro"> <option value="0" selected>省份</option> <option value="1">河南省</option> <option value="2">湖南省</option> <option value="3">云南省</option> <option value="4">河北省</option> </select> <!--<select name="shi" class="select_city"></select>--> </body> <script> var info = {"河南省":["郑州","洛阳","开封"], "湖南省":["湘潭","长沙","岳阳"], "云南省":["昆明","大理","曲靖"], "河北省":["衡水","保定","石家庄","承德","唐山","廊坊","张家口","邢台","邯郸","沧州","秦皇岛"] }; var ele = document.getElementsByClassName("select_pro")[0]; // console.log(ele); var ele_2; ele.onchange=function () { var arrs=ele.children; // console.log(arrs); var child_index = this.selectedIndex; var province= arrs[child_index].innerText; var citys_arr = info[province]; console.log(citys_arr); if (citys_arr != undefined){ var ele_1 = document.getElementsByClassName("select_city")[0]; if (ele_1 == undefined){ ele_2 = document.createElement("select"); ele_2.setAttribute("class", "select_city"); ele_2.name = "city"; ele.parentElement.appendChild(ele_2); } else { ele_2 = ele_1; ele_2.options.length=0; } for (var i=0;i<citys_arr.length;i++){ var option = document.createElement("option"); option.value=i; option.innerText=citys_arr[i]; ele_2.appendChild(option); } }else { if (ele_2){ ele.parentElement.removeChild(ele_2); } } //-----------------初始版本 // var ele_1 = document.getElementsByClassName("select_city")[0]; //// console.log(ele_1); // // if (ele_1 == undefined){ // ele_2 = document.createElement("select"); // ele_2.setAttribute("class", "select_city"); // ele_2.name = "city"; // ele.parentElement.appendChild(ele_2); // } else { // ele_2 = ele_1; // ele_2.options.length=0; // } // // for (var i=0;i<citys_arr.length;i++){ // var option = document.createElement("option"); // option.value=i; // option.innerText=citys_arr[i]; // ele_2.appendChild(option); // } }; ele.onfocus = function () { console.log(this); if (ele_2){ ele.parentElement.removeChild(ele_2); } } </script> </html>
2、跑马灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .text{ display: inline-block; background-color: gray; border: 2px solid #fbe9c0; color: red; line-height: 50px; text-align: center; } </style> </head> <body align="center"> <h1 class="text" >欢-迎-观-临-</h1> </body> <script> function foo() { var ele = document.getElementsByClassName("text")[0]; var content = ele.innerText; var first_char = content.charAt(0); var next_char = content.substring(1,content.length); var new_content = next_char+first_char; ele.innerText=new_content; } setInterval(foo,1000); </script> </html>
3、模态对话框，在当前页面弹框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; } .back{ height: 1200px; width: 100%; background-color: cornsilk; } .shade{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: gray; opacity: 0.4; } .model{ position: fixed; width: 400px; height: 400px; background-color: white; top: 50%; left: 50%; margin-left: -200px; margin-top: -200px; /*z-index: 1000;*/ text-align: center; } .con{ margin-top: 100px; } .hide{ display: none; } </style> </head> <body> <div class="back"> <button onclick="start()">start</button> <h1>11111111111111</h1> <img src="12.jpg" alt=""> </div> <div class="shade hide btn"></div> <div class="model hide btn"> <div class="con"> 用户名:<input type="text"> <button onclick="stop()">取消</button> </div> </div> <script> function stop(){ var model=document.getElementsByClassName("model")[0]; var shade=document.getElementsByClassName("shade")[0]; model.classList.add("hide"); shade.classList.add("hide"); } function start(){ var model=document.getElementsByClassName("model")[0]; var shade=document.getElementsByClassName("shade")[0]; model.classList.remove("hide"); shade.classList.remove("hide"); // var eles=document.getElementsByClassName("btn"); // // for (var i=0;i<eles.length;i++){ // // console.log(eles[i].classList.remove("hide")); // [obj] //// i--; // // } } </script> </body> </html>
4、伪类，鼠标移动，父类内子类变色问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ background-color: rebeccapurple; width: 100px; height: 100px; } .bottom{ background-color: green; width: 100px; height: 100px; } .outer:hover .bottom{ background-color: yellow; } /*注意:若想父类内通过移动到其中一个子标签上实现另一个子标签的变色，一定是要用父类去调这个要移动鼠标变色的子类，否则无效 这个代码中，一定是outer:hover 控制outer里某一个标签,否则无效*/ /*.top:hover .bottom{*/ /*background-color: yellow;*/ /*}*/ </style> </head> <body> <div class="outer"> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html>
5、select表单多选，左右移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } div.move{ display: inline-block; width: auto!important; height: auto!important; background-color: #d47f39; vertical-align: top; } div.move span.move_button{ display:inline-block; width: 40px; height: auto!important; margin: 5px; text-align: center; overflow: hidden; } span.move_button button{ display: inline-block; margin: 10px 0; vertical-align: text-top; } </style> </head> <body> <div class="move"> <select name="book_left" id="book_left" multiple size="8"> <option value="1">《水浒传》</option> <option value="2">《西游记》</option> <option value="3">《红楼梦》</option> <option value="4">《三国演义》</option> <option value="5">《碟中谍》</option> <option value="6">《海底世界》</option> <option value="7">《平凡的世界》</option> <option value="7">《致青春》</option> </select> <span class="move_button"> <button id="left_move_one"> > </button> <button id="left_move_all"> >> </button> <button id="right_move_all"> << </button> </span> <select name="book_right" id="book_right" multiple size="8"> <option value="1">《狼图腾》</option> </select> </div> </body> <script> var ele_one = document.getElementById("left_move_one"); var ele_all = document.getElementById("left_move_all"); var ele_rall = document.getElementById("right_move_all"); var left = document.getElementById("book_left"); var right = document.getElementById("book_right"); var arrs_option = left.options; var arr_option = right.options; // console.log(arrs_option); ele_one.onclick = function () { for (var i=0;i<arrs_option.length;i++) { var option = arrs_option[i]; if (option.selected) { right.appendChild(option); right.options.selected = false; i--; } } }; ele_all.onclick = function () { for (var i=0;i<arrs_option.length;i++) { var option = arrs_option[i]; option.selected = true; right.appendChild(option); right.options.selected = false; i--; } }; ele_rall.onclick = function () { for (var i=0;i<arr_option.length;i++){ var option = arr_option[i]; option.selected = true; left.appendChild(option); left.options.selected = false; i--; } }; </script> </html>
6、table表格：全选，反选，取消操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div.choice{ display: inline-block; width: auto!important; height: auto!important; text-align: center; overflow: hidden; } div.choice span.choice_button{ display: inline-block; text-align: center; margin:10px 0; vertical-align: baseline; } </style> </head> <body> <div class="choice"> <span class="choice_button"> <button value="all" class="item_button">全选</button> <button value="reverse" class="item_button">反选</button> <button value="cantel" class="item_button">取消</button><br> </span> <hr> <table border="1" class="server_tb"> <tr> <td><input type="checkbox" class="item"></td> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> </tr> </table> </div> <script> var choice = document.getElementsByClassName("item_button"); var ele_input = document.getElementsByClassName("item"); for (var j=0;j<choice.length;j++){ choice[j].onclick = function () { for (var i = 0; i < ele_input.length; i++){ if(this.value == "all"){ele_input[i].checked = true;} else if (this.value == "cantel"){ele_input[i].checked = false;} else if (this.value =="reverse"){ if (ele_input[i].checked) {ele_input[i].checked = false;} else {ele_input[i].checked = true;}}}}} </script> </body> </html>
7、tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } div.outer,ul.nav{ width: 80%; height:auto!important; margin: 0 auto; } ul.nav li{ list-style: none; display: inline-block; width: 26%; height: 40px; text-align: center; line-height: 40px; background-color: wheat; } div.content{ height: 400px; background-color: gray; } ul.nav .active{ background-color: #204982; } .hide{ display: none; } </style> <script src="jquery-3.2.1.js"></script> </head> <body> <div class="outer"> <ul class="nav"> <li f="con1" class="active">菜单一</li> <li f="con2">菜单二</li> <li f="con3">菜单三</li> </ul> <div class="content"> <div class="con1 ">111111</div> <div class="con2 hide">222222</div> <div class="con3 hide">333333</div> </div> </div> <script> var outer = document.getElementsByClassName("outer")[0]; var lis = outer.getElementsByTagName("li"); for (var i=0;i<lis.length;i++){ lis[i].onclick = function () { $(this).addClass("active").siblings().removeClass("active"); var $name = $(this).attr("f"); $("."+$name).removeClass("hide").siblings().addClass("hide"); } } </script> </body> </html>
8、返回顶部：在某一设定高度内不显示，超过会显示返回顶部按钮，点击返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } div.div1{ display: inline-block; width: 100%; height: 1200px; background-color: #EDEDED; } div.top{ width: 30px; height: 30px; text-align: center; font-size: 16px; font-weight: 700; background-color: red; opacity: 0.6; position: fixed; right: 40px; bottom: 40px; display: none; } </style> <script src="jquery-3.2.1.js"></script> </head> <body> <div class="div1"> </div> <div class="top">︽</div> </body> <script> // 点击触发事件 返回顶部，滚动条举例顶部距离为0！ $(".top").click(function () { $(window).scrollTop(0); }); //window对象 调用onscroll 事件(上下条活动，实时获取距离顶部 top 的距离) window.onscroll=function () { //当距离顶部的高度大于200px的时候，就显示返回顶部的框！小于就隐藏！ if ($(window).scrollTop()>200){ $(".top").show() } else { $(".top").hide() } } </script> </html>
9、多查询操作：点击加号按钮，出现多个输入框；点击减号按钮，删除当前输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"> <div class="item"> <input type="button" value="+"> <input type="text"> </div> </div> <script src="jquery-3.2.1.js"></script> <script> $("[value='+']").click(function(){ var $clone=$(this).parent().clone(); $clone.children(":button").val("-").attr("onclick","rev(this)"); $(".box").append($clone) }); function rev(self){ console.log($(self).parent()); $(self).parent().remove() } </script> </body> </html>
10、仿京东轮播图，图片请任意查找，然后更改img标签，src属性！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ margin: 0; padding: 0; text-decoration: none; } div.images_box{ width: 790px; height: 340px; margin: 10px auto; border: 1px solid rebeccapurple; position: relative; } div.images_box ul{ list-style: none; } ul.imag li.item{ display: none; position: absolute; top:0; left: 0; width: 790px; height: 340px; } div.images_box ul.num{ position: absolute; bottom: 20px; left: 50% ; margin-left: -91px; width: 192px; height: 20px; line-height: 20px; text-align: center; border-radius: 12px; background-color: hsla(0,0%,100%,.3); } ul.num li{ display: inline-block; width: 12px; height: 12px; margin:0 3px; border-radius: 100%; background-color: #ffffff; } div.btn{ display: none; position: absolute; top: 50%; margin-top: -30px; width: 30px; height: 60px; text-align: center; line-height: 60px; font-size: 20px; color: white; background-color: rgba(0,0,0,.1); } div.btn:hover{ background-color: #666; } div.left{ left: 0; } div.right{ right: 0; } .num .active{ background-color: #ff0000; } </style> <script src="jquery-3.2.1.js"></script> <body> <div class="images_box"> <ul class="imag"> <li class="item" style="display: inline-block"><a href="#"><img src="1.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="2.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="3.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="4.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="5.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="6.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="7.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="8.jpg" alt=""></a></li> </ul> <ul class="num"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script> var i =0; function move_left() { if (i==0){ i=8; } i--; $(".imag li").eq(i).fadeIn(1000).siblings().fadeOut(200); $(".num li").eq(i).addClass("active").siblings().removeClass("active"); } function move_right() { if (i==7){ i=-1; } i++; $(".imag li").eq(i).fadeIn(1000).siblings().fadeOut(200); $(".num li").eq(i).addClass("active").siblings().removeClass("active"); } //自动轮播 var ID = setInterval(move_right,1500); //鼠标移动静止 $(".images_box").hover(function () { clearInterval(ID); $(".btn").show() },function () { ID = setInterval(move_right,1500); $(".btn").hide() }); //鼠标变动，图片变更 $(".num li").mouseover(function () { i = $(this).index(); $(".imag li").eq(i).fadeIn(1000).siblings().fadeOut(200); $(".num li").eq(i).addClass("active").siblings().removeClass("active"); }); //手动轮播 $(".right").click(move_right); //向右 $(".left").click(move_left); //向左 </script> </body> </html>
