移动光效滤镜

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var timer
  5. i=0
  6. j=0
  7. k=0
  8. l=160
  9. m=120
  10.  
  11. function setlight()
  12. {
  13. document.getElementById('light_div').filters[0].clear()
  14.  
  15. if (i<100)
  16. {
  17. document.getElementById('light_div').filters[0].addcone(0,0,0,50,50,100,120,200,i,100)
  18. }
  19. else
  20. {
  21. if (j<160)
  22. {
  23. document.getElementById('light_div').filters[0].addcone(j,0,0,50,50,100,120,200,i,200)
  24. j++
  25. }
  26. else
  27. {
  28. if (k<120)
  29. {
  30. document.getElementById('light_div').filters[0].addcone(j,k,0,50,50,100,120,200,i,200)
  31. k++
  32. }
  33. else
  34. {
  35. if (l>0)
  36. {
  37. l--
  38. document.getElementById('light_div').filters[0].addcone(l,k,0,50,50,100,120,200,i,200)
  39. }
  40. else
  41. {
  42. if (m>0)
  43. {
  44. m--
  45. document.getElementById('light_div').filters[0].addcone(l,m,0,50,50,100,120,200,i,200)
  46. }
  47. else
  48. {
  49. stoptimer()
  50. }
  51. }
  52. }
  53. }
  54. }
  55. i++
  56. timer=setTimeout("setlight()",1)
  57. }
  58.  
  59. function stoptimer()
  60. {
  61. clearTimeout(timer)
  62. }
  63. </script>
  64. <style>
  65. div
  66. {
  67. width:100px;
  68. }
  69. body
  70. {
  71. background:#000000;
  72. }
  73. </style>
  74. </head>
  75.  
  76. <body onload="setlight()" onunload="stoptimer()">
  77. <div id="light_div" style="filter:light(enabled=1);"><img src="/i/eg_landscape.jpg" width="160" height="120" /></div>
  78. </body>
  79.  
  80. </html>