對網頁局部放大縮小[支援IE、chrome瀏覽器]
來源：互聯網
上載者：User
關鍵字
網頁製作
Ajax
JavaScript
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="HTTP://www.w3.org/1999/xhtml" > <head> <meta HTTP-equiv="Content-Type" content="text/html; charset= gb2312" /> <title>無標題文檔</title> <script type="text/javascript" src= "jquery-1.4.2.min.js"></script> <script> var i=0; var tdata={head:[{name:'名詞'},{name:'數量'}],data:[{name:'語文',count:12},{name:'數學',count:30}]}; function addNewrow(){ $("#tt").append("<tr id='tr_"+i+"'><td>"+i+"< input name='fdsa' type='text'></td><td><button onclick='removeThis("+i+");' >刪除</button></td></tr>"); i++; } function removeThis(ids){ $("#tr_"+ids).remove(); i--; } function reposition(){ $("#bottomdiv").css("margin-top",$(window).height()-$("# bottomdiv").height()-2); $("#bottomdiv").css("margin-left",$(window).width()-$("#bottomdiv").width()-2); $("#tt tbody").append("<tr>"); $.each(tdata.head,function(i,row){ $("#tt tbody").append("<th>"+row.name+" </th>"); }); $("#tt tbody").append("</tr>"); $.each(tdata.data,function(i,row){ $("#tt tbody").append("<tr><td>"+ row.name+"</td><td>"+row.count+"</td></tr>"); }); } $(function (){reposition(); $("#div_animate").animate({ height:& nbsp;' toggle', opacity: 'toggle' }, "slow"); $("#div_animate").animate({ height: 'show', opacity: 'show' }, "slow"); }); var zoom=10; function maxZoom(){ zoom+=5; $("#zoomdiv").css("zoom",zoom/10); } function minZoom(){ if(zoom<=0){ zoom=5; }else{ zoom-=5; } $("#zoomdiv").c ss("zoom",zoom/10); } var inobj=null; function inputTime(){ } </script> <style type="text/css"> body{ margin:0 0 0 0;} button{padding-top:3px;} input {padding-top :3px;} #ddiv{overflow:auto;float:left;width:800px;height:300px;} </style> </head> <body> <button onclick="addNewrow();" >增加</button><button onclick="maxZoom();" >放大</button><button onclick="minZoom();" >縮小</button> <div id="ddiv"> <div id="zoomdiv"> <table id="tt"> <tbody> </tbody> </table> <input type="button" value= "按鈕"> </div> </div> <div id="timeseler"> <select id="hour"> <script>for(var i=0;i<24;i++){ document.write("<option>"+(i<10?(" 0"+i):i)+"</option>"); }</script> </select> <select id="minis"> <script>for(var i=0;i<60;i++){ document.write("<option>"+(i<10?(" 0"+i):i)+"</option>"); }</script> </select> <input type="button" onclick="inputTime();" value="確認"> </div> <div id="div_animate" style="width:100px;height:100px ;background-color:red;" > </div> </body> </html>
