星空网 > 软件开发 > Java

jQuery实例集合

一、返回顶部

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .divH {      height: 1800px;    }    .divT {      width: 50px;      height: 50px;      font-size: 23px;      background-color: #2F4F4F;      color: white;      position: fixed;      right: 18px;      bottom: 18px;    }    .divT:hover{      cursor: pointer;    }    .hide {      display: none;    }  </style></head><body>  <div ></div>  <div onclick="ReturnTop();"><strong>返回顶部</strong></div>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    window.onscroll = function () {      var current = $(window).scrollTop();      if (current > 180){        $(".divT").removeClass("hide");      }else {        $(".divT").addClass("hide");      }    };    function ReturnTop() {      $(window).scrollTop(0);    }  </script></body></html>

二、左侧菜单

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>     .menu{       height: 600px;       width: 30%;       background-color: #2F4F4F;       float: left;     }     .title{       line-height: 50px;       color: #ddd;     }     .title:hover{       cursor: pointer;       color: lightcyan;       font-size: 18px;     }     .hide{       display: none;     }  </style></head><body>  <div >    <div >      <div >        <div onclick="Show(this);">菜单一</div>        <div >          <div>111</div>          <div>111</div>          <div>111</div>        </div>      </div>      <div >        <div onclick="Show(this);">菜单二</div>        <div >          <div>222</div>          <div>222</div>          <div>222</div>        </div>      </div>      <div >        <div onclick="Show(this);">菜单三</div>        <div >          <div>333</div>          <div>333</div>          <div>333</div>        </div>      </div>    </div>  </div>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    function Show(self) {      $(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");    }  </script></body></html>

三、tab菜单

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{      margin: 0px;      padding: 0px;    }    .tab_outer{      margin: 0px auto;      width: 60%;    }    .menu{      background-color: #cccccc;      border: 1px solid #ccc;      line-height: 40px;    }    .menu li{      display: inline-block;      color: white;    }    .menu li:hover {      cursor: pointer;    }    .menu a{      padding: 11px;    }    .content{      border: 1px solid #ccc;      height: 300px;      font-size: 30px;    }    .hide{      display: none;    }    .current{      background-color: #0099dd;      color: black;    }  </style></head><body>  <div >     <ul >       <li xxx="c1" onclick="Tab(this);">菜单一</li>       <li xxx="c2" onclick="Tab(this);">菜单二</li>       <li xxx="c3" onclick="Tab(this);">菜单三</li>     </ul>     <div >       <div id="c1">内容一</div>       <div id="c2" >内容二</div>       <div id="c3" >内容三</div>     </div>  </div>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    function Tab(self) {      $(self).addClass("current").siblings().removeClass("current");      var x = "#" + $(self).attr("xxx");      $(x).removeClass("hide").siblings().addClass("hide");    }  </script></body></html>

 

四、根据章节滚动的菜单

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    body{      margin: 0;      background-color: #dddddd;    }    .w{      margin: 0 auto;      width: 980px;    }    .pg-header{      background-color: black;      color: white;      height: 48px;    }    .pg-body .menu{      position: absolute;      left: 200px;      width: 180px;      background-color: white;      float: left;    }    li {      list-style-type: none;    }    .pg-body .menu .active{      background-color: #425a66;      color: white;    }    .pg-body .fixed{      position: fixed;      top: 10px;    }    .pg-body .content{      position: absolute;      left: 385px;      right: 200px;      background-color: white;      float: left;    }    .pg-body .content .item{      height: 900px;    }  </style></head><body>  <div >    <div ></div>  </div>  <div >    <div id="menu" >      <ul>        <li menu="funcOne">第一章</li>        <li menu="funcTwo">第二章</li>        <li menu="funcStree">第三章</li>      </ul>    </div>    <div id="content" >      <div con="funcOne">床前明月管</div>      <div con="funcTwo">疑是地上霜</div>      <div con="funcStree" >我是郭德纲</div>    </div>  </div>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    window.onscroll = function () {      var onTop = $(window).scrollTop();      if (onTop >= 48){        $("#menu").addClass("fixed");      }else {        $("#menu").removeClass("fixed");      }      var flag = false;      $(".item").each(function () {        var topH = $(this).offset().top;        var HH = $(this).height() + topH;        var wH = $(window).height();        if ((wH + onTop) == HH){          $("ul .active").removeClass("active");          $("li:last").addClass("active");          flag = true;          return        }        if (flag){          return        }        var menuCon = $(this).attr("con");        if ((topH < onTop) && (onTop < HH)){          $("ul [menu='" + menuCon +"']").addClass("active");        }else {          $("ul [menu='" + menuCon +"']").removeClass("active");        }      })    }  </script></body></html>

五、淡入淡出

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>   <button id="in">fadein</button>   <button id="out">fadeout</button>   <button id="toggle">fadetoggle</button>   <button id="fadeto">fadeto</button>   <div id="id1" ></div>   <div id="id2" ></div>   <div id="id3" ></div>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    $(document).ready(function(){      $("#in").click(function(){        $("#id1").fadeIn(1000);        $("#id2").fadeIn(1000);        $("#id3").fadeIn(1000);      });      $("#out").click(function(){        $("#id1").fadeOut(1000);        $("#id2").fadeOut(1000);        $("#id3").fadeOut(1000);      });      $("#toggle").click(function(){        $("#id1").fadeToggle(1000);        $("#id2").fadeToggle(1000);        $("#id3").fadeToggle(1000);      });      $("#fadeto").click(function(){        $("#id1").fadeTo(1000,0.4);        $("#id2").fadeTo(1000,0.5);        $("#id3").fadeTo(1000,0);      });    });  </script></body></html>

六、滑动

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    #flipshow,#content,#fliphide,#toggle{      padding: 5px;      text-align: center;      background-color: blueviolet;      border:solid 1px red;    }    #content{      padding: 50px;      display: none;    }  </style></head><body>  <div id="flipshow">出现</div>  <div id="fliphide">隐藏</div>  <div id="toggle">toggle</div>  <div id="content">helloworld</div>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    $(document).ready(function(){       $("#flipshow").click(function(){         $("#content").slideDown(1000);       });       $("#fliphide").click(function(){         $("#content").slideUp(1000);       });       $("#toggle").click(function(){         $("#content").slideToggle(1000);       })     });  </script></body></html>

 

七、显示与隐藏

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <!--1 隐藏与显示-->  <!--2 淡入淡出-->  <!--3 滑动-->  <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->  <p>hello</p>  <button id="hide">隐藏</button>  <button id="show">显示</button>  <button id="toggle">隐藏/显示</button>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    $(document).ready(function(){      $("#hide").click(function(){        $("p").hide(1000);      });      $("#show").click(function(){        $("p").show(1000);      });    //用于切换被选元素的 hide() 与 show() 方法。      $("#toggle").click(function(){        $("p").toggle(2000);      });    });  </script></body></html>

八,添加和删除标签

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body><div >      <div >        <div >          <a onclick="Add(this);"><button>+</button></a>        </div>        <div >          <input type="checkbox">          <input type="text" value="IP">        </div>      </div>    </div>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    function Add(self) {      $(self).parentsUntil("outer").clone().find("a").html("<button>-</button>").attr("onclick","Remove(this);").end().eq(1).appendTo(".outer");    }    function Remove(self) {      $(self).parentsUntil("outer").eq(1).remove();    }  </script></body></html>

 

九、商城放大镜

<!DOCTYPE html><html lang="en"><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <meta name="viewport" content="width=device-width">  <meta http-equiv="X-UA-Compatible" content="IE=8">  <title>购物商城</title>  <style>      *{        margin: 0;        padding: 0;      }      .outer{        position:relative;        width:350px;        height:350px;        border:1px solid black;      }      .outer .small-box{        position: relative;        z-index: 1;      }      .outer .small-box .mark{        position: absolute;        display: block;        width: 350px;        height: 350px;        background-color: #fff;        filter: alpha(opacity=0);        opacity: 0;        z-index: 10;      }      .outer .small-box .float-box{        display: none;        width: 175px;        height: 175px;        position: absolute;        background: #DAEEFC;        filter: alpha(opacity=40);        opacity: 0.4;      }      .outer .big-box{        position: absolute;        top: 0;        left: 351px;        width: 350px;        height: 350px;        overflow: hidden;        border: 1px solid transparent;        z-index: 1;      }      .outer .big-box img{        position: absolute;        z-index: 5      }  </style></head><body>  <div >    <div >      <div ></div>      <div  ></div>      <img width="350" height="350" src='/images/loading.gif' data-original="../../css/1.jpg">    </div>    <div >      <img width="900px" height="900px" src='/images/loading.gif' data-original="../../css/1.jpg" >    </div>  </div><script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script><script>  $(function(){    $(".mark").mouseover(function () {      $(".float-box").css("display","block");      $(".big-box").css("display","block");    });    $(".mark").mouseout(function () {      $(".float-box").css("display","none");      $(".big-box").css("display","none");    });    $(".mark").mousemove(function (e) {      var _event = e || window.event; //兼容多个浏览器的event参数模式      var float_box_width = $(".float-box")[0].offsetWidth;      var float_box_height = $(".float-box")[0].offsetHeight;//175,175      var float_box_width_half = float_box_width / 2;      var float_box_height_half = float_box_height/ 2;//87.5,87.5      var small_box_width = $(".outer")[0].offsetWidth;      var small_box_height = $(".outer")[0].offsetHeight;//360,360      var mouse_left = _event.clientX  - float_box_width_half;      var mouse_top = _event.clientY - float_box_height_half;      if (mouse_left < 0) {        mouse_left = 0;      } else if (mouse_left > small_box_width - float_box_width) {        mouse_left = small_box_width - float_box_width;      }      if (mouse_top < 0) {        mouse_top = 0;      } else if (mouse_top > small_box_height - float_box_height) {        mouse_top = small_box_height - float_box_height;      }      $(".float-box").css("left",mouse_left + "px");      $(".float-box").css("top",mouse_top + "px");                  var percentX = ($(".big-box img")[0].offsetWidth - $(".big-box")[0].offsetWidth) / (small_box_width - float_box_width);      var percentY = ($(".big-box img")[0].offsetHeight - $(".big-box")[0].offsetHeight) / (small_box_height - float_box_height);      console.log($(".big-box img")[0].offsetWidth,$(".big-box")[0].offsetWidth,small_box_width,float_box_width)      console.log(percentX,percentY)      $(".big-box img").css("left",-percentX * mouse_left + "px");      $(".big-box img").css("top",-percentY * mouse_top + "px")    })  })</script></body></html>

10、商城顶部菜单

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{      margin: 0;      padding: 0;    }    .hide{      display:none;    }    .header-nav {      height: 39px;      background: #c9033b;    }    .header-nav .bg{      background: #c9033b;    }    .header-nav .nav-allgoods .menuEvent {      display: block;      height: 39px;      line-height: 39px;      text-decoration: none;      color: #fff;      text-align: center;      font-weight: bold;      font-family: 微软雅黑;      color: #fff;      width: 100px;    }    .header-nav .nav-allgoods .menuEvent .catName {      height: 39px;      line-height: 39px;      font-size: 15px;    }    .header-nav .nav-allmenu a {      display: inline-block;      height: 39px;      vertical-align: top;      padding: 0 15px;      text-decoration: none;      color: #fff;      float: left;    }    .header-menu a{      color:#656565;    }    .header-menu .menu-catagory{      position: absolute;      background-color: #fff;      border-left:1px solid #fff;      height: 316px;      width: 230px;       z-index: 4;       float: left;    }    .header-menu .menu-catagory .catagory {      border-left:4px solid #fff;      height: 104px;      border-bottom: solid 1px #eaeaea;    }    .header-menu .menu-catagory .catagory:hover {      height: 102px;      border-left:4px solid #c9033b;      border-bottom: solid 1px #bcbcbc;      border-top: solid 1px #bcbcbc;    }    .header-menu .menu-content .item{      margin-left:230px;      position:absolute;      background-color:white;      height:314px;      width:500px;      z-index:4;      float:left;      border: solid 1px #bcbcbc;      border-left:0;      box-shadow: 1px 1px 5px #999;    }  </style></head><body>  <div >  <div >    <div >      <div >        <a id="all_menu_catagory" href="#" >          <b >全部商品分类</b>>          <span ></span>        </a>      </div>    </div>  </div>  <div >    <div >      <div id="nav_all_menu" >        <div float-content="one">          <div >家电</div>          <div >            <a href="#">空调</a>          </div>        </div>        <div float-content="two">          <div >床上用品</div>          <div >            <a href="http://www.baidu.com">床单</a>          </div>        </div>        <div float-content="three">          <div >水果</div>          <div >            <a href="#">橘子</a>          </div>        </div>      </div>      <div id="nav_all_content" >        <div float-id="one">          <dl>            <dt><a href="#" >厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" >厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" >厨房用品</a></dt>            <dd>              <span>| <a href="#">菜板</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" >厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="碗">碗</a> </span>            </dd>          </dl>        </div>        <div float-id="two">          <dl>            <dt><a href="#" >床上用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="">枕头</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" >床上用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="角阀">夏凉被</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" >床上用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="角阀">嘿嘿嘿</a> </span>            </dd>          </dl>        </div>        <div float-id="three">          <dl>            <dt><a href="#" >厨房用品</a></dt>            <dd>              <span>| <a href="#" target="_blank" title="角阀">微波炉</a> </span>            </dd>          </dl>          <dl>            <dt><a href="#" >厨房用品</a></dt>            <dd>              <span>| <a href="http://www.meilele.com/category-jiaofa" target="_blank" title="角阀">金菜刀</a> </span>            </dd>          </dl>        </div>      </div>    </div>  </div></div><script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script><script>  $(function () {    Change("#all_menu_catagory","#nav_all_menu","#nav_all_content")  });  function Change(menuF,menuS,menuT) {    $(menuF).bind({      "mouseover":function () {      $(menuS).parent().removeClass("hide");    },"mouseout":function () {      $(menuS).parent().addClass("hide");    }    });    $(menuS).children().bind({      "mouseover":function () {        $(menuS).parent().removeClass("hide");        var $item = $(menuT).find('[float-id="' + $(this).attr("float-content") + '"]');        $item.removeClass("hide").siblings().addClass("hide");      },      "mouseout":function () {        $(menuS).parent().addClass("hide");        $(menuT).parent().addClass("hide");      }    });        $(menuT).children().bind({      "mouseover":function () {        $(menuS).parent().removeClass("hide");        $(this).removeClass("hide");      },      "mouseout":function () {        $(menuS).parent().addClass("hide");        $(this).addClass("hide");      }    })  }</script></body></html>

11、可拖动面板

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body>  <div >    <div id="title" >      <strong>标题</strong>    </div>    <div >      内容    </div>  </div><script type="text/javascript" src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script><script>  $(function () {    $('#title').mouseover(function () {      $(this).css('cursor','move');    }).mousedown(function (e) {      var _event = e || widows.event;      var ord_x = _event.clientX;      var ord_y = _event.clientY;      var parent_left = $(this).parent().offset().left;      var parent_top = $(this).parent().offset().top;      $(this).bind('mousemove',function (e) {        var _new_event = e || window.event;        var new_x = _new_event.clientX;        var new_y = _new_event.clientY;        var x = parent_left + (new_x - ord_x);        var y = parent_top + (new_y - ord_y);        $(this).parent().css('left',x+'px');        $(this).parent().css('top',y+'px');      })    }).mouseup(function () {      $(this).unbind('mousemove');    });  })</script></body></html>

12、模态对话框

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .shade{      position: fixed;      left: 0;      top: 0;      right: 0;      bottom: 0;      background: rgba(0,0,0,.6) ;      z-index: 20;    }    .modal{      position: fixed;      left: 50%;      top: 50%;      height: 300px;      width: 400px;      margin-top: -150px;      margin-left: -200px;      z-index: 30;      border: 1px solid #ddd;      background-color: white;    }    .hide{      display: none;    }    .modal form {      position: fixed;      left: 50%;      top: 50%;      height: 200px;      width: 229px;      border: 1px;      margin-left: -115px;      margin-top: -100px;    }    .modal form p {      float: right;      margin-top: 12px;    }    .modal form span {      float: right;      display: inline-block;      height: 18px;      width: 170px;      background-color: #FFEBEB;      text-align: center;      border: 1px solid #ffbdbe;      color: #e4393c;      font-size: 14px;      visibility: hidden;    }    .modal form [type="button"] {      position: absolute;      bottom: -30px;      left: 115px;    }    .modal form [value="提交"]{      left: 50px;    }  </style></head><body>  <div >    <input type="button" value="添加主机" onclick="return Add();" />    <table >      <thead>        <tr>          <th >主机名</th>          <th >IP</th>          <th >端口</th>          <th>操作</th>        </tr>      </thead>      <tbody>        <tr>          <td target="host">c1.com</td>          <td target="ip">1.1.1.1</td>          <td target="port">8888</td>          <td onclick="Edit(this);">Edit</td>        </tr>        <tr>          <td target="host">c2.com</td>          <td target="ip">1.1.1.1</td>          <td target="port">8888</td>          <td onclick="Edit(this);">Edit</td>        </tr>        <tr>          <td target="host">c3.com</td>          <td target="ip">1.1.1.1</td>          <td target="port">8888</td>          <td onclick="Edit(this);">Edit</td>        </tr>        <tr>          <td target="host">.com</td>          <td target="ip">1.1.1.1</td>          <td target="port">8888</td>          <td onclick="Edit(this);">Edit</td>        </tr>      </tbody>    </table>  </div>  <div ></div>  <div >    <form action="" method="get">      <p>主机名:<input type="text" id="host" name="host"><br><span></span></p>      <p>IP地址:<input type="text" id='ip' name="ip"><br><span></span></p>      <p>端口号:<input type="text" id='port' name="port"><br><span></span><br></p>      <input type="button" value="提交" onclick="return SubmitForm();">      <input type="button" value="取消" onclick="HideModal();">    </form>  </div>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    $(function () {      $("tr:even").css("background-color","#f5f5f5");    });    function Edit(ths) {      $(".shade,.modal").removeClass("hide");      prevList = $(ths).prevAll();      prevList.each(function () {        var text = $(this).text();        var target = $(this).attr("target");        $("#"+target).val(text);      });    }    function HideModal() {      $(".shade,.modal").addClass("hide");      $(".modal").find("input[type='text']").val("");      Addd = false;    }    function SubmitForm() {      var flag = Detection();      try {          if (Addd && flag){          $("tbody").append($("tr").last().clone());          $(".modal").find("input[type='text']").each(function () {            var value = $(this).val();            var name = $(this).attr("name");            ($("tr").last().children()).each(function () {              if ($(this).attr("target") == name){                $(this).text(value);                return              }                }            )});          Addd = false;          HideModal();          return false;        }      }catch (e){}      if (flag){        $(".modal").find("input[type='text']").each(function () {          var value = $(this).val();          var name = $(this).attr("name");          $(prevList).each(function () {            if ($(this).attr("target") == name){              $(this).text(value);              return            }              }          )});          $(".modal,.shade").addClass("hide");          HideModal();        }      return flag;      }        function Detection() {      var flag = true;      $(".modal").find("input[type='text']").each(function () {        var value = $(this).val();        if (value.length == 0){          $(this).next().next().css("visibility","visible").text("亲,不能为空");          flag = false;          return false;        }else {          $(this).next().next().css("visibility","hidden").text("");        }        if ($(this).attr('name') == "host"){          var r = /(\.com)$/;          if (r.test(value) == false){            $(this).next().next().css("visibility","visible").text("主机名必须以.com结尾");            flag = false;            return false;        }        }else if ($(this).attr('name') == "ip"){          var r2 = /^(([0-2]?[0-9][0-9]?)\.){3}([0-2]?[0-9][0-9]?)$/;          if (r2.test(value) == false){            $(this).next().next().css("visibility","visible").text("ip 地址格式有误");            flag = false;            return false;          }        }else if ($(this).attr('name') == "port"){          var r3 = /^([0-9]{1,5})$/;          if ((r3.test(value) == false) || (value > 65535)){            $(this).next().next().css("visibility","visible").text("端口必须为0-65535");            flag = false;            return false;          }        }else {          $(this).next().next().css("visibility","hidden").text("");        }    });    return flag;    }    function Add() {      Addd = true;      $(".shade,.modal").removeClass("hide");    }  </script></body></html>

13、轮播图

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{      margin: 0;      padding: 0;    }    ul{      list-style: none;    }    .out{      width: 730px;      height: 454px;      margin: 50px auto;      position: relative;    }    .out .img li{      position: absolute;      left: 0;      top: 0;    }    .out .num{      position: absolute;      left:0;      bottom: 20px;      text-align: center;      font-size: 0;      width: 100%;    }    .out .btn{      position: absolute;      top:50%;      margin-top: -30px;      width: 30px;      height: 60px;      background-color: aliceblue;      color: black;      text-align: center;      line-height: 60px;      font-size: 40px;      display: none;    }    .out .num li{      width: 20px;      height: 20px;      background-color: black;      color: #fff;      text-align: center;      line-height: 20px;      border-radius: 60%;      display: inline;      font-size: 18px;      margin: 0 10px;      cursor: pointer;    }    .out .num li.active{      background-color: red;    }    .out .left{      left: 0;    }    .out .right{      right: 0;    }    .out:hover .btn{      display: block;      color: white;      font-weight: 900;      background-color: black;      opacity: 0.8;      cursor: pointer;    }    .out img {      height: 100%;      width: 100%;    }  </style></head><body>   <div >     <ul >       <li><a href="#"><img src='/images/loading.gif' data-original="images/1.jpg" ></a></li>       <li><a href="#"><img src='/images/loading.gif' data-original="images/2.jpg" ></a></li>       <li><a href="#"><img src='/images/loading.gif' data-original="images/3.jpg" ></a></li>       <li><a href="#"><img src='/images/loading.gif' data-original="images/4.jpg" ></a></li>       <li><a href="#"><img src='/images/loading.gif' data-original="images/5.jpg" ></a></li>     </ul>     <ul >       <!--<li >1</li>-->       <!--<li>2</li>-->       <!--<li>3</li>-->       <!--<li>4</li>-->       <!--<li>5</li>-->     </ul>     <div ><</div>     <div >></div>   </div>  <script src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    $(function(){      var size=$(".img li").size();      for (var i= 1;i<=size;i++){        var li="<li>"+i+"</li>";        $(".num").append(li);      }      $(".num li").eq(0).addClass("active");      $(".num li").mouseover(function(){        $(this).addClass("active").siblings().removeClass("active");        var index=$(this).index();        i=index;        $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);      });    i=0;    var t=setInterval(move,1500);    function move(){      i++;      if(i==size){        i=0;      }      $(".num li").eq(i).addClass("active").siblings().removeClass("active");      $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);    }    function moveL(){      i--;      if(i==-1){        i=size-1;      }      $(".num li").eq(i).addClass("active").siblings().removeClass("active");      $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);    }    $(".out").hover(function(){      clearInterval(t);    },function(){      t=setInterval(move,1500);    });    $(".out .right").click(function(){      move()    });    $(".out .left").click(function(){      moveL()    })    });  </script></body></html>

14、编辑框

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    .edit-mode{      background-color: #b3b3b3;      padding: 8px;      text-decoration: none;      color: white;    }    .editing{      background-color: #f0ad4e;    }  </style></head><body>  <div >    <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />    <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />    <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />    <a id="edit_mode" href="javascript:void(0);" onclick="EditMode(this, '#tb1');">进入编辑模式</a>  </div>  <table border="1">    <thead>    <tr>      <th>选择</th>      <th>主机名</th>      <th>端口</th>      <th>状态</th>    </tr>    </thead>    <tbody id="tb1">      <tr>        <td><input type="checkbox" /></td>        <td edit="true">v1</td>        <td>v11</td>        <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>      </tr>      <tr>        <td><input type="checkbox" /></td>        <td edit="true">v1</td>        <td>v11</td>        <td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下线</td>      </tr>      <tr>        <td><input type="checkbox" /></td>        <td edit="true">v1</td>        <td>v11</td>        <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>      </tr>    </tbody>  </table>  <script type="text/javascript" src='/images/loading.gif' data-original="../../jquery-1.12.4.js"></script>  <script>    /*     监听是否已经按下control键     */    window.globalCtrlKeyPress = false;    window.onkeydown = function(event){      if(event && event.keyCode == 17){        window.globalCtrlKeyPress = true;      }    };    window.onkeyup = function(event){      if(event && event.keyCode == 17){        window.globalCtrlKeyPress = false;      }    };    /*     按下Control,联动表格中正在编辑的select     */    function MultiSelect(ths){      if(window.globalCtrlKeyPress){        var index = $(ths).parent().index();        var value = $(ths).val();        $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){          $(this).parent().parent().children().eq(index).children().val(value);        });      }    }  </script>  <script type="text/javascript">$(function(){  BindSingleCheck('#edit_mode', '#tb1');});function BindSingleCheck(mode, tb){  $(tb).find(':checkbox').bind('click', function(){    var $tr = $(this).parent().parent();    if($(mode).hasClass('editing')){      if($(this).prop('checked')){        RowIntoEdit($tr);      }else{        RowOutEdit($tr);      }    }  });}function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){  var sel= document.createElement('select');  $.each(attrs,function(k,v){    $(sel).attr(k,v);  });  $.each(csses,function(k,v){    $(sel).css(k,v);  });  $.each(option_dict,function(k,v){    var opt1=document.createElement('option');    var sel_text = v[item_value];    var sel_value = v[item_key];    if(sel_value==current_val){      $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));    }else{      $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));    }  });  return sel;}STATUS = [  {'id': 1, 'value': "在线"},  {'id': 2, 'value': "下线"}];BUSINESS = [  {'id': 1, 'value': "车上会"},  {'id': 2, 'value': "二手车"}];function RowIntoEdit($tr){  $tr.children().each(function(){    if($(this).attr('edit') == "true"){      if($(this).attr('edit-type') == "select"){        var select_val = $(this).attr('sel-val');        var global_key = $(this).attr('global-key');        var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);        $(this).html(selelct_tag);      }else{        var orgin_value = $(this).text();        var temp = "<input value='"+ orgin_value+"' />";        $(this).html(temp);      }    }  });}function RowOutEdit($tr){  $tr.children().each(function(){    if($(this).attr('edit') == "true"){      if($(this).attr('edit-type') == "select"){        var new_val = $(this).children(':first').val();        var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();        $(this).attr('sel-val', new_val);        $(this).text(new_text);      }else{        var orgin_value = $(this).children().first().val();        $(this).text(orgin_value);      }    }  });}function CheckAll(mode, tb){  if($(mode).hasClass('editing')){    $(tb).children().each(function(){      var tr = $(this);      var check_box = tr.children().first().find(':checkbox');      if(check_box.prop('checked')){      }else{        check_box.prop('checked',true);        RowIntoEdit(tr);      }    });  }else{    $(tb).find(':checkbox').prop('checked', true);  }}function CheckReverse(mode, tb){  if($(mode).hasClass('editing')){    $(tb).children().each(function(){      var tr = $(this);      var check_box = tr.children().first().find(':checkbox');      if(check_box.prop('checked')){        check_box.prop('checked',false);        RowOutEdit(tr);      }else{        check_box.prop('checked',true);        RowIntoEdit(tr);      }    });  }else{        $(tb).children().each(function(){      var tr = $(this);      var check_box = tr.children().first().find(':checkbox');      if(check_box.prop('checked')){        check_box.prop('checked',false);      }else{        check_box.prop('checked',true);      }    });  }}function CheckCancel(mode, tb){  if($(mode).hasClass('editing')){    $(tb).children().each(function(){      var tr = $(this);      var check_box = tr.children().first().find(':checkbox');      if(check_box.prop('checked')){        check_box.prop('checked',false);        RowOutEdit(tr);      }else{      }    });  }else{    $(tb).find(':checkbox').prop('checked', false);  }}function EditMode(ths, tb){  if($(ths).hasClass('editing')){    $(ths).removeClass('editing');    $(tb).children().each(function(){      var tr = $(this);      var check_box = tr.children().first().find(':checkbox');      if(check_box.prop('checked')){        RowOutEdit(tr);      }else{      }    });  }else{    $(ths).addClass('editing');    $(tb).children().each(function(){      var tr = $(this);      var check_box = tr.children().first().find(':checkbox');      if(check_box.prop('checked')){        RowIntoEdit(tr);      }else{      }    });  }}  </script></body></html>

 




原标题:jQuery实例集合

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

疫情之下的春节,Shopee跨境的供应链管理之道:https://www.ikjzd.com/articles/142077
外媒:支付品牌Klarna携手Maya Rudolph,为超级碗献上广告短片:https://www.ikjzd.com/articles/142078
立即下架!最新起诉品牌十几个,产品非常多,抓紧自查!:https://www.ikjzd.com/articles/142080
易仓科技获B轮4000万美元融资,TikTok计划在美推电商业务:https://www.ikjzd.com/articles/142081
P4P广告精准投放:https://www.ikjzd.com/articles/142082
选品思维:暴利独家不退货的电商神仙产品:https://www.ikjzd.com/articles/142084
亚马逊掀起算法革命:A9已死 COSMO当立? :https://www.kjdsnews.com/a/1836493.html
2月新茶饮开店腰斩 加盟门槛一降再降 :https://www.kjdsnews.com/a/1836494.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流