نحن هنا نستخدم بشكل أساسي مكتبة 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 = "screen">
جسم {
الفائض: مخفي.
الارتفاع: 100 ٪
الهامش: 0 ؛
الحشو: 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 ('background') ؛
image.onload = function () {
var engine = new Rainyday ({
الصورة: هذا ،
}) ؛
engine.Rain ([[1 ، 2 ، 8000]]) ؛
engine.Rain ([[3 ، 3 ، 0.88] ، [5 ، 5 ، 0.9] ، [6 ، 2 ، 1]] ، 100) ؛
}
Image.Crossorigin = 'Anonymous' ؛
image.src = 'http://i.imgur.com/n7etzfo.jpg' ؛
}
</script>
<title> واو! </title>
</head>
<body onload = "run () ؛">
<img id = "background" src = "" />
</body>
</html>
أليس هذا تأثير رائع جدا؟ أتمنى أن يحبها الجميع.