HTML5 تطبيق الصور غير محدودة لتأثير تدفق الشلال مع ظلال مستديرة الحدود

الكاتب：Eve Cole وقت التحديث：2025-05-12 11:48:02

التعليق: يمكن أن يحقق تأثير تدفق الشلال في صفحة الويب تحميلًا غير محدود من الصور. كتبت استنادًا إلى تقنية HTML5 الشهيرة اليوم ، بالإضافة إلى تحقيق تدفق الشلال ، تتم إضافة تأثيرات تعديل الصور CSS5 أيضًا ، مثل حدود الزاوية المستديرة للصورة ، والتأثير ثلاثي الأبعاد لظلال الصورة ، وما إلى ذلك ، إلخ.

يمكن أن يحقق تأثير تدفق الشلال على شبكة الإنترنت تحميل غير محدود من الصور. مكتوبة بناءً على تقنية HTML5 الشهيرة في الوقت الحاضر ، يتم استدعاء ما مجموعه 7 صور في صفحة العرض التوضيحي. من أجل راحة العرض التوضيحي ، يتم عرضه تلقائيًا على أنه تمرير أشرطة التمرير ، بحيث يمكن للجميع رؤية تأثير تدفق الشلال بشكل أكثر وضوحًا. بالإضافة إلى تحقيق تدفق الشلال ، تتم إضافة تأثيرات تعديل صور CSS5 أيضًا ، مثل حدود الزاوية المستديرة للصورة ، والتأثير ثلاثي الأبعاد للصورة ، وما إلى ذلك ، وهي مادة جيدة لتدفق الشلال.

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"

<head>

<title> jQuery Unlimited Loading Waterfall Flow </title>

/* إعادة تعريف العلامة*/

الجسم {padding: 0 ؛ الهامش: 0 ؛ الخلفية: #DDD url (/jscss/demoimg/201312/bg55.jpg) تكرار ؛}

img {الحدود: لا شيء ؛}

A {text-decoration: none ؛ color:#444 ؛}

ج: hover {color:#999 ؛}

#Title {Width: 600px ؛ Margin: 20px Auto ؛ Text-Align: Center ؛}

/* تحديد keyframe*/

@-webkit-keyframes الظل {

من {عتامة: 1 ؛}

15 ٪ {عتامة: 0.4 ؛}

إلى {عتامة: 1 ؛}

}

@-moz-keyframes الظل {

من {عتامة: 1 ؛}

15 ٪ {عتامة: 0.4 ؛}

إلى {عتامة: 1 ؛}

}

@-ms-keyframes الظل {

من {عتامة: 1 ؛}

15 ٪ {عتامة: 0.4 ؛}

إلى {عتامة: 1 ؛}

}

@-o-keyframes الظل {

من {عتامة: 1 ؛}

15 ٪ {عتامة: 0.4 ؛}

إلى {عتامة: 1 ؛}

}

keyframes الظل {

من {عتامة: 1 ؛}

15 ٪ {عتامة: 0.4 ؛}

إلى {عتامة: 1 ؛}

}

/* طَوّق */

#wrap {width: auto ؛ الارتفاع: auto ؛ الهامش: 0 auto ؛ الموضع: النسبية ؛}

#wrap .box {width: 280px ؛ الارتفاع: Auto ؛ padding: 10px ؛ الحدود: لا شيء ؛ تعويم: اليسار ؛}

#wrap .box .info {width: 280px ؛ الارتفاع: تلقائي ؛ الحدود radius: 8px ؛ box-shadow: 0 0 11px #666 ؛ الخلفية: #fff ؛}

#wrap .box .info .pic {width: 260px ؛ الارتفاع: تلقائي ؛ الهامش: 0 auto ؛ padding-top: 10px ؛}

#wrap .box .info .pic: hover {

-webkit-animation: Shade 3S Ease-In-Out 1 ؛

-Moz-animation: Shade 3S Ease-in-out 1 ؛

-MS-Enimation: Shade 3S Ease-In-Out 1 ؛

-o-Onimation: Shade 3S Ease-In-Out 1 ؛

الرسوم المتحركة: الظل 3S Ease-In-Out 1 ؛

}

#wrap .box .info .pic img {width: 260px ؛ border-radius: 3px ؛}

#wrap .box .info .title {width: 260px ؛ الارتفاع: 40px ؛ الهامش: 0 auto ؛ خط الخط: 40px ؛ text-align: center ؛ color:#666 ؛ font-size: 18px ؛ font-weight: bold ؛ verdlow: hidden ؛}

</style>

window.onload = function () {

// قم بتشغيل الوظيفة الرئيسية لتدفق الشلال

PBL ('Wrap' ، 'Box') ؛

// بيانات المحاكاة

var data = [{'src': '1.jpg' ، 'title': 'title title'} ، {'src': '2.jpg' ، 'title': 'title title'} ، {'src': 'Jpg' ، العنوان '} ، {' src ': "5.jpg' ، 'title': 'title title'} ، {'src': '6.jpg' ، 'title': 'title'} ، {'src': '7.jpg' ، 'title': 'title'}] ؛

// تعيين تحميل التمرير

window.onscroll = function () {

// حساب طلب البيانات

if (getCheck ()) {

var wrap = document.getElementById ('Wrap') ؛

ل (أنا في البيانات) {

// إنشاء مربع

var box = document.createElement ('div') ؛

box.className = 'box' ؛

wrap.appendchild (box) ؛

// إنشاء معلومات

var info = document.createElement ('div') ؛

info.className = 'info' ؛

box.appendchild (info) ؛

// إنشاء الموافقة المسبقة عن علم

var pic = document.createElement ('div') ؛

pic.className = 'pic' ؛

info.appendchild (pic) ؛

// إنشاء IMG

var img = document.createElement ('img') ؛

img.src = '/jscss/demoimg/201312/'+data budapi.

img.style.height = 'auto' ؛

pic.appendchild (IMG) ؛

// إنشاء العنوان

var

}) ؛

$ (box) .stop (). تحريك ({

"العتامة": "1"

} ، 999) ؛

getStartNum = index ؛ // تحديث عدد البيانات المطلوبة

}

</script>

</head>

<body>

<h2> تعلم تأثيرات تدفق الشلال </h2> بالابتسامة.

</القسم>

<viv>