ความคิดเห็น: เอฟเฟกต์การไหลของน้ำตกหน้าเว็บสามารถสามารถโหลดรูปภาพได้ไม่ จำกัด เขียนขึ้นอยู่กับเทคโนโลยี 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> jQuery ไม่ จำกัด การโหลดน้ำตก Flow </title>
<style type = "text/css">
/* แท็ก redefinition*/
ร่างกาย {padding: 0; มาร์จิ้น: 0; พื้นหลัง: #DDD URL (/jscss/demoimg/201312/bg55.jpg) ทำซ้ำ;}
img {border: none;}
A {การตกแต่งข้อความ: ไม่มีสี:#444;}
A: โฮเวอร์ {สี:#999;}
#title {Width: 600px; มาร์จิ้น: 20px auto; text-allign: 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 {width: auto; ความสูง: auto; margin: 0 auto; ตำแหน่ง: ญาติ;}
#wrap .box {width: 280px; ความสูง: auto; padding: 10px; border: none; float: left;}
#wrap .box .info {width: 280px; ความสูง: auto; border-radius: 8px; box-shadow: 0 0 11px #666; พื้นหลัง: #FFF;}
#wrap .box .info .pic {width: 260px; ความสูง: auto; margin: 0 auto; padding-top: 10px;}
#wrap .box .info .Pic: โฮเวอร์ {
-webkit-animation: Shade 3S ความสะดวกในการออก 1;
-moz-Animation: Shade 3s Ease-Out 1;
-ms-animation: Shade 3s Ease-In-Out 1;
-o-Amanation: Shade 3S ความสะดวกสบาย 1;
แอนิเมชั่น: Shade 3S ความสะดวกสบาย 1;
-
#wrap .box .info .pic img {width: 260px; Border-Radius: 3px;}
#wrap .box .info .title {width: 260px; ความสูง: 40px; margin: 0 auto; line-height: 40px; text-allign: center; color:#666; Font-size: 18px; Font-Weight: bold; overflow: ซ่อน;
</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': 'ชื่อภาพ'}, {'src': '2.jpg', 'title': 'ชื่อภาพ'}, {'src': '3.jpg', 'ชื่อเรื่อง': 'ชื่อภาพ' ชื่อเรื่อง '}, {' src ':' 5.jpg ',' title ':' ชื่อภาพ '}, {' src ':' 6.jpg ',' title ':' ชื่อภาพ '}, {' src ':' 7.jpg ',' ชื่อเรื่อง ':' ชื่อภาพ '}];
// ตั้งค่าโหลดเลื่อน
window.onscroll = function () {
// คำนวณคำขอข้อมูล
ถ้า (getCheck ()) {
var wrap = document.getElementById ('wrap');
สำหรับ (ฉันอยู่ในข้อมูล) {
// สร้างกล่อง
var box = document.createElement ('div');
box.className = 'box';
wrap.appendchild (กล่อง);
// สร้างข้อมูล
var info = document.createElement ('div');
info.className = 'info';
Box.AppendChild (ข้อมูล);
// สร้างรูป
var pic = document.createElement ('div');
pic.className = 'pic';
info.appendchild (รูป);
// สร้าง 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>
<body>
<section>
<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>