当前位置:Gxlcms > JavaScript > Jquery仿IGoogle实现可拖动窗口示例代码_jquery

Jquery仿IGoogle实现可拖动窗口示例代码_jquery

时间:2021-07-01 10:21:17 帮助过:5人阅读

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照iGoogle做了一个简单的小demo。

这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。

废话就不多说了,直接把源代码贴出来,让大家学习!
html

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

CSS

  1. body{
  2. margin: 0;
  3. padding: 0;
  4. background-color: silver;
  5. font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
  6. color: #666;
  7. font-size:20px;
  8. line-height:150%;
  9. }
  10. #left{
  11. width: 380px;
  12. height: 100%;
  13. padding: 10px;
  14. position: absolute;
  15. top: 10px;
  16. left: 10px;
  17. border: solid red 2px;
  18. }
  19. #left .widget {
  20. width: 340px;
  21. height: 150px;
  22. padding; 10px;
  23. margin: 20px;
  24. border: solid red 2px;
  25. background-color: white;
  26. }
  27. #left .widget .widget-header {
  28. width: 340px;
  29. height: 30px;
  30. padding: 0;
  31. margin: 0;
  32. color: red;
  33. position: static;
  34. background-color: gray;
  35. }
  36. #middle{
  37. width: 400px;
  38. height: 100%;
  39. position: absolute;
  40. top:10px;
  41. left: 435px;
  42. padding: 10px;
  43. margin: 0 30px 0;
  44. border: solid red 2px;
  45. }
  46. #middle .widget {
  47. width: 360px;
  48. height: 150px;
  49. padding; 10px;
  50. margin: 20px;
  51. border: solid red 2px;
  52. background-color: white;
  53. }
  54. #middle .widget .widget-header {
  55. width: 360px;
  56. height: 30px;
  57. padding: 0;
  58. margin: 0;
  59. color: red;
  60. position: static;
  61. background-color: gray;
  62. }
  63. #right{
  64. width: 380px;
  65. height: 100%;
  66. padding: 10px;
  67. position: absolute;
  68. top: 10px;
  69. right: 10px;
  70. border: solid red 2px;
  71. }
  72. #right .widget {
  73. width: 340px;
  74. height: 150px;
  75. padding; 10px;
  76. margin: 20px;
  77. border: solid red 2px;
  78. background-color: white;
  79. }
  80. #right .widget .widget-header {
  81. width: 340px;
  82. height: 30px;
  83. padding: 0;
  84. margin: 0;
  85. color: red;
  86. position: static;
  87. background-color: gray;
  88. }

javascript代码

人气教程排行