jQuery 多种高级页面属性和动画效果

╰+攻爆jí腚メ 2022-07-16 09:43 209阅读 0赞

完成目标：利用jQuery语法完成多种页面属性和动画效果

1.文字淡入淡出，显示及隐藏。

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.4.2.min.js"></script>
  7.     <script>
  8.         $(function () {
  9.             $('p').click(function () {
  10.                 $('p').toggle("slow")
  11.             })
  12.             $('div').click(function () {
  13.                 $('p').toggle("slow")
  14.             })
  15.         })
  17.     </script>
  18. </head>
  19. <body>
  20. <p>可隐藏。可显示</p>
  21. <p>可隐藏。可显示</p>
  22. <div>点击</div>
  23. </body>
  24. </html>

效果：

CenterCenter 1Center 2
2.点击按钮使文字放大。

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.4.2.min.js"></script>
  7.     <style>
  8.     </style>
  9.     <script>
  10.       $(function () {
  11.           $('#go').click(function () {
  12.               $('#block').animate({
  13.                   width: "90%",
  14.                   height: "100%",
  15.                   fontSize: "10em",
  16.                   borderWidth: 10
  17.               },1000)
  18.           })
  19.       })
  20.     </script>
  21. </head>
  22. <body>
  23. <button id="go"> Run</button>
  24. <div id="block">Hello!</div>
  25. </body>
  26. </html>

效果：

Center 3Center 4
3.图片或文字的左移或右移，并伴随逐渐消失和逐渐显示效果

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.4.2.min.js"></script>
  7.     <style>
  8.         .block{
  9.             background-image: url("../image/1.jpg");
  10.             width: 500px;
  11.             height: 500px;
  12.             position: relative;
  13.         }
  14.     </style>
  15.     <script>
  16.         $(function () {
  17.             $("#right").click(function(){
  18.                 $(".block").animate({left: '+150px',height: 'toggle', opacity: 'toggle'}, "slow");
  19.             });
  21.             $("#left").click(function(){
  22.                 $(".block").animate({left: '-150px'}, "slow");
  23.                 $(".block").animate({
  24.                     height: 'toggle', opacity: 'toggle'
  25.                 }, "slow");
  26.             });
  27.         })
  28.     </script>
  29. </head>
  30. <body>
  31. <button id="left">«</button>
  32. <button id="right">»</button>
  33. <div class="block"></div>
  34. </body>
  35. </html>

效果：

Center 5Center 6Center 7
4.利用jQuery代码完成对表格的修改、保存和CheckBox的全选功能。

方法1：不适用于大型表格和数据，多用于练习使用。

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.4.2.min.js"></script>
  7.     <script>
  8.         $(function () {
  9.             $('#checkAll').click(function () {
  10.                 if(this.checked){
  11.                     $('.check').attr("checked",true);
  12.                 }else {
  13.                     $('.check').attr("checked",false);
  14.                 }
  15.             })
  17.             $('.change').click(function () {
  18.                 var ok=$(this).parents("tr");
  19.                 var tdText1=ok.find("td:eq(1)").html();
  20.                 var tdText2=ok.find("td:eq(2)").html();
  21.                 var tdText3=ok.find("td:eq(3)").html();
  22.                 var a=$("<input type='text' id='name'>");
  23.                 var b=$("<input type='text' id='sex'>");
  24.                 var c=$("<input type='text' id='age'>");
  25.                 ok.find("td:eq(1)").html(a);
  26.                 ok.find("td:eq(2)").html(b);
  27.                 ok.find("td:eq(3)").html(c);
  28.                 a.val(tdText1);
  29.                 b.val(tdText2);
  30.                 c.val(tdText3);
  31.             })
  32.             $('.save').click(function () {
  33.                 var ok=$(this).parents("tr");
  34.                 var text=document.getElementById("name");
  35.                 var text1=document.getElementById("sex");
  36.                 var text2=document.getElementById("age");
  37.                 ok.find("td:eq(1)").html(text.value);
  38.                 ok.find("td:eq(2)").html(text1.value);
  39.                 ok.find("td:eq(3)").html(text2.value);
  40.             })
  41.         })
  42.     </script>
  43. </head>
  44. <body>
  45. <table border="1" >
  46.     <tr align="center">
  47.         <td><input type="checkbox" id="checkAll"></td>
  48.         <td width="100px">姓名</td>
  49.         <td width="100px">性别</td>
  50.         <td width="100px">年龄</td>
  51.         <td width="100px">操作</td>
  52.     </tr>
  53.     <tr  align="center">
  54.         <td><input type="checkbox" class="check"></td>
  55.         <td >张三</td>
  56.         <td >男</td>
  57.         <td >18</td>
  58.         <td>
  59.             <input type="button" value="编辑" class="change" style="float: left">
  60.             <input type="button" value="保存" class="save">
  61.         </td>
  62.     </tr>
  63.     <tr  align="center">
  64.         <td><input type="checkbox" class="check"></td>
  65.         <td>李四</td>
  66.         <td >女</td>
  67.         <td>20</td>
  68.         <td>
  69.             <input type="button" value="编辑" class="change" style="float: left">
  70.             <input type="button" value="保存" class="save">
  71.         </td>
  72.     </tr>
  73.     <tr  align="center">
  74.         <td><input type="checkbox" class="check"></td>
  75.         <td>王五</td>
  76.         <td >男</td>
  77.         <td>25</td>
  78.         <td>
  79.             <input type="button" value="编辑" class="change" style="float: left">
  80.             <input type="button" value="保存" class="save">
  81.         </td>
  82.     </tr>
  83. </table>
  84. </body>
  85. </html>

