对网页局部放大缩小[支持IE、chrome浏览器]

来源:转载

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>无标题文档</title> 
  6. <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
  7. <script> 
  8. var i=0;  
  9. var tdata={head:[{name:'名词'},{name:'数量'}],data:[{name:'语文',count:12},{name:'数学',count:30}]};  
  10. function addNewrow(){  
  11.  $("#tt").append("<tr id='tr_"+i+"'><td>"+i+"<input name='fdsa' type='text'></td><td><button onclick='removeThis("+i+");'>删除</button></td></tr>");  
  12.  i++;  
  13. }  
  14. function removeThis(ids){  
  15. $("#tr_"+ids).remove();  
  16. i--;  
  17. }  
  18. function reposition(){  
  19.  $("#bottomdiv").css("margin-top",$(window).height()-$("#bottomdiv").height()-2);  
  20.  $("#bottomdiv").css("margin-left",$(window).width()-$("#bottomdiv").width()-2);  
  21.  $("#tt tbody").append("<tr>");  
  22.  $.each(tdata.head,function(i,row){  
  23.  $("#tt tbody").append("<th>"+row.name+"</th>");  
  24.  });  
  25.  $("#tt tbody").append("</tr>");  
  26.  $.each(tdata.data,function(i,row){  
  27.  $("#tt tbody").append("<tr><td>"+row.name+"</td><td>"+row.count+"</td></tr>");  
  28.  
  29.  });  
  30. }  
  31. $(function (){reposition();  
  32. $("#div_animate").animate({  
  33.    height: 'toggle', opacity: 'toggle'  
  34.  }, "slow");   
  35.  $("#div_animate").animate({  
  36.    height: 'show', opacity: 'show'  
  37.  }, "slow");   
  38. });  
  39. var zoom=10;  
  40. function maxZoom(){  
  41. zoom+=5;  
  42. $("#zoomdiv").css("zoom",zoom/10);  
  43. }  
  44. function minZoom(){  
  45. if(zoom<=0){  
  46.  zoom=5;  
  47. }else{  
  48. zoom-=5;  
  49. }  
  50. $("#zoomdiv").css("zoom",zoom/10);  
  51. }  
  52. var inobj=null;  
  53. function inputTime(){  
  54.  
  55. }  
  56. </script> 
  57. <style type="text/css"> 
  58. body{ margin:0 0 0 0;}  
  59. button{padding-top:3px;}  
  60. input {padding-top:3px;}  
  61. #ddiv{overflow:auto;float:left;width:800px;height:300px;}  
  62. </style> 
  63. </head> 
  64. <body> 
  65. <button onclick="addNewrow();">增加</button><button onclick="maxZoom();">放大</button><button onclick="minZoom();">缩小</button> 
  66. <div id="ddiv"> 
  67. <div id="zoomdiv"> 
  68. <table id="tt"> 
  69. <tbody> 
  70. </tbody> 
  71. </table> 
  72. <input type="button" value="按钮"> 
  73.  
  74. </div> 
  75. </div> 
  76. <div id="timeseler"> 
  77. <select id="hour"> 
  78. <script>for(var i=0;i<24;i++){  
  79. document.write("<option>"+(i<10?("0"+i):i)+"</option>");  
  80. }</script> 
  81. </select> 
  82. <select id="minis"> 
  83. <script>for(var i=0;i<60;i++){  
  84. document.write("<option>"+(i<10?("0"+i):i)+"</option>");  
  85. }</script> 
  86. </select> 
  87. <input type="button" onclick="inputTime();" value="确认"> 
  88. </div> 
  89. <div id="div_animate" style="width:100px;height:100px;background-color:red;"> </div> 
  90. </body> 
  91. </html> 

 


分享给朋友:
您可能感兴趣的文章:
随机阅读: