使用jquery来生成下雨特效资源-CSDN文库

共3个文件

js：1个

jpeg：1个

html：1个

jquery

javascript

html

需积分: 1 146 浏览量 2022-04-18 21:07:04 上传评论收藏 3.42MB RAR 举报

在前端开发中，创建动态视觉效果能够极大地提升用户体验。本文将深入探讨如何使用jQuery来实现一个逼真的下雨特效。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画制作，非常适合这样的任务。我们需要理解jQuery的核心概念。jQuery通过提供简洁的API，使得JavaScript代码更易于编写和维护。例如，`$(selector).action()`结构是jQuery的典型用法，其中`selector`用于选取DOM元素，`action`是执行的操作，如`click()`、`fadeIn()`等。在这个下雨特效中，我们可能会使用`$.each()`循环遍历数组，生成多个“雨滴”元素。每个雨滴可以是一个HTML元素，如`<div>`，并应用CSS样式来模拟雨滴形状。我们可以设置它们的初始位置（例如，从屏幕顶部）和透明度，然后利用CSS3的`keyframes`动画或jQuery的`animate()`方法来改变这些属性，制造出雨滴下落的效果。接下来，我们需要了解JavaScript的原生功能，如`setTimeout()`或`setInterval()`，它们用于控制动画的定时执行。例如，我们可以通过`setInterval()`定期更新雨滴的位置，模拟雨滴下落的速度。同时，当雨滴到达底部时，可以重置其位置，使其看起来像是从屏幕顶部重新开始下落。此外，CSS也是实现特效的关键部分。我们可以定义`@keyframes`规则来创建一个动画，描述雨滴从上到下的移动过程。CSS的`transform`属性可以用来调整雨滴的大小、位置和旋转，而`opacity`属性则可以控制雨滴的透明度，使得雨滴在接近地面时逐渐消失。 HTML结构也扮演着重要角色。可能需要一个包含所有雨滴元素的容器，以便于管理和动画。例如： ```html <div id="rain-container">  </div> ``` 为了增加视觉效果，我们可以考虑使用jQuery来添加一些额外的细节，比如风的效果，让雨滴偏离垂直方向，或者让雨滴大小不一，以增加真实感。总结来说，创建下雨特效涉及到jQuery的选择器、事件、动画方法，JavaScript的定时函数以及CSS的动画和变换。对于初学者，这是一次极好的练习，不仅可以加深对jQuery和JavaScript的理解，还能提升CSS技能，同时增加对前端动画原理的认识。

资源详情

资源评论

资源推荐

收起资源包目录

下雨特效.rar （3个子文件）

下雨特效

jquery.js 128KB

下雨特效.html 3KB

imagess3

name.jpeg 3.39MB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>下雨特效</title> <script src="jquery.js"></script> <style> * { margin: 0px; padding: 0px; } .bigbox { width: 100vw; height: 100vh; background: url(imagess3/name.jpeg) center no-repeat; background-size: cover; } .rainbox { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; pointer-events: none; } .rain { position: absolute; top: 0px; width: 2px; height: 50px; background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .6)); } </style> </head> <body> <div class="bigbox"> </div> <div class="rainbox"> </div> <script> const box = document.querySelector(".rainbox"); var boxwidth = box.clientWidth; var boxheight = box.clientWidth; // 每次页面的宽高变化时，盒子的宽高也发生变化 $(window).resize(function() { boxwidth = box.clientWidth; boxheight = box.clientHeight; // console.log(boxwidth); // console.log(boxheight); // 这里使用了原生js的方法来获取box的宽度 }) // 每隔一段时间添加一些雨滴 setInterval(() => { const rain = $("<div></div>").addClass("rain"); // 新建一个元素div并加上类名rain // 随机刷新雨点的位置，随机生成透明度 $(rain).css({ "left": Math.random() * boxwidth + 'px', "opacity": Math.random(), }); $(".rainbox").append(rain); // 将rain添加到rainbox中 // 定义一个定时器，让雨点下落，并且当rain的top的值大于盒子的宽度时， //就将rain删除 var race = 1; // 现在外面的定时器中设置一个race使其等于1 const timer = setInterval(() => { if (parseInt($(rain).css("top")) >= boxheight) { clearInterval(timer); $(rain).remove(); // 如果top值大于了boxheight就清除自身 } race++; // 然后race在内部定时器中随着里面定时器设置的时间自增一 // console.log(race); $(rain).css({ "top": parseInt($(rain).css("top")) + race + 'px' }) }, 20) }, 20) </script> </body> </html>