经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery(实例)
来源：cnblogs　　作者：子钦加油　　时间：2019/8/15 12:12:26　　对本文有异议

1.开关灯效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <input id="i1" type="button" value="开关" />
  14.     <div class="c1 hide">假装现在有效果了</div>
  15.  
  16.     <script src="jquery-1.12.4.js"></script>
  17.     <script>
  18.         $('#i1').click(function () {
  19.             /* 第一种方法
  20.             if($('.c1').hasClass('hide')){
  21.                 $('.c1').removeClass('hide')
  22.             }else {
  23.                 $('.c1').addClass('hide')
  24.             }   */
  25.             //jquery实现方法
  26.             $('.c1').toggleClass('hide')
  27.         })
  28.     </script>
  29. </body>
  30. </html>
View Code

2.模态对话框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .shade{
  8.             position: fixed;
  9.             left: 0;
  10.             top: 0;
  11.             right: 0;
  12.             bottom: 0;
  13.             background: rgba(0,0,0,.6) ;
  14.             z-index: 20;
  15.         }
  16.         .modal{
  17.             position: fixed;
  18.             left: 50%;
  19.             top: 50%;
  20.             height: 300px;
  21.             width: 400px;
  22.             margin-top: -150px;
  23.             margin-left: -200px;
  24.             z-index: 30;
  25.             border: 1px solid #ddd;
  26.             background-color: white;
  27.         }
  28.         .hide{
  29.             display: none;
  30.         }
  31.         .modal form {
  32.             position: fixed;
  33.             left: 50%;
  34.             top: 50%;
  35.             height: 200px;
  36.             width: 229px;
  37.             border: 1px;
  38.             margin-left: -115px;
  39.             margin-top: -100px;
  40.         }
  41.         .modal form p {
  42.             float: right;
  43.             margin-top: 12px;
  44.         }
  45.         .modal form span {
  46.             float: right;
  47.             display: inline-block;
  48.             height: 18px;
  49.             width: 170px;
  50.             background-color: #FFEBEB;
  51.             text-align: center;
  52.             border: 1px solid #ffbdbe;
  53.             color: #e4393c;
  54.             font-size: 14px;
  55.             visibility: hidden;
  56.         }
  57.         .modal form [type="button"] {
  58.             position: absolute;
  59.             bottom: -30px;
  60.             left: 115px;
  61.         }
  62.         .modal form [value="提交"]{
  63.             left: 50px;
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <div style="width: 300px; margin: 0 auto">
  69.         <input type="button" value="添加主机" onclick="return Add();" />
  70.         <table style="border: 2px solid #F5F5F5; width: 300px;">
  71.             <thead>
  72.                 <tr>
  73.                     <th >主机名</th>
  74.                     <th >IP</th>
  75.                     <th >端口</th>
  76.                     <th>操作</th>
  77.                 </tr>
  78.             </thead>
  79.             <tbody>
  80.                 <tr>
  81.                     <td target="host">c1.com</td>
  82.                     <td target="ip">1.1.1.1</td>
  83.                     <td target="port">8888</td>
  84.                     <td onclick="Edit(this);">Edit</td>
  85.                 </tr>
  86.                <tr>
  87.                     <td target="host">c2.com</td>
  88.                     <td target="ip">1.1.1.1</td>
  89.                     <td target="port">8888</td>
  90.                     <td onclick="Edit(this);">Edit</td>
  91.                 </tr>
  92.                 <tr>
  93.                     <td target="host">c3.com</td>
  94.                     <td target="ip">1.1.1.1</td>
  95.                     <td target="port">8888</td>
  96.                     <td onclick="Edit(this);">Edit</td>
  97.                 </tr>
  98.                 <tr>
  99.                     <td target="host">.com</td>
  100.                     <td target="ip">1.1.1.1</td>
  101.                     <td target="port">8888</td>
  102.                     <td onclick="Edit(this);">Edit</td>
  103.                 </tr>
  104.             </tbody>
  105.         </table>
  106.     </div>
  107.     <div class="shade hide"></div>
  108.     <div  class="modal hide">
  109.         <form action="" method="get">
  110.             <p>主机名:<input type="text" id="host" name="host"><br><span></span></p>
  111.             <p>IP地址:<input type="text" id='ip' name="ip"><br><span></span></p>
  112.             <p>端口号:<input type="text" id='port' name="port"><br><span></span><br></p>
  113.             <input type="button" value="提交" onclick="return SubmitForm();">
  114.             <input type="button" value="取消" onclick="HideModal();">
  115.         </form>
  116.     </div>
  117.  
  118.     <script src="jquery-1.12.4.js"></script>
  119.     <script>
  120.         $(function () {
  121.            $("tr:even").css("background-color","#f5f5f5");
  122.         });
  123.         function Edit(ths) {
  124.             $(".shade,.modal").removeClass("hide");
  125.             prevList = $(ths).prevAll();
  126.             prevList.each(function () {
  127.                 var text = $(this).text();
  128.                 var target = $(this).attr("target");
  129.                 $("#"+target).val(text);
  130.             });
  131.         }
  132.         function HideModal() {
  133.             $(".shade,.modal").addClass("hide");
  134.             $(".modal").find("input[type='text']").val("");
  135.             Addd = false;
  136.         }
  137.         function SubmitForm() {
  138.             var flag = Detection();
  140.             try {
  141.                     if (Addd && flag){
  142.                     $("tbody").append($("tr").last().clone());
  143.                     $(".modal").find("input[type='text']").each(function () {
  144.                         var value = $(this).val();
  145.                         var name = $(this).attr("name");
  146.                         ($("tr").last().children()).each(function () {
  147.                             if ($(this).attr("target") == name){
  148.                                 $(this).text(value);
  149.                                 return
  150.                             }
  151.                                 }
  152.                         )});
  153.                     Addd = false;
  154.                     HideModal();
  155.                     return false;
  156.                 }
  157.             }catch (e){}
  160.             if (flag){
  161.                 $(".modal").find("input[type='text']").each(function () {
  162.                     var value = $(this).val();
  163.                     var name = $(this).attr("name");
  164.                     $(prevList).each(function () {
  165.                         if ($(this).attr("target") == name){
  166.                             $(this).text(value);
  167.                             return
  168.                         }
  169.                             }
  170.                     )});
  171.                     $(".modal,.shade").addClass("hide");
  172.                     HideModal();
  173.                 }
  174.             return flag;
  175.             }
  178.         function Detection() {
  179.             var flag = true;
  180.             $(".modal").find("input[type='text']").each(function () {
  181.                 var value = $(this).val();
  182.                 if (value.length == 0){
  183.                     $(this).next().next().css("visibility","visible").text("亲，不能为空");
  184.                     flag = false;
  185.                     return false;
  186.                 }else {
  187.                     $(this).next().next().css("visibility","hidden").text("");
  188.                 }
  190.                 if ($(this).attr('name') == "host"){
  191.                     var r = /(\.com)$/;
  192.                     if (r.test(value) == false){
  193.                         $(this).next().next().css("visibility","visible").text("主机名必须以.com结尾");
  194.                         flag = false;
  195.                         return false;
  196.                 }
  197.                 }else if ($(this).attr('name') == "ip"){
  198.                     var r2 = /^(([0-2]?[0-9][0-9]?)\.){3}([0-2]?[0-9][0-9]?)$/;
  199.                     if (r2.test(value) == false){
  200.                         $(this).next().next().css("visibility","visible").text("ip 地址格式有误");
  201.                         flag = false;
  202.                         return false;
  203.                     }
  204.                 }else if ($(this).attr('name') == "port"){
  205.                     var r3 = /^([0-9]{1,5})$/;
  206.                     if ((r3.test(value) == false) || (value > 65535)){
  207.                         $(this).next().next().css("visibility","visible").text("端口必须为0-65535");
  208.                         flag = false;
  209.                         return false;
  210.                     }
  211.                 }else {
  212.                     $(this).next().next().css("visibility","hidden").text("");
  213.                 }
  214.         });
  215.         return flag;
  216.         }
  218.         function Add() {
  219.             Addd = true;
  220.             $(".shade,.modal").removeClass("hide");
  221.         }
  222.     </script>
  223. </body>
  224. </html>
View Code

3.点击菜单显示对应的内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .menu{
  11.             height: 38px;
  12.             background-color: #eeeeee;
  13.             line-height: 38px;
  14.         }
  15.         .active{
  16.             background-color: brown;
  17.         }
  18.         .menu .menu-item{
  19.             float: left;
  20.             border-right: 1px solid red;
  21.             padding: 0 5px;
  22.             cursor: pointer;
  23.         }
  24.         .content{
  25.             min-height: 100px;
  26.             border: 1px solid #eeeeee;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.  
  32.     <div style="width: 700px;margin:0 auto">
  33.  
  34.         <div class="menu">
  35.             <div  class="menu-item active" a="1">菜单一</div>
  36.             <div  class="menu-item" a="2">菜单二</div>
  37.             <div  class="menu-item" a="3">菜单三</div>
  38.         </div>
  39.         <div class="content">
  40.             <div b="1">内容一</div>
  41.             <div class="hide"  b="2">内容二</div>
  42.             <div class="hide" b="3">内容三</div>
  43.         </div>
  44.     </div>
  45.     <script src="jquery-1.12.4.js"></script>
  46.     <script>
  47.         $('.menu-item').click(function () {
  48.             //点击menu-item，加上active，同时兄弟标签去掉active
  49.             $(this).addClass('active').siblings().removeClass('active');
  50.             //获取a的属性值2
  51.             var target = $(this).attr('a');
  52.             $('.content').children('[b="'+target+'"]').removeClass('hide').siblings().addClass('hide');
  53.             // '[b="'+target+'"]'  字符串的拼接，找到content儿子里面属性等于2的，删除掉hide，同时兄弟加上hide
  54.         })
  57.     </script>
  58. </body>
  59. </html>
View Code
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .menu{
  11.             height: 38px;
  12.             background-color: #eeeeee;
  13.             line-height: 38px;
  14.         }
  15.         .active{
  16.             background-color: brown;
  17.         }
  18.         .menu .menu-item{
  19.             float: left;
  20.             border-right: 1px solid red;
  21.             padding: 0 5px;
  22.             cursor: pointer;
  23.         }
  24.         .content{
  25.             min-height: 100px;
  26.             border: 1px solid #eeeeee;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.  
  32.     <div style="width: 700px;margin:0 auto">
  33.  
  34.         <div class="menu">
  35.             <div  class="menu-item active" a="1">菜单一</div>
  36.             <div  class="menu-item" a="2">菜单二</div>
  37.             <div  class="menu-item" a="3">菜单三</div>
  38.         </div>
  39.         <div class="content">
  40.             <div b="1">内容一</div>
  41.             <div class="hide"  b="2">内容二</div>
  42.             <div class="hide" b="3">内容三</div>
  43.         </div>
  44.     </div>
  45.     <script src="jquery-1.12.4.js"></script>
  46.     <script>
  47.         $('.menu-item').click(function () {
  48.             $(this).addClass('active').siblings().removeClass('active');
  49.             //eq($(this).index())是获取menu-item的索引
  50.             $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
  51.         })
  52.     </script>
  53. </body>
  54. </html>
  56. 索引菜单栏.html
通过索引实现菜单更方便

4.编辑功能

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .edit-mode{
  8.             background-color: #b3b3b3;
  9.             padding: 8px;
  10.             text-decoration: none;
  11.             color: white;
  12.         }
  13.         .editing{
  14.             background-color: #f0ad4e;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.  
  20.     <div style="padding: 20px">
  21.         <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
  22.         <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
  23.         <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />
  24.  
  25.         <a id="edit_mode" class="edit-mode" href="javascript:void(0);"  onclick="EditMode(this, '#tb1');">进入编辑模式</a>
  26.  
  27.     </div>
  28.     <table border="1">
  29.         <thead>
  30.         <tr>
  31.             <th>选择</th>
  32.             <th>主机名</th>
  33.             <th>端口</th>
  34.             <th>状态</th>
  35.         </tr>
  36.         </thead>
  37.         <tbody id="tb1">
  38.             <tr>
  39.                 <td><input type="checkbox" /></td>
  40.                 <td edit="true">v1</td>
  41.                 <td>v11</td>
  42.                 <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
  43.             </tr>
  44.             <tr>
  45.                 <td><input type="checkbox" /></td>
  46.                 <td edit="true">v1</td>
  47.                 <td>v11</td>
  48.                 <td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下线</td>
  49.             </tr>
  50.             <tr>
  51.                 <td><input type="checkbox" /></td>
  52.                 <td edit="true">v1</td>
  53.                 <td>v11</td>
  54.                 <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
  55.             </tr>
  56.         </tbody>
  57.     </table>
  58.  
  59.     <script type="text/javascript" src="jquery-1.12.4.js"></script>
  60.     <script>
  61.         /*
  62.          监听是否已经按下control键
  63.          */
  64.         window.globalCtrlKeyPress = false;
  66.         window.onkeydown = function(event){
  67.             if(event && event.keyCode == 17){
  68.                 window.globalCtrlKeyPress = true;
  69.             }
  70.         };
  71.         window.onkeyup = function(event){
  72.             if(event && event.keyCode == 17){
  73.                 window.globalCtrlKeyPress = false;
  74.             }
  75.         };
  77.         /*
  78.          按下Control，联动表格中正在编辑的select
  79.          */
  80.         function MultiSelect(ths){
  81.             if(window.globalCtrlKeyPress){
  82.                 var index = $(ths).parent().index();
  83.                 var value = $(ths).val();
  84.                 $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
  85.                     $(this).parent().parent().children().eq(index).children().val(value);
  86.                 });
  87.             }
  88.         }
  89.     </script>
  90.     <script type="text/javascript">
  92. $(function(){
  93.     BindSingleCheck('#edit_mode', '#tb1');
  94. });
  96. function BindSingleCheck(mode, tb){
  98.     $(tb).find(':checkbox').bind('click', function(){
  99.         var $tr = $(this).parent().parent();
  100.         if($(mode).hasClass('editing')){
  101.             if($(this).prop('checked')){
  102.                 RowIntoEdit($tr);
  103.             }else{
  104.                 RowOutEdit($tr);
  105.             }
  106.         }
  107.     });
  108. }
  110. function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){
  111.     var sel= document.createElement('select');
  112.     $.each(attrs,function(k,v){
  113.         $(sel).attr(k,v);
  114.     });
  115.     $.each(csses,function(k,v){
  116.         $(sel).css(k,v);
  117.     });
  118.     $.each(option_dict,function(k,v){
  119.         var opt1=document.createElement('option');
  120.         var sel_text = v[item_value];
  121.         var sel_value = v[item_key];
  123.         if(sel_value==current_val){
  124.             $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));
  125.         }else{
  126.             $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
  127.         }
  128.     });
  129.     return sel;
  130. }
  132. STATUS = [
  133.     {'id': 1, 'value': "在线"},
  134.     {'id': 2, 'value': "下线"}
  135. ];
  137. BUSINESS = [
  138.     {'id': 1, 'value': "车上会"},
  139.     {'id': 2, 'value': "二手车"}
  140. ];
  142. function RowIntoEdit($tr){
  143.     $tr.children().each(function(){
  144.         if($(this).attr('edit') == "true"){
  145.             if($(this).attr('edit-type') == "select"){
  146.                 var select_val = $(this).attr('sel-val');
  147.                 var global_key = $(this).attr('global-key');
  148.                 var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);
  149.                 $(this).html(selelct_tag);
  150.             }else{
  151.                 var orgin_value = $(this).text();
  152.                 var temp = "<input value='"+ orgin_value+"' />";
  153.                 $(this).html(temp);
  154.             }
  156.         }
  157.     });
  158. }
  160. function RowOutEdit($tr){
  161.     $tr.children().each(function(){
  162.         if($(this).attr('edit') == "true"){
  163.             if($(this).attr('edit-type') == "select"){
  164.                 var new_val = $(this).children(':first').val();
  165.                 var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();
  166.                 $(this).attr('sel-val', new_val);
  167.                 $(this).text(new_text);
  168.             }else{
  169.                 var orgin_value = $(this).children().first().val();
  170.                 $(this).text(orgin_value);
  171.             }
  173.         }
  174.     });
  175. }
  177. function CheckAll(mode, tb){
  178.     if($(mode).hasClass('editing')){
  180.         $(tb).children().each(function(){
  182.             var tr = $(this);
  183.             var check_box = tr.children().first().find(':checkbox');
  184.             if(check_box.prop('checked')){
  186.             }else{
  187.                 check_box.prop('checked',true);
  189.                 RowIntoEdit(tr);
  190.             }
  191.         });
  193.     }else{
  195.         $(tb).find(':checkbox').prop('checked', true);
  196.     }
  197. }
  199. function CheckReverse(mode, tb){
  201.     if($(mode).hasClass('editing')){
  203.         $(tb).children().each(function(){
  204.             var tr = $(this);
  205.             var check_box = tr.children().first().find(':checkbox');
  206.             if(check_box.prop('checked')){
  207.                 check_box.prop('checked',false);
  208.                 RowOutEdit(tr);
  209.             }else{
  210.                 check_box.prop('checked',true);
  211.                 RowIntoEdit(tr);
  212.             }
  213.         });
  216.     }else{
  218.         $(tb).children().each(function(){
  219.             var tr = $(this);
  220.             var check_box = tr.children().first().find(':checkbox');
  221.             if(check_box.prop('checked')){
  222.                 check_box.prop('checked',false);
  223.             }else{
  224.                 check_box.prop('checked',true);
  225.             }
  226.         });
  227.     }
  228. }
  230. function CheckCancel(mode, tb){
  231.     if($(mode).hasClass('editing')){
  232.         $(tb).children().each(function(){
  233.             var tr = $(this);
  234.             var check_box = tr.children().first().find(':checkbox');
  235.             if(check_box.prop('checked')){
  236.                 check_box.prop('checked',false);
  237.                 RowOutEdit(tr);
  239.             }else{
  241.             }
  242.         });
  244.     }else{
  245.         $(tb).find(':checkbox').prop('checked', false);
  246.     }
  247. }
  249. function EditMode(ths, tb){
  250.     if($(ths).hasClass('editing')){
  251.         $(ths).removeClass('editing');
  252.         $(tb).children().each(function(){
  253.             var tr = $(this);
  254.             var check_box = tr.children().first().find(':checkbox');
  255.             if(check_box.prop('checked')){
  256.                 RowOutEdit(tr);
  257.             }else{
  259.             }
  260.         });
  262.     }else{
  264.         $(ths).addClass('editing');
  265.         $(tb).children().each(function(){
  266.             var tr = $(this);
  267.             var check_box = tr.children().first().find(':checkbox');
  268.             if(check_box.prop('checked')){
  269.                 RowIntoEdit(tr);
  270.             }else{
  272.             }
  273.         });
  275.     }
  276. }
  279.     </script>
  280.  
  281. </body>
  282. </html>
View Code

5.模态对话框添加删除功能

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .modal{
  11.             position: fixed;
  12.             top: 50%;
  13.             left: 50%;
  14.             width: 500px;
  15.             height: 400px;
  16.             margin-left: -250px;
  17.             margin-top: -250px;
  18.             background-color: #eeeeee;
  19.             z-index: 10;
  20.         }
  21.         .shadow{
  22.             position: fixed;
  23.             top: 0;
  24.             left: 0;
  25.             right: 0;
  26.             bottom: 0;
  27.             opacity: 0.6;
  28.             background-color: black;
  29.             z-index: 9;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <a onclick="addElement();">添加</a>
  35.  
  36.     <table border="1" id="tb">
  37.         <tr>
  38.             <td target="hostname">1.1.1.11</td>
  39.             <td target="port">80</td>
  40.             <td target="ip">80</td>
  41.             <td>
  42.                 <a class="edit">编辑</a> | <a class="del">删除</a>
  43.             </td>
  44.         </tr>
  45.         <tr>
  46.             <td target="hostname">1.1.1.12</td>
  47.             <td target="port">80</td>
  48.             <td target="ip">80</td>
  49.             <td>
  50.                 <a class="edit">编辑</a> | <a class="del">删除</a>
  51.             </td>
  52.         </tr>
  53.         <tr>
  54.             <td target="hostname">1.1.1.13</td>
  55.             <td target="port">80</td>
  56.             <td target="ip">80</td>
  57.             <td>
  58.                 <a class="edit">编辑</a> | <a class="del">删除</a>
  59.             </td>
  60.         </tr>
  61.         <tr>
  62.             <td target="hostname">1.1.1.14</td>
  63.             <td target="port">80</td>
  64.             <td target="ip">80</td>
  65.             <td>
  66.                 <a class="edit">编辑</a> | <a class="del">删除</a>
  67.             </td>
  68.  
  69.         </tr>
  70.     </table>
  71.  
  72.     <div class="modal hide">
  73.         <div>
  74.             <input name="hostname" type="text"  />
  75.             <input name="port" type="text" />
  76.             <input name="ip" type="text" />
  77.         </div>
  78.  
  79.         <div>
  80.             <input type="button" value="取消" onclick="cancelModal();" />
  81.             <input type="button" value="确定" onclick="confirmModal();" />
  82.         </div>
  83.     </div>
  84.  
  85.     <div class="shadow hide"></div>
  86.  
  87.     <script src="jquery-1.12.4.js"></script>
  88.     <script>
  90.         $('.del').click(function () {
  91.             $(this).parent().parent().remove();
  92.         });
  94.         function  confirmModal() {
  96.             var tr = document.createElement('tr');
  97.             var td1 = document.createElement('td');
  98.             td1.innerHTML = "11.11.11.11";
  99.             var td2 = document.createElement('td');
  100.             td2.innerHTML = "8001";
  102.             $(tr).append(td1);
  103.             $(tr).append(td2);
  105.             $('#tb').append(tr);
  107.             $(".modal,.shadow").addClass('hide');
  108. //            $('.modal input[type="text"]').each(function () {
  109. //                // var temp = "<td>..."
  110. //
  111. //
  112. //
  113. //            })
  114.         }
  116.         function  addElement() {
  117.             $(".modal,.shadow").removeClass('hide');
  118.         }
  119.         function cancelModal() {
  120.             $(".modal,.shadow").addClass('hide');
  121.             $('.modal input[type="text"]').val("");
  122.         }
  124.         $('.edit').click(function(){
  125.             $(".modal,.shadow").removeClass('hide');
  126.             // this
  127.             var tds = $(this).parent().prevAll();
  128.             tds.each(function () {
  129.                 // 获取td的target属性值
  130.                 var n = $(this).attr('target');
  131.                 // 获取td中的内容
  132.                 var text = $(this).text();
  133.                 var a1 = '.modal input[name="';
  134.                 var a2 = '"]';
  135.                 var temp = a1 + n + a2;
  136.                 $(temp).val(text);
  137.             });
  140. //            var port = $(tds[0]).text();
  141. //            var host = $(tds[1]).text();
  142. //
  143. //            $('.modal input[name="hostname"]').val(host);
  144. //            $('.modal input[name="port"]').val(port);
  145.             // 循环获取tds中内容
  146.             // 获取 <td>内容</td> 获取中间的内容
  147.             // 赋值给input标签中的value
  149.         });
  150.     </script>
  151. </body>
  152. </html>
View Code

6.点赞

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .container{
  8.             padding: 50px;
  9.             border: 1px solid #dddddd;
  10.         }
  11.         .item{
  12.             position: relative;
  13.             width: 30px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="container">
  19.         <div class="item">
  20.             <span>赞</span>
  21.         </div>
  22.     </div>
  23.     <div class="container">
  24.         <div class="item">
  25.             <span>赞</span>
  26.         </div>
  27.     </div>
  28.     <div class="container">
  29.         <div class="item">
  30.             <span>赞</span>
  31.         </div>
  32.     </div>
  33.     <div class="container">
  34.         <div class="item">
  35.             <span>赞</span>
  36.         </div>
  37.     </div>
  38.  
  39.     <script src="jquery-1.12.4.js"></script>
  40.     <script>
  41.         $('.item').click(function () {
  42.             addFavor(this);
  43.         })
  44.         function addFavor(self) {
  45.             var fontSize = 15;
  46.             var top = 0;
  47.             var right= 0;
  48.             var opacity = 1;
  50.             var tag = document.createElement('span');
  51.             $(tag).text('+1');
  52.             $(tag).css('color','green');
  53.             $(tag).css('position','absolute');
  54.             $(tag).css('fontSize',fontSize + 'px');
  55.             $(tag).css('right',right + 'px');
  56.             $(tag).css('top',top + 'px');
  57.             $(tag).css('opacity',opacity + 'px');
  58.             $(self).append(tag);
  60.             var obj = setInterval(function () {
  61.                 fontSize = fontSize + 10;
  62.                 top = top - 10;
  63.                 right = right - 10;
  64.                 opacity = opacity - 0.1;
  66.                 $(tag).css('fontSize',fontSize + 'px');
  67.                 $(tag).css('right',right + 'px');
  68.                 $(tag).css('top',top + 'px');
  69.                 $(tag).css('opacity',opacity);
  70.                 if(opacity < 0 ){
  71.                     clearInterval(obj);
  72.                     $(tag).remove();
  73.                 }
  75.             },40);
  76.         }
  77.     </script>
  78. </body>
  79. </html>
View Code

7.随鼠标移动的框

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
  9.         <div id="title" style="background-color: black;height: 40px;"></div>
  10.         <div style="height: 300px;"></div>
  11.     </div>
  12. <script type="text/javascript" src="jquery-1.12.4.js"></script>
  13. <script>
  14.     $(function(){
  15.         $('#title').mouseover(function(){
  16.             $(this).css('cursor','move');
  17.         });
  18.         $("#title").mousedown(function(e){
  19.             //console.log($(this).offset());
  20.             var _event = e || window.event;
  21.             var ord_x = _event.clientX;
  22.             var ord_y = _event.clientY;
  24.             var parent_left = $(this).parent().offset().left;
  25.             var parent_top = $(this).parent().offset().top;
  27.             $('#title').on('mousemove', function(e){
  28.                 var _new_event = e || window.event;
  29.                 var new_x = _new_event.clientX;
  30.                 var new_y = _new_event.clientY;
  32.                 var x = parent_left + (new_x - ord_x);
  33.                 var y = parent_top + (new_y - ord_y);
  35.                 $(this).parent().css('left',x+'px');
  36.                 $(this).parent().css('top',y+'px');
  38.             })
  39.         });
  40.         $("#title").mouseup(function(){
  41.             $("#title").off('mousemove');
  42.         });
  43.     })
  44. </script>
  45. </body>
  46. </html>
View Code

8.表单验证

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .error{
  8.             color: red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <form id="f1" action="s5.html" method="POST">
  14.         <div><input name="n1" tex = "用户名" type="text" /></div>
  15.         <div><input name="n2" tex = "密码" type="password" /></div>
  16.         <div><input name="n3" tex = "邮箱" type="text" /></div>
  17.         <div><input name="n4" tex = "端口" type="text" /></div>
  18.         <div><input name="n5" tex = "IP" type="text" /></div>
  19.  
  20.         <input type="submit" value="提交" />
  21.     </form>
  22.     <script src="jquery-1.12.4.js"></script>
  23.     <script>
  24.         // 当页面框架加载完毕后，自动执行
  25. //        $(function(){
  26. //            $.Login('#f1')
  27. //        });
  28. //
  29.         $(function(){
  30.             // 当页面所有元素完全加载完毕后，执行
  31.             $(':submit').click(function () {
  33.                 $('.error').remove();
  34.                 var flag = true;
  35.                 $('#f1').find('input[type="text"],input[type="password"]').each(function () {
  36.                     var v = $(this).val();
  37.                     var n = $(this).attr('tex');
  39.                     if(v.length <= 0){
  40.                         flag = false;
  41.                         var tag = document.createElement('span');
  42.                         tag.className = "error";
  43.                         tag.innerHTML = n + "必填";
  44.                         $(this).after(tag);
  45.                         // return false;
  46.                     }
  47.                 });
  48.                 return flag;
  50.         });
  51.         });
  53.     </script>
  54. </body>
  55. </html>
View Code

9.轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul{
  12.             list-style: none;
  13.         }
  14.         .out{
  15.             width: 730px;
  16.             height: 454px;
  17.             margin: 50px auto;
  18.             position: relative;
  19.         }
  20.         .out .img li{
  21.             position: absolute;
  22.             left: 0;
  23.             top: 0;
  24.         }
  25.         .out .num{
  26.             position: absolute;
  27.             left:0;
  28.             bottom: 20px;
  29.             text-align: center;
  30.             font-size: 0;
  31.             width: 100%;
  32.         }
  33.         .out .btn{
  34.             position: absolute;
  35.             top:50%;
  36.             margin-top: -30px;
  37.             width: 30px;
  38.             height: 60px;
  39.             background-color: aliceblue;
  40.             color: black;
  41.             text-align: center;
  42.             line-height: 60px;
  43.             font-size: 40px;
  44.             display: none;
  45.         }
  46.         .out .num li{
  47.             width: 20px;
  48.             height: 20px;
  49.             background-color: black;
  50.             color: #fff;
  51.             text-align: center;
  52.             line-height: 20px;
  53.             border-radius: 60%;
  54.             display: inline;
  55.             font-size: 18px;
  56.             margin: 0 10px;
  57.             cursor: pointer;
  58.         }
  59.         .out .num li.active{
  60.             background-color: red;
  61.         }
  62.         .out .left{
  63.             left: 0;
  64.         }
  65.         .out .right{
  66.             right: 0;
  67.         }
  68.         .out:hover .btn{
  69.             display: block;
  70.             color: white;
  71.             font-weight: 900;
  72.             background-color: black;
  73.             opacity: 0.8;
  74.             cursor: pointer;
  75.         }
  76.         .out img {
  77.             height: 100%;
  78.             width: 100%;
  79.         }
  80.     </style>
  81. </head>
  82. <body>
  83.      <div class="out">
  84.          <ul class="img">
  85.              <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
  86.              <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
  87.              <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
  88.              <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
  89.              <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
  90.          </ul>
  91.  
  92.          <ul class="num">
  93.              <!--<li class="active">1</li>-->
  94.              <!--<li>2</li>-->
  95.              <!--<li>3</li>-->
  96.              <!--<li>4</li>-->
  97.              <!--<li>5</li>-->
  98.          </ul>
  99.  
  100.          <div class="left btn"><</div>
  101.          <div class="right btn">></div>
  102.  
  103.      </div>
  104.  
  105.     <script src="jquery-1.12.4.js"></script>
  106.     <script>
  108.         $(function(){
  109.             var size=$(".img li").size();
  110.             for (var i= 1;i<=size;i++){
  111.                 var li="<li>"+i+"</li>";
  112.                 $(".num").append(li);
  113.             }
  114.             $(".num li").eq(0).addClass("active");
  117.             $(".num li").mouseover(function(){
  118.                $(this).addClass("active").siblings().removeClass("active");
  119.                var index=$(this).index();
  120.                i=index;
  121.                $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
  122.             });
  125.         i=0;
  126.         var t=setInterval(move,1500);
  128.         function move(){
  129.             i++;
  130.             if(i==size){
  131.                 i=0;
  132.             }
  133.             $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  134.             $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  135.         }
  137.         function moveL(){
  138.             i--;
  139.             if(i==-1){
  140.                 i=size-1;
  141.             }
  142.             $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  143.             $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  144.         }
  146.         $(".out").hover(function(){
  147.             clearInterval(t);
  148.         },function(){
  149.             t=setInterval(move,1500);
  150.         });
  152.         $(".out .right").click(function(){
  153.             move()
  154.         });
  155.         $(".out .left").click(function(){
  156.            moveL()
  157.         })
  159.         });
  160.     </script>
  161.  
  162. </body>
  163. </html>
View Code

10.返回顶部

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .divH {
  8.             height: 1800px;
  9.         }
  10.         .divT {
  11.             width: 50px;
  12.             height: 50px;
  13.             font-size: 23px;
  14.             background-color: #2F4F4F;
  15.             color: white;
  16.             position: fixed;
  17.             right: 18px;
  18.             bottom: 18px;
  19.         }
  20.         .divT:hover{
  21.             cursor: pointer;
  22.         }
  23.         .hide {
  24.             display: none;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="divH"></div>
  30.     <div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div>
  31.  
  32.     <script src="jquery-1.12.4.js"></script>
  33.     <script>
  34.         window.onscroll = function () {
  35.             var current = $(window).scrollTop();
  36.             if (current > 180){
  37.                 $(".divT").removeClass("hide");
  38.             }else {
  39.                 $(".divT").addClass("hide");
  40.             }
  41.         };
  43.         function ReturnTop() {
  44.             $(window).scrollTop(0);
  45.         }
  46.     </script>
  47. </body>
  48. </html>
View Code

11.左侧菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.           .menu{
  8.               height: 600px;
  9.               width: 30%;
  10.               background-color: #2F4F4F;
  11.               float: left;
  12.           }
  13.          .title{
  14.              line-height: 50px;
  15.              color: #ddd;
  16.          }
  17.          .title:hover{
  18.              cursor: pointer;
  19.              color: lightcyan;
  20.              font-size: 18px;
  21.          }
  22.          .hide{
  23.              display: none;
  24.          }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <div class="outer">
  30.         <div class="menu">
  31.             <div class="item">
  32.                 <div class="title" onclick="Show(this);">菜单一</div>
  33.                 <div class="con">
  34.                     <div>111</div>
  35.                     <div>111</div>
  36.                     <div>111</div>
  37.                 </div>
  38.             </div>
  39.             <div class="item">
  40.                 <div class="title" onclick="Show(this);">菜单二</div>
  41.                 <div class="con hide">
  42.                     <div>222</div>
  43.                     <div>222</div>
  44.                     <div>222</div>
  45.                 </div>
  46.             </div>
  47.             <div class="item">
  48.                 <div class="title" onclick="Show(this);">菜单三</div>
  49.                 <div class="con hide">
  50.                     <div>333</div>
  51.                     <div>333</div>
  52.                     <div>333</div>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </div>
  57.  
  58.     <script src="jquery-1.12.4.js"></script>
  59.     <script>
  60.         function Show(self) {
  61.             $(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
  62.         }
  63.     </script>
  64. </body>
  65. </html>
View Code

12.显示和隐藏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <!--1 隐藏与显示-->
  9.     <!--2 淡入淡出-->
  10.     <!--3 滑动-->
  11.     <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->
  12.  
  13.     <p>hello</p>
  14.     <button id="hide">隐藏</button>
  15.     <button id="show">显示</button>
  16.     <button id="toggle">隐藏/显示</button>
  17.  
  18.     <script src="jquery-1.12.4.js"></script>
  19.     <script>
  21.         $(document).ready(function(){
  22.             $("#hide").click(function(){
  23.                 $("p").hide(1000);
  24.             });
  25.             $("#show").click(function(){
  26.                 $("p").show(1000);
  27.             });
  29.         //用于切换被选元素的 hide() 与 show() 方法。
  30.             $("#toggle").click(function(){
  31.                 $("p").toggle(2000);
  32.             });
  33.         });
  35.     </script>
  36. </body>
  37. </html>
View Code

13.滑动和隐藏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #flipshow,#content,#fliphide,#toggle{
  8.             padding: 5px;
  9.             text-align: center;
  10.             background-color: blueviolet;
  11.             border:solid 1px red;
  13.         }
  14.         #content{
  15.             padding: 50px;
  16.             display: none;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.  
  22.     <div id="flipshow">出现</div>
  23.     <div id="fliphide">隐藏</div>
  24.     <div id="toggle">toggle</div>
  25.     <div id="content">helloworld</div>
  26.  
  27.     <script src="jquery-1.12.4.js"></script>
  28.     <script>
  29.         $(document).ready(function(){
  30.               $("#flipshow").click(function(){
  31.                  $("#content").slideDown(1000);
  32.               });
  33.               $("#fliphide").click(function(){
  34.                  $("#content").slideUp(1000);
  35.               });
  36.               $("#toggle").click(function(){
  37.                  $("#content").slideToggle(1000);
  38.               })
  39.           });
  40.     </script>
  41.  
  42. </body>
  43. </html>
View Code

14.添加与删除

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div class="outer">
  9.            <div class="section">
  10.                <div class="icons" style="display: inline-block">
  11.                    <a onclick="Add(this);"><button>+</button></a>
  12.                </div>
  13.                <div class="inputs" style="display: inline-block">
  14.                    <input type="checkbox">
  15.                    <input type="text" value="IP">
  16.                </div>
  17.            </div>
  18.        </div>
  19.  
  20.     <script src="jquery-1.12.4.js"></script>
  21.     <script>
  22.         function Add(self) {
  23.             $(self).parentsUntil("outer").clone().find("a").html("<button>-</button>").attr("onclick","Remove(this);").end().eq(1).appendTo(".outer");
  24.         }
  25.         function Remove(self) {
  26.             $(self).parentsUntil("outer").eq(1).remove();
  27.         }
  28.     </script>
  29. </body>
  30. </html>
View Code

15.商品放大镜

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <meta name="viewport" content="width=device-width">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=8">
  7.     <title>购物商城</title>
  8.  
  9.     <style>
  10.             *{
  11.                 margin: 0;
  12.                 padding: 0;
  13.             }
  14.             .outer{
  15.                 position:relative;
  16.                 width:350px;
  17.                 height:350px;
  18.                 border:1px solid black;
  19.             }
  20.             .outer .small-box{
  21.                 position: relative;
  22.                 z-index: 1;
  23.             }
  24.             .outer .small-box .mark{
  25.                 position: absolute;
  26.                 display: block;
  27.                 width: 350px;
  28.                 height: 350px;
  29.                 background-color: #fff;
  30.                 filter: alpha(opacity=0);
  31.                 opacity: 0;
  32.                 z-index: 10;
  33.             }
  34.             .outer .small-box .float-box{
  35.                 display: none;
  36.                 width: 175px;
  37.                 height: 175px;
  38.                 position: absolute;
  39.                 background: #DAEEFC;
  40.                 filter: alpha(opacity=40);
  41.                 opacity: 0.4;
  42.             }
  43.             .outer .big-box{
  44.                 position: absolute;
  45.                 top: 0;
  46.                 left: 351px;
  47.                 width: 350px;
  48.                 height: 350px;
  49.                 overflow: hidden;
  50.                 border: 1px solid transparent;
  51.                 z-index: 1;
  52.             }
  53.             .outer .big-box img{
  54.                 position: absolute;
  55.                 z-index: 5
  56.             }
  57.     </style>
  58. </head>
  59. <body>
  60.  
  61.     <div  class="outer">
  62.         <div  class="small-box">
  63.             <div  class="mark"></div>
  64.             <div  class="float-box" ></div>
  65.             <img width="350" height="350" src="fanye.jpg">
  66.         </div>
  67.         <div class="big-box">
  68.             <img width="900px" height="900px" src="fanye.jpg" >
  69.         </div>
  70.     </div>
  71.  
  72.  
  73. <script src="jquery-1.12.4.js"></script>
  74.  
  75. <script>
  76.    $(function(){
  77.         $(".mark").mouseover(function () {
  78.             $(".float-box").css("display","block");
  79.             $(".big-box").css("display","block");
  80.         });
  82.         $(".mark").mouseout(function () {
  83.             $(".float-box").css("display","none");
  84.             $(".big-box").css("display","none");
  85.         });
  89.         $(".mark").mousemove(function (e) {
  91.             var _event = e || window.event;  //兼容多个浏览器的event参数模式
  92.  
  93.             var float_box_width  = $(".float-box")[0].offsetWidth;
  94.             var float_box_height = $(".float-box")[0].offsetHeight;//175,175
  95.  
  96.  
  97.             var float_box_width_half  =  float_box_width / 2;
  98.             var float_box_height_half =  float_box_height/ 2;//87.5,87.5
  99.  
  100.  
  101.             var small_box_width  =  $(".outer")[0].offsetWidth;
  102.             var small_box_height =  $(".outer")[0].offsetHeight;//360,360
  103.  
  104.  
  105.             var mouse_left = _event.clientX   - float_box_width_half;
  106.             var mouse_top = _event.clientY  - float_box_height_half;
  109.             if (mouse_left < 0) {
  110.                 mouse_left = 0;
  111.             } else if (mouse_left > small_box_width - float_box_width) {
  112.                 mouse_left = small_box_width - float_box_width;
  113.             }
  114.             if (mouse_top < 0) {
  115.                 mouse_top = 0;
  116.             } else if (mouse_top > small_box_height - float_box_height) {
  117.                 mouse_top = small_box_height - float_box_height;
  118.             }
  120.             $(".float-box").css("left",mouse_left + "px");
  121.             $(".float-box").css("top",mouse_top + "px");
  124.             var percentX = ($(".big-box img")[0].offsetWidth - $(".big-box")[0].offsetWidth) / (small_box_width - float_box_width);
  125.             var percentY = ($(".big-box img")[0].offsetHeight - $(".big-box")[0].offsetHeight) / (small_box_height - float_box_height);
  126.             console.log($(".big-box img")[0].offsetWidth,$(".big-box")[0].offsetWidth,small_box_width,float_box_width)
  127.             console.log(percentX,percentY)
  128.             $(".big-box img").css("left",-percentX * mouse_left + "px");
  129.             $(".big-box img").css("top",-percentY * mouse_top + "px")
  131.         })
  132.    })
  134. </script>
  135. </body>
  136. </html>
View Code

16.商品分类

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .hide{
  12.             display:none;
  13.         }
  14.         .header-nav {
  15.             height: 39px;
  16.             background: #c9033b;
  17.         }
  18.         .header-nav .bg{
  19.             background: #c9033b;
  20.         }
  21.         .header-nav .nav-allgoods .menuEvent {
  22.             display: block;
  23.             height: 39px;
  24.             line-height: 39px;
  25.             text-decoration: none;
  26.             color: #fff;
  27.             text-align: center;
  28.             font-weight: bold;
  29.             font-family: 微软雅黑;
  30.             color: #fff;
  31.             width: 100px;
  32.         }
  33.         .header-nav .nav-allgoods .menuEvent .catName {
  34.             height: 39px;
  35.             line-height: 39px;
  36.             font-size: 15px;
  37.         }
  38.         .header-nav .nav-allmenu a {
  39.             display: inline-block;
  40.             height: 39px;
  41.             vertical-align: top;
  42.             padding: 0 15px;
  43.             text-decoration: none;
  44.             color: #fff;
  45.             float: left;
  46.         }
  47.         .header-menu a{
  48.             color:#656565;
  49.         }
  50.         .header-menu .menu-catagory{
  51.             position: absolute;
  52.             background-color: #fff;
  53.             border-left:1px solid #fff;
  54.             height: 316px;
  55.             width: 230px;
  56.              z-index: 4;
  57.              float: left;
  58.         }
  59.         .header-menu .menu-catagory .catagory {
  60.             border-left:4px solid #fff;
  61.             height: 104px;
  62.             border-bottom: solid 1px #eaeaea;
  63.         }
  64.         .header-menu .menu-catagory .catagory:hover {
  65.             height: 102px;
  66.             border-left:4px solid #c9033b;
  67.             border-bottom: solid 1px #bcbcbc;
  68.             border-top: solid 1px #bcbcbc;
  69.         }
  70.         .header-menu .menu-content .item{
  71.             margin-left:230px;
  72.             position:absolute;
  73.             background-color:white;
  74.             height:314px;
  75.             width:500px;
  76.             z-index:4;
  77.             float:left;
  78.             border: solid 1px #bcbcbc;
  79.             border-left:0;
  80.             box-shadow: 1px 1px 5px #999;
  81.         }
  82.     </style>
  83. </head>
  84. <body>
  85.     <div class="pg-header">
  86.  
  87.     <div class="header-nav">
  88.         <div class="container narrow bg">
  89.             <div class="nav-allgoods left">
  90.                 <a id="all_menu_catagory" href="#" class="menuEvent">
  91.                     <b class="catName">全部商品分类</b>>
  92.                     <span class="arrow" style="display: inline-block;vertical-align: top;"></span>
  93.                 </a>
  94.             </div>
  95.         </div>
  96.     </div>
  97.     <div class="header-menu">
  98.         <div class="container narrow hide">
  99.             <div id="nav_all_menu" class="menu-catagory">
  100.                 <div class="catagory" float-content="one">
  101.                     <div class="title">家电</div>
  102.                     <div class="body">
  103.                         <a href="#">空调</a>
  104.                     </div>
  105.                 </div>
  106.                 <div class="catagory" float-content="two">
  107.                     <div class="title">床上用品</div>
  108.                     <div class="body">
  109.                         <a href="http://www.baidu.com">床单</a>
  110.                     </div>
  111.                 </div>
  112.                 <div class="catagory" float-content="three">
  113.                     <div class="title">水果</div>
  114.                     <div class="body">
  115.                         <a href="#">橘子</a>
  116.                     </div>
  117.                 </div>
  118.             </div>
  119.  
  120.             <div id="nav_all_content" class="menu-content">
  121.                 <div class="item hide" float-id="one">
  122.  
  123.                     <dl>
  124.                         <dt><a href="#" class="red">厨房用品</a></dt>
  125.                         <dd>
  126.                             <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>
  127.                         </dd>
  128.                     </dl>
  129.                     <dl>
  130.                         <dt><a href="#" class="red">厨房用品</a></dt>
  131.                         <dd>
  132.                             <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>
  133.  
  134.                         </dd>
  135.                     </dl>
  136.                     <dl>
  137.                         <dt><a href="#" class="red">厨房用品</a></dt>
  138.                         <dd>
  139.                             <span>| <a href="#">菜板</a> </span>
  140.                         </dd>
  141.                     </dl>
  142.                     <dl>
  143.                         <dt><a href="#" class="red">厨房用品</a></dt>
  144.                         <dd>
  145.                             <span>| <a href="#" target="_blank" title="碗">碗</a> </span>
  146.  
  147.                         </dd>
  148.                     </dl>
  149.  
  150.                 </div>
  151.                 <div class="item hide" float-id="two">
  152.                     <dl>
  153.                         <dt><a href="#" class="red">床上用品</a></dt>
  154.                         <dd>
  155.                             <span>| <a href="#" target="_blank" title="">枕头</a> </span>
  156.  
  157.                         </dd>
  158.                     </dl>
  159.                     <dl>
  160.                         <dt><a href="#" class="red">床上用品</a></dt>
  161.                         <dd>
  162.                             <span>| <a href="#" target="_blank" title="角阀">夏凉被</a> </span>
  163.  
  164.                         </dd>
  165.                     </dl>
  166.                     <dl>
  167.                         <dt><a href="#" class="red">床上用品</a></dt>
  168.                         <dd>
  169.                             <span>| <a href="#" target="_blank" title="角阀">嘿嘿嘿</a> </span>
  170.  
  171.                         </dd>
  172.                     </dl>
  173.                 </div>
  174.                 <div class="item hide" float-id="three">
  175.                     <dl>
  176.                         <dt><a href="#" class="red">厨房用品</a></dt>
  177.                         <dd>
  178.                             <span>| <a href="#" target="_blank" title="角阀">微波炉</a> </span>
  179.  
  180.                         </dd>
  181.                     </dl>
  182.                     <dl>
  183.                         <dt><a href="#" class="red">厨房用品</a></dt>
  184.                         <dd>
  185.                             <span>| <a href="http://www.meilele.com/category-jiaofa" target="_blank" title="角阀">金菜刀</a> </span>
  186.  
  187.                         </dd>
  188.                     </dl>
  189.                 </div>
  190.             </div>
  191.         </div>
  192.     </div>
  193. </div>
  194.  
  195. <script src="jquery-1.12.4.js"></script>
  196. <script>
  197.     $(function () {
  198.         Change("#all_menu_catagory","#nav_all_menu","#nav_all_content")
  199.     });
  201.     function Change(menuF,menuS,menuT) {
  202.         $(menuF).bind({
  203.             "mouseover":function () {
  204.             $(menuS).parent().removeClass("hide");
  205.         },"mouseout":function () {
  206.             $(menuS).parent().addClass("hide");
  207.         }
  208.         });
  210.         $(menuS).children().bind({
  211.             "mouseover":function () {
  212.                 $(menuS).parent().removeClass("hide");
  213.                 var $item = $(menuT).find('[float-id="' +　$(this).attr("float-content") + '"]');
  214.                 $item.removeClass("hide").siblings().addClass("hide");
  215.             },
  216.             "mouseout":function () {
  217.                 $(menuS).parent().addClass("hide");
  218.                 $(menuT).parent().addClass("hide");
  219.             }
  220.         });
  222.         $(menuT).children().bind({
  223.             "mouseover":function () {
  224.                 $(menuS).parent().removeClass("hide");
  225.                 $(this).removeClass("hide");
  226.             },
  227.             "mouseout":function () {
  228.                 $(menuS).parent().addClass("hide");
  229.                 $(this).addClass("hide");
  230.             }
  231.         })
  232.     }
  233. </script>
  234. </body>
  235. </html>
View Code

 

原文链接：http://www.cnblogs.com/zmdComeOn/p/11340095.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号