Page 1 of 1

วิธีการการใช้ jquery เข้ามาปรับแก้ไขการแสดงของรูปภาพ เพื่อขยายและขยับตำแหน่ง ของ รูปภาพ

Posted: 28/11/2019 2:55 pm
by Ittichai_chupol
- ในการพัฒนาระบบเว็บ ให้มีความสวยงาม หรือมีรูปเล่นต่างๆ เพื่อให้ระบบเว็บหรือระบบ ที่พัฒนามีความน่าใช้งานมากขึ้น ก็คงหนีไม่พ้นการใช้งาน css เข้ามาช่วยในการทำงานของสิ่งเหล่านี้
- ซึ่งในปัจจุบันนี้ css ที่สวยๆ หรือ มีลูกเล่นเยอะ นั้นมีให้หาโหลดมาใช้งานได้มากมยตาม เว็บไซต์ ต่างๆมากมาย หรือถ้าหากใครมีึความรู้ความสามารถก็ที่สร้างขึ้นมาใช้เองได้เลย หรือไมก็นำ css ที่มีอยู่ก่อนมาปรับเปลี่ยนเฉพาะบางส่วนให้เข้ากับความต้องการของผู้พัฒนา โดยอาจจะเป็นการเปลี่ยนโดยเข้าไปปรับแก้ไขในตัวโคด Css โดยตรงเลย หรืออาจะเป็นการใช้ Javascript มาช่วยในการปรับเปลี่ยนก็ได้ ดังตัวอย่างต่อจากนี้ คือการใช้งาน jquery หรือ javascript เข้ามาช่วยในการเปลี่ยนค่า หรือการเพิ่มลูกต่างๆให้กับผลการแสดง

ดังตัวอย่างนี้ คือ การใช้ jquery เข้ามาช่วยเพิ่มลูกเล่นให้กับรูปภาพ คือ เมื่อมีการกดคลิกที่ลูก แล้วรูปภาพจะมีการขยายขึ้น พร้อมกับ การเปลี่ยนตำแหน่งแบบเลือน โดยตัวอย่างนี้จะเป็นการประสาน กัน ระหว่าง css กับ jquery ซึ่งผุ้ที่เข้ามาศึกษาสารถที่จะนำไปปรับใช้ได้
-- โดยจะใช้ ฟังชั่น ของ jquery ก็คือ animate() ซึ่งเป็นคำสั่งสำหรับการสร้าง Animation หรือสร้างการเคลื่อนไหวให้กับ Elements ต่าง ๆ

ตัวอย่างโคด

Code: Select all


!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> //เรียกใช library javascript
        <script>
            $(document).ready(function () { 
                $("#start").click(function () { // ตรวจสอบว่า มีการคลิกที่  id start หรือไม
                    $("img").animate({height: 400, width: 400}, 1000); //เพิ่มความยาว กับ ขาวสูง โดยจะเ็นรูปแบบค่อยๆ ขยาย
                    $("div").animate({left: "+=100px"});  // ขยับ div ออกไปด้านซ้าย
                    $("div").animate({top: "+=100px"}); ขยับ div ลงไปด้านล่าง
                });
            });
        </script> 
    </head>
    <body>
        <div style="position:relative"> //กำหนด position:relative เพื่อทำให้สามารถขยับ  tag div ได้ ถ้าหากไม่ใส่ จะขยับไม่ได้
            <img id="start" src="1014439.jpg" alt="Trulli" style="background:#98bf21;height:100px;width:100px"> //แสดงรูปตั้งต้น
        </div>
    </body>
</html>

ตัวอย่างผลลัพธ์
ezgif.com-video-to-gif (5).gif
ezgif.com-video-to-gif (5).gif (550.6 KiB) Viewed 411 times
บทความที่เกี่ยวข้อง

การใช้ .attr() jquery เพื่อดึงค่าจาก attribute ของ element หรือกำหนดค่าให้กับ attribute
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก
วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript
วิธีการทำเมนู dropdows แบบไม่มีพื้นหลัง