jquery实现案例
案例：
1、点赞
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { AddFavor(this); }); function AddFavor(self) { // DOM对象 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>
2、多选、反选、取消、编辑、删除
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <div style="border: 1px solid #ddd;width: 700px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 500px;"> <div class="ziti" style="float: left;margin-left: 200px"> <p><b>运维主机如下：</b></p> <input type="button" value="添加" onclick="addElement();" class="ziti shou " onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> <input type="button" value="全选" onclick="chooseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> <input type="button" value="取消" onclick="cancleAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> <input type="button" value="反选" onclick="reverseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> <input type="button" value="编辑模式" class="ziti shou edit" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> <table border="1" id="zs"> <thead> <tr> <th>选择</th> <th>主机名</th> <th>IP</th> <th>端口</th> <th>操作</th> </tr> </thead > <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td target="hostname">aa</td> <td target="ip">192.168.1.1</td> <td target="port">22</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" id="test" /></td> <td target="hostname">aa</td> <td target="ip">192.168.2.2</td> <td target="port">80</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" /></td> <td target="hostname">aa</td> <td target="ip">192.168.3.3</td> <td target="port">8080</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" /></td> <td target="hostname">aa</td> <td target="ip">192.168.4.4</td> <td target="port">8080</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" /></td> <td target="hostname">aa</td> <td target="ip">192.168.5.5</td> <td target="port">88</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" /></td> <td target="hostname">aa</td> <td target="ip">192.168.6.6</td> <td target="port">66</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" /></td> <td target="hostname">aa</td> <td target="ip">192.168.8.8</td> <td target="port">111</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" /></td> <td target="hostname">aa</td> <td target="ip">192.168.9.9</td> <td target="port">23</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" /></td> <td target="hostname">aa</td> <td target="ip">192.168.10.10</td> <td target="port">99</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" /></td> <td target="hostname">aa</td> <td target="ip">192.168.11.11</td> <td target="port">000</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> <tr> <td><input type="checkbox" /></td> <td target="hostname">aa</td> <td target="ip">192.168.12.12</td> <td target="port">66</td> <td><input class="edit" type="button" value="编辑" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /> | <input class="del" type="button" value="删除" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" /></td> </tr> </tbody> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="ip" type="text" /> <input name="port" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '"/> <input type="button" value="确定" onclick="confirmModal();" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '"/> </div> </div> <div class="shadow hide"></div> </div> </div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }); $("#title").mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.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; $('#title').on('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'); }) }); $("#title").mouseup(function(){ $("#title").off('mousemove'); }); }) </script> <script> function chooseAll(){ $('#tb :checkbox').prop('checked',true); } function cancleAll(){ $('#tb :checkbox').prop('checked',false); } function reverseAll(){ $(':checkbox').each(function(){ var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> <script> $('.del').click(function () { $(this).parent().parent().remove(); }); function confirmModal() { var liu = '<tr> <td><input type="checkbox" /></td> <td>aa</td> <td>192.168.10.10</td> <td>99</td> <td><input class="edit" type="button" value="编辑" /> | <input class="del" type="button" value="删除" /></td> </tr>'; $("#tb").append(liu) $(".modal,.shadow").addClass('hide'); } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td的target属性值 var n = $(this).attr('target'); // 获取td中的内容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); }); </script> </body> </html>