script.aculo.us之页面元素呈现特效

 

  
  
  
  
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme() + "://" 
  5. + request.getServerName() + ":" + request.getServerPort()  
  6. + path + "/";  
  7. %>  
  8.  
  9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  10. <html>  
  11. <head>  
  12. <base href="<%=basePath%>">  
  13.  
  14. <title>helloscriptaculous</title>  
  15. <script src="js/prototype.js" type="text/javascript"></script>  
  16. <script src="js/scriptaculous.js" type="text/javascript"></script>  
  17. <style type="text/css">  
  18. .class1 {  
  19. color: #345456;  
  20. font-weight: 800;  
  21. font-size: 30px;  
  22. background-color: #12ff56;  
  23. width: 300px  
  24. }  
  25. </style>  
  26.  
  27. </head>  
  28.  
  29. <body>  
  30. <div id="div" class="class1">  
  31. This is a test  
  32. </div>  
  33. <br>  
  34. <select id="sel" onchange="test()">  
  35. <option value="Effect.Appear">  
  36. Effect.Appear  
  37. </option>  
  38. <option value="Effect.Fade">  
  39. Effect.Fade  
  40. </option>  
  41. <option value="Effect.Puff">  
  42. Effect.Puff  
  43. </option>  
  44. <option value="Effect.DropOut">  
  45. Effect.DropOut  
  46. </option>  
  47. <option value="Effect.Shake">  
  48. Effect.Shake  
  49. </option>  
  50. <option value="Effect.SwitchOff">  
  51. Effect.SwitchOff  
  52. </option>  
  53. <option value="Effect.BlindDown">  
  54. Effect.BlindDown  
  55. </option>  
  56. <option value="Effect.BlindUp">  
  57. Effect.BlindUp  
  58. </option>  
  59. <option value="Effect.SlideDown">  
  60. Effect.SlideDown  
  61. </option>  
  62. <option value="Effect.SlideUp">  
  63. Effect.SlideUp  
  64. </option>  
  65. <option value="Effect.Pulsate">  
  66. Effect.Pulsate  
  67. </option>  
  68. <option value="Effect.Squish">  
  69. Effect.Squish  
  70. </option>  
  71. <option value="Effect.Fold">  
  72. Effect.Fold  
  73. </option>  
  74. <option value="Effect.Grow">  
  75. Effect.Grow  
  76. </option>  
  77. <option value="Effect.Shrink">  
  78. Effect.Shrink  
  79. </option>  
  80. </select>  
  81. <select id="sel2" onchange="test2()">  
  82. <option value="slide">  
  83. slide  
  84. </option>  
  85. <option value="blind">  
  86. blind  
  87. </option>  
  88. <option value="appear">  
  89. appear  
  90. </option>  
  91. </select>  
  92. <script type="text/javascript">  
  93. function test(){  
  94. var strScript = $F("sel")+"('div');";  
  95. eval(strScript);  
  96. }  
  97. function test2(){  
  98. var strScript = "Effect.toggle('div','"+$F("sel2")+"')";  
  99. eval(strScript);  
  100. }  
  101. </script>  
  102. </body>  
  103. </html> 

 

你可能感兴趣的:(元素,页面,特效,script.aculo.us,呈现)