Komentar: Efek aliran air terjun halaman web dapat mencapai pemuatan gambar yang tidak terbatas. Ditulis berdasarkan teknologi HTML5 yang populer saat ini, selain mewujudkan aliran air terjun, efek modifikasi gambar CSS5 juga ditambahkan, seperti perbatasan sudut bulat gambar, efek tiga dimensi dari bayangan gambar, dll.
Efek aliran air terjun halaman web lainnya dapat mencapai pemuatan gambar yang tidak terbatas. Ditulis berdasarkan teknologi HTML5 yang populer saat ini, total 7 gambar disebut di halaman demonstrasi. Untuk kenyamanan demonstrasi, ini secara otomatis ditampilkan sebagai gulir gulir, sehingga semua orang dapat melihat efek aliran air terjun lebih jelas. Selain mewujudkan aliran air terjun, efek modifikasi gambar CSS5 juga ditambahkan, seperti perbatasan sudut bulat gambar, efek tiga dimensi gambar, dll., Yang merupakan bahan yang baik untuk mempelajari aliran air terjun.<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" />
<title> jQuery loading waterfall flow tanpa batas </iteme>
<type style = "text/css">
/* Tag Redefinition*/
body {padding: 0; margin: 0; latar belakang: #ddd url (/jscss/demoimg/201312/bg55.jpg) ulangi;}
img {border: none;}
A {Text-Decoration: None; Color:#444;}
A: Hover {Color:#999;}
#title {width: 600px; margin: 20px auto; text-align: center;}
/* Tentukan Kunci Kunci*/
@-webkit-keyframe shade {
dari {opacity: 1;}
15%{opacity: 0.4;}
ke {opacity: 1;}
}
@-moz-keyframe shade {
dari {opacity: 1;}
15%{opacity: 0.4;}
ke {opacity: 1;}
}
@-ms-keyframe shade {
dari {opacity: 1;}
15%{opacity: 0.4;}
ke {opacity: 1;}
}
@-o-keyframe naungan {
dari {opacity: 1;}
15%{opacity: 0.4;}
ke {opacity: 1;}
}
@keyframes shade {
dari {opacity: 1;}
15%{opacity: 0.4;}
ke {opacity: 1;}
}
/* membungkus */
#wrap {width: auto; tinggi: auto; margin: 0 auto; posisi: relatif;}
#wrap .box {width: 280px; tinggi: auto; padding: 10px; border: none; float: left;}
#wrap .box .info {width: 280px; tinggi: auto; border-radius: 8px; box-shadow: 0 0 11px #666; latar belakang: #fff;}
#wrap .box .info .pic {lebar: 260px; tinggi: auto; margin: 0 auto; padding-top: 10px;}
#wrap .box .info .pic: hover {
-webkit-animasi: shade 3s kemudahan-keluar 1;
-Moz-animasi: naungan 3s kemudahan 1;
-MS-animasi: Shade 3s kemudahan-dalam 1;
-O-animasi: Shade 3s kemudahan-keluar 1;
Animasi: Shade 3s Easy-In-Out 1;
}
#wrap .box .info .pic img {lebar: 260px; border-radius: 3px;}
#wrap .box .info .title {width: 260px; tinggi: 40px; margin: 0 auto; line-height: 40px; text-align: center; warna:#666; font-size: 18px; font-weight: tebal; meluap: tersembunyi;}
</tyle>
<type script = "Text/JavaScript" src = "/Ajaxjs/jQuery-1.6.2.min.js"> </script>
<type skrip = "Teks/JavaScript">
window.onload = function () {
// Jalankan fungsi utama aliran air terjun
Pbl ('wrap', 'box');
// Data simulasi
var data = [{'src': '1.jpg', 'title': 'judul gambar'}, {'src': '2.jpg', 'judul': 'judul gambar'}, {'src': '3.jpg', 'judul': 'judul gambar'}, {'src': '4.jpg' judul '}, {' src ':' 5.jpg ',' title ':' judul gambar '}, {' src ':' 6.jpg ',' judul ':' judul gambar '}, {' src ':' 7.jpg ',' judul ':' judul gambar '}];
// Atur beban gulir
window.onscroll = function () {
// Hitung permintaan data
if (getCheck ()) {
var wrap = document.getElementById ('wrap');
untuk (i in data) {
// Buat kotak
var box = document.createElement ('div');
box.classname = 'box';
Wrap.AppendChild (Box);
// Buat info
var info = document.createElement ('div');
info.classname = 'info';
box.appendChild (info);
// Buat foto
var pic = document.createElement ('div');
pic.classname = 'pic';
info.appendChild (pic);
// Buat img
var img = document.createElement ('img');
img.src = '/jscss/demoimg/201312/'+datahti (i 0,src;
img.style.height = 'auto';
pic.AppendChild (IMG);
// Buat judul
var
});
$ (box) .stop (). animate ({
"opacity": "1"
}, 999);
getStartNum = index; // Perbarui jumlah data yang diminta
}
</script>
</head>
<body>
<section>
<h2> Belajar efek aliran air terjun </h2> dengan senyum.
</section>
<div>
<div>
<div>
<div> <img src = "/jscss/demoiMg/201312/1.jpg"> </div>
<div> <a href = "#"> Judul gambar </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoiMg/201312/2.jpg"> </div>
<div> <a href = "#"> Judul gambar </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoiMg/201312/3.jpg"> </div>
<div> <a href = "#"> Judul gambar </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoiMg/201312/4.jpg"> </div>
<div> <a href = "#"> Judul gambar </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoiMg/201312/5.jpg"> </div>
<div> <a href = "#"> Judul gambar </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoiMg/201312/6.jpg"> </div>
<div> <a href = "#"> Judul gambar </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/demoiMg/201312/7.jpg"> </div>
<div> <a href = "#"> Judul gambar </a> </div>
</div>
</div>
</div>
<div>
</div>
</body>
</html>