ที่นี่เราใช้ห้องสมุด JS Rainyday เป็นหลักซึ่งใช้งานง่ายและสะดวกในการใช้งานดังนั้นเราจึงไม่พูดเรื่องไร้สาระมากแค่อ่านรหัสตัวอย่าง
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style media = "หน้าจอ">
ร่างกาย {
ล้น: ซ่อน;
ความสูง: 100%;
มาร์จิ้น: 0;
Padding: 0;
-
img {
ความกว้าง: 100%;
ความสูง: 100%;
-
</style>
<script src = "http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
ฟังก์ชั่นเรียกใช้ () {
var image = document.getElementById ('พื้นหลัง');
image.onload = function () {
var engine = ใหม่ Rainyday ({
รูปภาพ: นี่
-
engine.rain ([[1, 2, 8000]]);
engine.rain ([[3, 3, 0.88], [5, 5, 0.9], [6, 2, 1]], 100);
-
image.crossorigin = 'ไม่ระบุชื่อ';
image.src = 'http://i.imgur.com/n7etzfo.jpg';
-
</script>
<tite> ว้าว! </title>
</head>
<body onload = "run ();">
<img id = "พื้นหลัง" src = "" />
</body>
</html>
มันเป็นเอฟเฟกต์ที่ยอดเยี่ยมมากเหรอ? ฉันหวังว่าทุกคนจะชอบมัน