غالبًا ما تواجه المشكلة التي تشوه الصور بعد تحميلها من خلال الخلفية. إذا كان أسلوب موقع الويب الخاص بك مناسبًا ، فيمكنك استخدام هذه الطريقة لتخطيط الصفحة ، ودعم أي حجم من انزلاق الصورة (لأعلى ، لأسفل ، اليسار واليمين)
<! 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 ؛ خط الرصيف: جريئة ؛ ارتفاع الخط: 90 بكسل ؛ محاذاة النص: المركز ؛ تباعد الحروف: 5px ؛}. divimg_img1 {width: 380px ؛ الارتفاع: 414px ؛ الهامش: 5 بكسل ؛ خلفية اللون: #fff ؛ الموضع: النسبية ؛}. divimg_div2 {width: 615px ؛ تعويم: يمين ؛}. divimg_img2 {width: 194px ؛ الارتفاع: 256 بكسل ؛ تعويم: اليسار. خلفية اللون: #fff ؛ الموضع: النسبية ؛}. divimg_img3 {width: 417px ؛ الارتفاع: 256 بكسل ؛ تعويم: صحيح. خلفية اللون: #fff ؛ الموضع: قريب ؛}. divimg_img4 {width: 366px ؛ الارتفاع: 262 بكسل ؛ تعويم: اليسار. الهامش: 4 بكسل ؛ خلفية اللون: #fff ؛ الموضع: قريب ؛}. divimg_img5 {width: 245px ؛ الارتفاع: 262 بكسل ؛ تعويم: صحيح. الهامش: 4 بكسل ؛ خلفية اللون: #fff ؛ الموقف: النسبية ؛}. divimg .gif {الموضع: مطلق ؛ اليسار: 50 ٪ ؛ أعلى: 50 ٪ ؛ الهامش اليساري: -50px ؛ الهامش: -50px ؛ z-index: 2 ؛}. divimg .img {الموضع: absomute ؛ Z-index: 1 ؛ اليسار: 0 ؛ أعلى: 0 ؛ العرض: none ؛} </style> <script src = "js/jquery -1.10.2.min.js"> </script> <script> $ (document) .Ready (function (e) {$ (". divimg.img"). hh = $ (this) .parent () left () {$ (this) .animate ({left :-( parseint (parseint (hh)/h*w)-(parseint (ww)))} ، 10000 ، right)} وظيفة اليمين () {$ (this) .animate ({يسار: 0} ، 10000 ، اليسار) ؛ TOP () {$ (this) .animate ({top :-( parseint (parseint (ww)/w*h)-(parseint (hh)))} ، 10000 ، bottom) ؛} function bottom () {$ (this) .animate ({top: 0} ، 10000 ، top) ؛}}} if (blw> blh) {$ (this). height (hh). width (parseint (parseint (hh)/h*w) ؛ $ (this) .prev (). Hide () ؛ $ (this) .animate ({left :-( parseint (parseint (hh)/h*w)-(parseint (ww)))} ، 10000 ، right) ؛} else else (blw < blh) {$ (this). height (parseint (parseint (ww)/w*h)). العرض (ww) ؛ $ (this) .prev () splay ":" block "}) ؛ $ (this) .animate ({top :-( parseint (parseint (ww)/w*h)-(parseint (hh)))} ، 10000 ، bottut) ؛}}) ؛ $ (". div4 .IMG "). كل (دالة (الفهرس ، العنصر) {$ (هذا) .ATTR (" src "، $ (this) .attr (" name ") ؛}) ؛}) ؛ </script> </head> <body> <viv> <viv> <viv> <viv> شريحة من أي حجم </div> <div> <img src = "images/loadding.gif"/> <img name = "images/am_bigimg01.jpg" src = "/>/div> <div> name = "images/am_nyimg01.jpg" src = ""/> </viv> <viv> <img src = "images/loadding.gif"/> <img name = "images/am_img02.jpg" src = ""/> </div> <img src = "images. name = "images/am_newimg01.jpg" src = ""/> </viv> <viv> <img src = "images/loadding.gif"/> <img name = "images/am_rynewimg03.jpg" src = "" "