javascript显示倒影图片

来源：互联网发布：Mac装精简版w10 编辑：程序博客网时间：2024/05/16 17:54

设计思路

使用垂直翻转滤镜(即flipV)使图片产生倒影效果；
使用wave滤镜使倒影产生静态波纹效果；
再通过定时器不断改变波纹的偏移量phase，使倒影产生动态波纹，有如水波在不断变化。
1. <HTML>
3. <HEAD>
4. <META name="GENERATOR" content="Microsoft FrontPage 5.0">
5. <META name="ProgId" content="FrontPage.Editor.Document">
6. <TITLE>指针式时钟</TITLE>
7. </HEAD>
9. <BODY onload="clock()">
11. <SCRIPT LANGUAGE="JavaScript">
12. var S = '......'; S = S.split('');//构成秒针的圆点
13. var M = '.....'; M = M.split('');//构成分针的圆点
14. var H = '....'; H = H.split('');//构成时针的圆点
15. var Ybase = 8; //构成秒、分和时针的圆点之间的间隔距离(Y轴)
16. var Xbase = 8; //构成秒、分和时针的圆点之间的间隔距离(X轴)
17. var dots = 12; //钟盘上的小时刻度数,通常为12,即1,2,3,...,12
18. for (var i = 0; i < dots; i++)
19. {//将小时刻度值(即1,2,3,...,12)分别放入各自的<DIV>块中,且其id属性相同,即dot_Digits
20. document.write('<DIV id="dot_Digits" style="position:absolute;width:30px;height:30px;font-size:10px;color:black;text-align:center;padding-top:10px">'+(i+1)+'</DIV>');
21. }
22. for (i = 0; i < S.length; i++)
23. {//将构成秒针的圆点分别放入各自的<DIV>块中,且其id属性相同,即s_dots
24. document.write('<DIV id=s_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:red"></DIV>');
25. }
26. for (i = 0; i < M.length; i++)
27. {//将构成分针的圆点分别放入各自的<DIV>块中,且其id属性相同,即m_dots
28. document.write('<DIV id=m_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:black"></DIV>');
29. }
30. for (i = 0; i < H.length; i++)
31. {//将构成时针的圆点分别放入各自的<DIV>块中,且其id属性相同,即h_dots
32. document.write('<DIV id=h_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:black"></DIV>');
33. }
35. function clock()
36. {//显示指针式时钟
37. var time = new Date ();
38. var secs = time.getSeconds();
39. var mins = time.getMinutes();
40. var hrs = time.getHours();
41. var Ypos = document.body.scrollTop +80; //把时钟中心设置为距可视区顶边 80 pixel
42. var Xpos = document.body.scrollLeft +100;//把时钟中心设置为距可视区左边界 100 pixel
43. for (var i=0; i < dots; ++i)
44. {//根据新的时钟中心和各个小时刻度值的角度值,设置其新坐标
45. dot_Digits[i].style.pixelTop = Ypos -15 + 44 * Math.sin(-Math.PI/2+2*Math.PI*(i+1)/12);
46. dot_Digits[i].style.pixelLeft = Xpos -15 + 44 * Math.cos(-Math.PI/2+2*Math.PI*(i+1)/12);
47. }
48. var sec = -Math.PI/2 + 2*Math.PI * secs/60; //秒针角度
49. for (i=0; i < S.length; i++)
50. {//根据新的时钟中心和秒针角度,设置秒针上各个圆点的坐标值
51. s_dots[i].style.pixelTop = Ypos + i * Ybase * Math.sin(sec);
52. s_dots[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(sec);
53. }
54. var min = -Math.PI/2 + 2*Math.PI * mins/60; //分针角度
55. for (i=0; i < M.length; i++)
56. {//根据新的时钟中心和分针角度,设置分针上各个圆点的坐标值
57. m_dots[i].style.pixelTop = Ypos + i * Ybase * Math.sin(min);
58. m_dots[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(min);
59. }
60. var hr = -Math.PI/2 + 2*Math.PI * (hrs+mins/60)/12; //时针角度
61. for (i=0; i < H.length; i++)
62. {//根据新的时钟中心和时针角度,设置时针上各个圆点的坐标值
63. h_dots[i].style.pixelTop = Ypos + i * Ybase*Math.sin(hr);
64. h_dots[i].style.pixelLeft = Xpos + i * Xbase*Math.cos(hr);
65. }
66. setTimeout('clock()', 50);//定时
67. }
68. </SCRIPT>
70. </BODY>
72. </HTML>