效果：

Center 8

Center 9

方法2：可适用于大型表格，也可做开发使用。并增加删除和新增行的功能。

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>可编辑的表格</title>
  6.     <script src="jquery-1.4.2.min.js"></script>
  7.     <style>
  8.         table{
  9.             border: 1px solid black;
  10.             border-collapse: collapse;
  11.             width: 500px;
  12.         }
  13.         table th {
  14.             border: 1px solid black;
  15.             width: 25%;
  16.         }
  17.         table td {
  18.             align-items: center;
  19.             border: 1px solid black;
  20.             width: 25%;
  21.         }
  22.         table th {
  23.             background-color: #A3BAE9;
  24.         }
  25.     </style>
  26.     <script>
  27.         //文档准备就绪
  28.         $(function () {
  29.             //设置 所有 td 居中
  30.             $('table td').attr("align","center");
  31.             //标签+属性选择所有<编辑>按钮
  32.             $('input[value="编辑"]').click(function () {
  33.                 //获取每一个<编辑>按钮的 下标（从0开始 所以需要+2 = 按钮在表格的所在行数）
  34.                 var numId = $('input[value="编辑"]').index($(this))+2;
  35.                 //选择表格中的所有tr 通过eq方法取得当前tr
  36.                 var ttr = $('table tr').eq(numId);
  37.                 /*当前行使用find方法找到每一个td列
  38.                  each方法为每一个td设置function
  39.                  */
  40.                 ttr.find("td").each(function () {
  41.                     /*过滤 td中的元素
  42.                      checkbox 、 button、text 不需要执行append
  43.                      注意 return 为 跳出当前 each
  44.                      return false 为 跳出整个 each
  45.                      */
  46.                     if($(this).children("input[type='checkbox']").length>0){
  47.                         return ;
  48.                     }
  49.                     if($(this).children("input[type='button']").length>0){
  50.                         return ;
  51.                     }
  52.                     if($(this).children("input[type='text']").length>0){
  53.                         return ;
  54.                     }
  56.                     var tdText = $(this).html();
  57.                     $(this).html("");
  58.                     var inputObj = $("<input type='text'>");
  59.                     inputObj.appendTo($(this));
  60.                     inputObj.css("width","95%");
  61.                     inputObj.val(tdText);
  62.                 });
  63.             })
  64.             //为每一个确定按钮设置点击事件
  65.             $('input[value="确定"]').click(function () {
  66.                 /*通过parents方法获取<确定>按钮的父容器tr
  67.                  再为 tr中的每一个text设置function
  68.                  */
  69.                 var ttr=$(this).parents("tr");
  70.                 ttr.find('input[type="text"]').each(function () {
  71.                     var inputVal = $(this).val();
  72.                     $(this).parents('td').html(inputVal);
  73.                 })
  74.             })
  75.             //全选/反选
  76.             $('#cha').click(function () {
  77.                 //判断checkbox是否选中
  78.                 if($(this).is(':checked')){
  79.                     $('input[type="checkbox"]').attr("checked","true");
  80.                 }else{
  81.                     $('input[type="checkbox"]').removeAttr("checked");
  82.                 }
  83.             })
  84.             $('#add').click(function () {
  85.                 $('table tr').eq(2).clone(true).appendTo("table");
  86.             })
  87.             $('#del').click(function () {
  88.                 $('tr:last').remove();
  89.             })
  90.         })
  91.     </script>
  92. </head>
  93. <body>
  94. <table border="1">
  95.     <thead>
  96.     <tr>
  97.         <th colspan="4">编辑表格</th>
  98.     </tr>
  99.     </thead>
  101.     <tr>
  102.         <th><input type="checkbox" id="cha"></th>
  103.         <th>学号</th>
  104.         <th>姓名</th>
  105.         <th>操作</th>
  106.     </tr>
  107.     <tr>
  108.         <td><input type="checkbox"></td>
  109.         <td>000001</td>
  110.         <td>张三</td>
  111.         <td >
  112.             <input type="button" value="编辑" >
  113.             <input type="button" value="确定" >
  114.         </td>
  115.     </tr>
  116.     <tr>
  117.         <td><input type="checkbox"></td>
  118.         <td>000002</td>
  119.         <td>李四</td>
  120.         <td>
  121.             <input type="button" value="编辑" >
  122.             <input type="button" value="确定" >
  123.         </td>
  124.     </tr>
  125.     <tr>
  126.         <td><input type="checkbox"></td>
  127.         <td>000003</td>
  128.         <td>王五</td>
  129.         <td>
  130.             <input type="button" value="编辑" >
  131.             <input type="button" value="确定" >
  132.         </td>
  133.     </tr>
  134.     <tr>
  135.         <td><input type="checkbox"></td>
  136.         <td>000004</td>
  137.         <td>赵六</td>
  138.         <td>
  139.             <input type="button" value="编辑" >
  140.             <input type="button" value="确定" >
  141.         </td>
  142.     </tr>
  143.     <input type="button" value="新增" id="add">
  144.     <input type="button" value="删除" id="del">
  145. </table>
  146. </body>
  147. </html>

效果：

Center 10
Center 11

发表评论

表情：
评论列表 （有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery - 效果动画

    前言：                jQuery给我们封装了很多的动画效果，相比起简单传统的CSS来说，功能强大很多，今天就来学习学习 jQuery给我们封装的一系列的动画

    迈不过友情╰迈不过友情╰/ 0 赞/ 142 阅读

    相关 jQuery动画效果

    学习要点： 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 在以前很长一段时间里，网页上的

    古城微笑少年丶古城微笑少年丶/ 0 赞/ 304 阅读