实现原理:
向指定DOM元素中动态插入一个新的DOM节点——单个流星的Box ; 然后再每隔0.3秒从浏览器上边缘随机位置滑出,再给它加上
横向速度和纵向速度, 调用jQuery animate()方法给它指定终点坐标和滑行时间 , 从而就有了斜向下飞过的特效;
需求分析:
(1)、在脚本中动态创建单个流星 ;
(2)、流星从屏幕上边缘随机滑出; >>> startLeft startTop两个属性
(3)、随机的横向与纵
向速度; >>>Math.random( )
(4)、指定持续时间; >>> durationTime
(5)、每隔0.3秒执行一次脚步, 从而就有了" 流星雨 " ; >>> setInterval( )
HTML很简单就一行:
CSS部分代码:
jQuery部分代码 :
最终效果截图: