การทำ website เมื่อเวปเราใหญ่ขึ้นก็มันจะมีลูกเล่นมากขึ้นหรือ Ad ต่างๆมากมาย หลายรูปแบบเพื่อนำเสนอให้ส่วนต่างๆ น่าสนใจขึ้น
ซึ่งรูปแบบที่เราเห็นกันบ่อยๆคือ เมื่อคลิกหรือลากเมาส์ผ่านบางตำแหน่ง จะมีการขยายในส่วนนั่นให้ใหญ่ขึ้นเพื่อนำเสนอ ในที่นี้ผมเรียกว่ารูปแบบ Expand ซึ่งเป็นที่นิยม ผมได้เขียน Script ขึ้นมาชุดหนึ่งเพื่อใช้งานซึ่งมีรูปแบบดังนี้
รูปแบบ
1. Expand จาก บน -> ล่าง
2. Expand จาก ล่าง -> บน
3. Expand จาก ซ้าย -> ขวา
4. Expand จาก ขวา -> ซ้าย
สคริป Javascript ที่ต้องใช้
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://uptoyou.life/assets/js/ad-expand-1.min.js"></script>
1. Expand จาก บน -> ล่าง (ตัวอย่าง expand จากสูง 90 เป็น 300)
การวาง Script ใน Page
<div id="{name}"> // ad </div> <script> var expand = new AdExpand("{name}"); expand.sizeClose("500","90"); expand.sizeOpen("500","300"); expand.setup(); </script>
การวาง Script ใน Ad
// เมื่อต้องการให้เปิด ให้เรียกใช้ฟังชั่นนี้ expand.open();
// เมื่อต้องการให้ปิด ให้เรียกใช้ฟังชั่นนี้ expand.close();
2. Expand จาก ล่าง -> บน (ตัวอย่าง expand จากสูง 90 เป็น 300)
การวาง Script ใน Page
<div id="{name}"> // ad </div> <script> var expand = new AdExpand("{name}"); expand.sizeClose("500","90"); expand.sizeOpen("500","300"); expand.style("up"); expand.setup(); </script>
การวาง Script ใน Ad
// เมื่อต้องการให้เปิด ให้เรียกใช้ฟังชั่นนี้ expand.open();
// เมื่อต้องการให้ปิด ให้เรียกใช้ฟังชั่นนี้ expand.close();
3. Expand จาก ซ้าย -> ขวา (ตัวอย่าง expand จากกว้าง 320 เป็น 700)
การวาง Script ใน Page
<div id="{name}"> // ad </div> <script> var expand = new AdExpand("{name}"); expand.sizeClose("320","460"); expand.sizeOpen("700","460"); expand.setup(); </script>
การวาง Script ใน Ad
// เมื่อต้องการให้เปิด ให้เรียกใช้ฟังชั่นนี้ expand.open();
// เมื่อต้องการให้ปิด ให้เรียกใช้ฟังชั่นนี้ expand.close();
4. Expand จาก ขวา -> ซ้าย (ตัวอย่าง expand จากกว้าง 320 เป็น 700)
การวาง Script ใน Page
<div id="{name}"> // ad </div> <script> var expand = new AdExpand("{name}"); expand.sizeClose("320","460"); expand.sizeOpen("700","460"); expand.style("left"); expand.setup(); </script>
การวาง Script ใน Ad
// เมื่อต้องการให้เปิด ให้เรียกใช้ฟังชั่นนี้ expanxd.open();
// เมื่อต้องการให้ปิด ให้เรียกใช้ฟังชั่นนี้ expand.close();
* หาต้องการให้เวลาเปลี่ยนมีการเคลื่อนไหวที่นุ่มนวลมาขึ้นให้เพื่อค่านี้ก่อนเปิด เข่น
expand.adAnimate('yes'); expand.open();
ตัวอย่างทั้งหมด : http://uptoyou.life/other/javascript/expand.php