ปลั๊กอินนี้มีปลั๊กอินผสมหลายรายการสำหรับการสลับแท็ก superslide และแผนที่โฟกัส Superslide เป็นฟังก์ชั่นที่ทุ่มเทเพื่อให้ได้มาซึ่งการโทรพิเศษของเว็บไซต์แบบครบวงจร มันสามารถแก้ปัญหาเอฟเฟกต์ส่วนใหญ่เช่นการสลับแท็กและการสลับแผนที่โฟกัสและยังสามารถรวมสไลด์หลายสไลด์เพื่อสร้างเอฟเฟกต์มากขึ้น (เข้ากันได้กับเบราว์เซอร์กระแสหลักเช่นเคอร์เนล (รวมถึง IE6 Invincible), เคอร์เนล WebKit, FF, ผู้ประกอบการ ฯลฯ ) ไลบรารีปลั๊กอินแบบครบวงจรสำหรับเว็บไซต์มีเอฟเฟกต์ JS ที่ใช้กันทั่วไปส่วนใหญ่บนเว็บไซต์ ไฟล์มีคำอธิบายโดยละเอียดเกี่ยวกับการใช้งาน
JS Call:
การคัดลอกรหัสมีดังนี้:
jQuery (". slidetxtbox") สไลด์ ({เอฟเฟกต์: "ซ้าย"});
jQuery ("#doublesLidetxt") Slide ({titcell: ". parhd li", maincell: ". parbdin", เอฟเฟกต์: "top", ทริกเกอร์: "คลิก"});
รหัส CSS:
การคัดลอกรหัสมีดังนี้:
/* เอฟเฟกต์การเลื่อนแบบสไลด์สองครั้ง*//
#doublesLidetxt {width: 524px; ซูม: 1; ตำแหน่ง: ญาติ; TEXT-ALIGN: ซ้าย; -
#doublesLidetxt .parhd {ตำแหน่ง: สัมบูรณ์; z-index: 1; ด้านบน: 10px; ซ้าย: 453px; ความกว้าง: 44px; ล้น: ซ่อน; -
#doublesLidetxt .parhd li {width: 14px; Padding: 5px 5px 5px 5px; ความสูงของสาย: 16px; ชายแดน: 1px Solid #BACCDF; ชายแดนซ้าย: 0;
ขอบด้านล่าง: 5px; ความเป็นมา: #FFF; สี:#B5C4D3; เคอร์เซอร์: ตัวชี้; ขอบซ้าย: 1px; -
#doublesLidetxt .parhd li.on {พื้นหลัง: #dbeefd; Font-Weight: ตัวหนา; สี:#367399; ชายแดนขวา: 3px Solid #4E98C6;
ขอบซ้าย: 0px; ตำแหน่ง: ญาติ; z-index: 100; Padding: 5px 10px 5px 10px;}
#doublesLidetxt .parbd {ตำแหน่ง: ญาติ; z-index: 0; ความกว้าง: 440px; ซ้าย: 0px; ชายแดน: 1px Solid #BACCDF; Padding: 6px; พื้นหลัง: #DBEEFD;}
#doublesLidetxt .parbd .slidetxtbox {พื้นหลัง: #ffff; ความกว้าง: 400px; ชายแดน: 0; Padding: 20px; -
#doublesLidetxt .parbd .slidetxtbox .hd {พื้นหลัง: #fff; -
html:
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 เข้มงวด // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">>
<html xmlns = "http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<meta http-equiv = "content-language" content = "en-cn">
<meta name = "คำหลัก" content = "">
<meta name = "คำอธิบาย" content = "">
<title> Super Slide </title>
<script type = "text/javascript" src = "../ jQuery.pack.js"> </script>
<script type = "text/javascript" src = "../ jQuery.blockui.js"> </script>
<script type = "text/javascript" src = "../ jQuery.superslide.js"> </script>
<link href = "../ default.css" rel = "stylesheet" type = "text/css">
<link href = "../ demo.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<body>
<!-เนื้อหา s->
<div id = "democontent">
<div>
<div id = "doublesLidetxt">
<div>
<ul>
<li> คอลัมน์ 1 </li>
<li> คอลัมน์ 2 </li>
<li> คอลัมน์สาม </li>
</ul>
</div>
<!-parbd s->
<div>
<div>
<!-slidetxtbox s->
<div>
<div>
<ul> <li> <a href = ""> การศึกษา 1 </a> </li> <li> <a href = ""> การฝึกอบรม 1 </a> </li> <li> <a href = ""> ไปต่างประเทศ 1 </a> </li></ul>
</div>
<div>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> จีนทำลายกฎของยักษ์ใหญ่ซอฟต์แวร์โลก </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ภาษาพูด: ถ้าคุณพูดภาษาจีนได้คุณสามารถพูดภาษาอังกฤษได้! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> เป็นการดีกว่าที่จะเรียนรู้ภาษาต่างประเทศออนไลน์มากกว่าเลือกผักในฟาร์ม </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ครูคณิตศาสตร์ฟิสิกส์และเคมีอ่านสื่อการเรียนรู้จริงหรือ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> เรียนภาษาอังกฤษเพื่อส่ง iPad2, 45 วันแห่งการพัฒนา </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ศึกษาภาษาต่างประเทศและไปที่มหาวิทยาลัยการศึกษาต่างประเทศที่ปักกิ่ง! </a> </li>
</ul>
<ul>
<li> <span> 2011-11-11 </span> <a href = ""> ครูที่มีชื่อเสียงสอนเรียงความ: 3 เทคนิคที่ฉลาดในการเขียนคะแนนสูง </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Yale Boy: สอนให้คุณเตรียมสอบ SAT </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Shi Qiang: การสอนภาษามืออาชีพระดับสูง </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ครูคณิตศาสตร์ฟิสิกส์และเคมีอ่านสื่อการเรียนรู้จริงหรือ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 【แนะนำวิธีการภาษาอังกฤษของโรงเรียนที่มีชื่อเสียงได้รับการเปิดเผย! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> "จุดทดสอบ" ของการสอบเข้าวิทยาลัย 2012 ได้รับการเปิดเผย !! </a> </li>
</ul>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> แปดโรงเรียนที่มีชื่อเสียงในออสเตรเลีย </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 2012 การจัดอันดับมหาวิทยาลัยโลกได้รับการปล่อยตัวใหม่ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> การศึกษาในสิงคโปร์หลักสูตรสองภาษาระหว่างประเทศ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> คุณสามารถเลือกจากโรงเรียนญี่ปุ่นที่มีชื่อเสียงหลังจากการสอบเข้าวิทยาลัย </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> การส่งเสริมทรัพยากรที่ได้เปรียบในอุตสาหกรรมการศึกษาและการฝึกอบรม </a> </li>
<li> <span> 2011-11-11 </span> <a href = ""> กำหนดนิทรรศการการศึกษาครั้งสุดท้ายของปีนี้ </a> </li>
</ul>
</div>
</div>
<!-slidetxtbox e->
<!-slidetxtbox s->
<div>
<div>
<ul> <li> <a href = ""> การศึกษา 2 </a> </li> <li> <a href = ""> การฝึกอบรม 2 </a> </li> <li> <a href = ""> ไปต่างประเทศ 2 </a> </li></ul>
</div>
<div>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> จีนทำลายกฎของยักษ์ใหญ่ซอฟต์แวร์โลก </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ภาษาพูด: ถ้าคุณพูดภาษาจีนได้คุณสามารถพูดภาษาอังกฤษได้! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> เป็นการดีกว่าที่จะเรียนรู้ภาษาต่างประเทศออนไลน์มากกว่าเลือกผักในฟาร์ม </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ครูคณิตศาสตร์ฟิสิกส์และเคมีอ่านสื่อการเรียนรู้จริงหรือ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> เรียนภาษาอังกฤษเพื่อส่ง iPad2, 45 วันแห่งการพัฒนา </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ศึกษาภาษาต่างประเทศและไปที่มหาวิทยาลัยการศึกษาต่างประเทศที่ปักกิ่ง! </a> </li>
</ul>
<ul>
<li> <span> 2011-11-11 </span> <a href = ""> ครูที่มีชื่อเสียงสอนเรียงความ: 3 เทคนิคที่ฉลาดในการเขียนคะแนนสูง </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Yale Boy: สอนให้คุณเตรียมสอบ SAT </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Shi Qiang: การสอนภาษามืออาชีพระดับสูง </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ครูคณิตศาสตร์ฟิสิกส์และเคมีอ่านสื่อการเรียนรู้จริงหรือ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 【แนะนำวิธีการภาษาอังกฤษของโรงเรียนที่มีชื่อเสียงได้รับการเปิดเผย! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> "จุดทดสอบ" ของการสอบเข้าวิทยาลัย 2012 ได้รับการเปิดเผย !! </a> </li>
</ul>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> แปดโรงเรียนที่มีชื่อเสียงในออสเตรเลีย </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 2012 การจัดอันดับมหาวิทยาลัยโลกได้รับการปล่อยตัวใหม่ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> การศึกษาในสิงคโปร์หลักสูตรสองภาษาระหว่างประเทศ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> คุณสามารถเลือกจากโรงเรียนญี่ปุ่นที่มีชื่อเสียงหลังจากการสอบเข้าวิทยาลัย </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> การส่งเสริมทรัพยากรที่ได้เปรียบในอุตสาหกรรมการศึกษาและการฝึกอบรม </a> </li>
<li> <span> 2011-11-11 </span> <a href = ""> กำหนดนิทรรศการการศึกษาครั้งสุดท้ายของปีนี้ </a> </li>
</ul>
</div>
</div>
<!-slidetxtbox e->
<!-slidetxtbox s->
<div>
<div>
<ul> <li> <a href = ""> การศึกษา 3 </a> </li> <li> <a href = ""> การฝึกอบรม 3 </a> </li> <li> <a href = ""> ไปต่างประเทศ 3 </a> </li></ul>
</div>
<div>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> จีนทำลายกฎของยักษ์ใหญ่ซอฟต์แวร์โลก </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ภาษาพูด: ถ้าคุณพูดภาษาจีนได้คุณสามารถพูดภาษาอังกฤษได้! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> เป็นการดีกว่าที่จะเรียนรู้ภาษาต่างประเทศออนไลน์มากกว่าเลือกผักในฟาร์ม </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ครูคณิตศาสตร์ฟิสิกส์และเคมีอ่านสื่อการเรียนรู้จริงหรือ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> เรียนภาษาอังกฤษเพื่อส่ง iPad2, 45 วันแห่งการพัฒนา </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ศึกษาภาษาต่างประเทศและไปที่มหาวิทยาลัยการศึกษาต่างประเทศที่ปักกิ่ง! </a> </li>
</ul>
<ul>
<li> <span> 2011-11-11 </span> <a href = ""> ครูที่มีชื่อเสียงสอนเรียงความ: 3 เทคนิคที่ฉลาดในการเขียนคะแนนสูง </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Yale Boy: สอนให้คุณเตรียมสอบ SAT </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> Shi Qiang: การสอนภาษามืออาชีพระดับสูง </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> ครูคณิตศาสตร์ฟิสิกส์และเคมีอ่านสื่อการเรียนรู้จริงหรือ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 【แนะนำวิธีการภาษาอังกฤษของโรงเรียนที่มีชื่อเสียงได้รับการเปิดเผย! </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> "จุดทดสอบ" ของการสอบเข้าวิทยาลัย 2012 ได้รับการเปิดเผย !! </a> </li>
</ul>
<ul>
<li> <pan> 2011-11-11 </span> <a href = ""> แปดโรงเรียนที่มีชื่อเสียงในออสเตรเลีย </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> 2012 การจัดอันดับมหาวิทยาลัยโลกได้รับการปล่อยตัวใหม่ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> การศึกษาในสิงคโปร์หลักสูตรสองภาษาระหว่างประเทศ </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> คุณสามารถเลือกจากโรงเรียนญี่ปุ่นที่มีชื่อเสียงหลังจากการสอบเข้าวิทยาลัย </a> </li>
<li> <pan> 2011-11-11 </span> <a href = ""> การส่งเสริมทรัพยากรที่ได้เปรียบในอุตสาหกรรมการศึกษาและการฝึกอบรม </a> </li>
<li> <span> 2011-11-11 </span> <a href = ""> กำหนดนิทรรศการการศึกษาครั้งสุดท้ายของปีนี้ </a> </li>
</ul>
</div>
</div>
<!-slidetxtbox e->
</div>
</div>
<!-parbd e->
</div>
<script type = "text/javascript">
jQuery (". slidetxtbox") สไลด์ ({เอฟเฟกต์: "ซ้าย"});
jQuery ("#doublesLidetxt") Slide ({titlecell: ". parhd li", maincell: ". parbdin", เอฟเฟกต์: "top", ทริกเกอร์: "คลิก"});
</script>
</div>
</div>
<!-เนื้อหา e->
</body>
</html>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ฉันหวังว่าคุณจะชอบ