Комментарий: Эффект потока водопада на веб -странице может достичь неограниченной загрузки изображений. Написано на основе популярной технологии HTML5 сегодня, в дополнение к реализации потока водопада, также добавлены эффекты модификации изображений CSS5, такие как округлые угловые границы картины, трехмерный эффект тени изображения и т. Д.
Другой эффект потока водопада веб -страницы может достичь неограниченной загрузки изображений. Написанный на основе популярной технологии HTML5 в настоящее время, в общей сложности на демонстрационной странице называется 7 картинок. Для удобства демонстрации он автоматически отображается при прокрутке свитков, так что каждый может увидеть эффект потока водопада более четко. В дополнение к реализации потока водопада, также добавляются эффекты модификации изображения CSS5, такие как округлые угловые границы изображения, трехмерный эффект изображения и т. Д., Который является хорошим материалом для изучения потока водопада.<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> jQuery Unlimited Загрузка водопада поток </title>
<стиль типа = "text/css">
/* Переопределение тегов*/
Body {Padding: 0; Margin: 0; фон: #ddd url (/jscss/demoimg/201312/bg55.jpg) повтор;}
img {border: none;}
{Text-Decoration: None; Color:#444;}
A: Hover {Color:#999;}
#title {ширина: 600px; маржа: 20px auto; text-align: center;}
/* Определить KeyFrame*/
@-webkit-keyframes shade {
от {непрозрачности: 1;}
15%{непрозрачность: 0,4;}
к {непрозрачности: 1;}
}
@-moz-keyframes shade {
от {непрозрачности: 1;}
15%{непрозрачность: 0,4;}
к {непрозрачности: 1;}
}
@-ms-keyframes shade {
от {непрозрачности: 1;}
15%{непрозрачность: 0,4;}
к {непрозрачности: 1;}
}
@-o-keyframes shade {
от {непрозрачности: 1;}
15%{непрозрачность: 0,4;}
к {непрозрачности: 1;}
}
@keyframes shade {
от {непрозрачности: 1;}
15%{непрозрачность: 0,4;}
к {непрозрачности: 1;}
}
/* сворачивать */
#Wrap {ширина: Auto; Height: Auto; Margin: 0 Auto; позиция: относительно;}
#Wrap .box {ширина: 280px; высота: Auto; Padding: 10px; граница: нет; float: left;}
#wrap .box .info {ширина: 280px; высота: Auto; Border-Radius: 8px; Box-Shadow: 0 0 11px #666; Фон: #fff;}
#wrap .box .info .pic {ширина: 260px; высота: Auto; Margin: 0 Auto; Padding-top: 10px;}
#wrap .box .info .pic: Hover {
-Вебкит-анимация: тени 3S легкость 1;
-Моз-анимация: тени 3S легкость 1;
-ms-анимация: тени 3S легкость 1;
-Ко-анимация: тени 3S легкость 1;
Анимация: Shade 3s Ext-in-Out 1;
}
#wrap .box .info .pic img {width: 260px; граница-радиус: 3px;}
#Wrap .box .Info .title {ширина: 260px; высота: 40px; маржа: 0 Авто;
</style>
<script type = "text/javascript" src = "/ajaxjs/jquery-1.6.2.min.js"> </script>
<script type = "text/javascript">
window.onload = function () {
// запустить основную функцию потока водопада
Pbl ('wrap', 'box');
// моделирование данных
VAR DATA = [{'SRC': '1.JPG', 'TITLE': 'title' Title '}, {' src ':' 2.jpg ',' title ':' title '}, {' src ':' 3.jpg ',' title ':' Название изображения '}, {' src ':' 4.jpg ',' title ':' изображение '}, {' src ':' Название '}, {' src ':' 5.jpg ',' title ':' Title '}, {' src ':' 6.jpg ',' title ':' title 'with'}, {'src': '7.jpg', 'title': 'title' title '}];
// Установить загрузку прокрутки
window.onscroll = function () {
// Рассчитать запрос данных
if (getCeck ()) {
var wrood = document.getElementbyId ('wrap');
для (я в данных) {
// Создать коробку
var box = document.createElement ('div');
box.classname = 'box';
wrap.appendchild (коробка);
// Создать информацию
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®.src;
img.style.height = 'auto';
pic.appendchild (IMG);
// Создать заголовок
вар
});
$ (box) .stop (). Animate ({
"непрозрачность": "1"
}, 999);
getStartNum = index; // обновить количество запрошенных данных
}
</script>
</head>
<тело>
<раздел>
<h2> изучение эффектов потока водопада </h2> по улыбке.
</section>
<div>
<div>
<div>
<div> <img src = "/jscss/demoimg/201312/1.jpg"> </div>
<div> <a href = "#"> Название изображения </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoimg/201312/2.jpg"> </div>
<div> <a href = "#"> Название изображения </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoimg/201312/3.jpg"> </div>
<div> <a href = "#"> Название изображения </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoimg/201312/4.jpg"> </div>
<div> <a href = "#"> Название изображения </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoimg/201312/5.jpg"> </div>
<div> <a href = "#"> Название изображения </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoimg/201312/6.jpg"> </div>
<div> <a href = "#"> Название изображения </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoimg/201312/7.jpg"> </div>
<div> <a href = "#"> Название изображения </a> </div>
</div>
</div>
</div>
<div>
</div>
</body>
</html>