มักจะพบปัญหาที่รูปภาพจะผิดรูปหลังจากอัปโหลดผ่านพื้นหลัง หากรูปแบบเว็บไซต์ของคุณเหมาะสมคุณสามารถใช้วิธีนี้เพื่อจัดวางหน้าเว็บรองรับการเลื่อนรูปภาพขนาดใดก็ได้ (ขึ้น, ลง, ซ้ายและขวา)
- Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> สไลด์ขนาดใดก็ได้ </title> <style> div {margin: 0 auto; Overflow: Hidden;}. Main {Width: 1000px;}. divmg_div1 {width: 380px; ลอย: ซ้าย;}. divmg .div4_title {width: 380px; ความสูง: 103px; พื้นหลังสี: #edb205; สี: #FFF; Font-Family: "Microsoft Yahei"; ขนาดตัวอักษร: 22px; Font-Weight: ตัวหนา; ความสูงของสาย: 90px; TEXT-ALIGN: CENTER; ตัวอักษรระยะห่าง: 5px;}. divimg_img1 {width: 380px; ความสูง: 414px; ระยะขอบด้านบน: 5px; พื้นหลังสี: #FFF; ตำแหน่ง: สัมพัทธ์;}. divimg_div2 {width: 615px; ลอย: ขวา;}. divimg_img2 {width: 194px; ความสูง: 256px; ลอย: ซ้าย; พื้นหลังสี: #FFF; ตำแหน่ง: ญาติ;}. divimg_img3 {width: 417px; ความสูง: 256px; ลอย: ขวา; พื้นหลังสี: #FFF; ตำแหน่ง: ญาติ;}. divimg_img4 {width: 366px; ความสูง: 262px; ลอย: ซ้าย; ระยะขอบด้านบน: 4px; พื้นหลังสี: #FFF; ตำแหน่ง: สัมพัทธ์;}. divimg_img5 {width: 245px; ความสูง: 262px; ลอย: ขวา; ระยะขอบด้านบน: 4px; พื้นหลังสี: #FFF; ตำแหน่ง: ญาติ;}. divimg .gif {ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านบน: 50%; ขอบซ้าย: -50px; ระยะขอบด้านบน: -50px; z-index: 2;}. divimg .img {ตำแหน่ง: สัมบูรณ์; z-index: 1; ซ้าย: 0; ด้านบน: 0; จอแสดงผล: ไม่มี;} </style> <script src = "js/jQuery-1.10.2.min.js"> </script> <script> $ (เอกสาร). พร้อม (ฟังก์ชั่น (e) {$ (". divimg.img"); load (var w = parseint hh = $ (this) .parent (). ความสูง (); var ww = $ (this) .parent (). width (); var blw = w/parseint (ww); var blh = h/parseint (hh); ฟังก์ชั่น; left () {$ (this) .animate ({left :-( parseint (parseint (hh)/h*w)-(parseint (ww)))}, 10,000, ขวา)} ฟังก์ชั่นขวา () {$ (นี้). top () {$ (นี่) .animate ({top :-( parseint (parseint (ww)/w*h)-(parseint (hh)))}, 10,000, ด้านล่าง);} ฟังก์ชั่นด้านล่าง () {$ (นี่). BLH) {$ (นี่) .Height (HH) .Width (ParseInt (Parseint (HH)/H*W)); $ (นี่) .prev (). ซ่อน (); $ (นี่) .animate ({left :-( parseint (parseint (hh)/h*w)-(parseint (ww)))}, 10,000, ขวา);} อื่นถ้า (blw <blw < blh) {$ (นี่) .height (parseint (parseint (ww)/w*h)). ความกว้าง (ww); $ (นี่) .prev (). ซ่อน (); $ (นี่) .css ({"z-index": "3", "di Splay ":" block "}); $ (this) .animate ({top :-( parseint (parseint (ww)/w*h)-(parseint (hh)))}, 10,000, ด้านล่าง);}}); $ (" div4 .img "). แต่ละ (ฟังก์ชั่น (ดัชนี, องค์ประกอบ) {$ (นี่) .attr (" src ", $ (นี่) .attr (" ชื่อ "));});}); </script> </head> <body> <div> <div> <div> <div> สไลด์ขนาดใดก็ได้ </div> <div> <img src = "images/loadding.gif"/> <img name = "images/am_bigimg01.jpg" src = "/> </div name = "images/am_nyimg01.jpg" src = ""/> </div> <div> <img src = "images/loadding.gif"/> <img name = "images/am_img02.jpg" src = "/> </div> name = "images/am_newimg01.jpg" src = ""/> </div> <div> <img src = "images/loadding.gif"/> <img name = "images/am_rynewimg03.jpg" src = "/>