배경을 통해 업로드 한 후 사진이 변형 된 문제를 종종 발생합니다. 웹 사이트 스타일이 적합한 경우이 방법을 사용하여 모든 크기의 그림 슬라이딩 (위, 아래, 왼쪽 및 오른쪽)을 지원하여 페이지를 레이아웃 할 수 있습니다.
<! DocType html> <html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 모든 크기의 슬라이드> <style> div {margin : 0 auto; 오버플로 : 숨겨진;}. main {너비 : 1000px;}. divmg_div1 {너비 : 380px; float : 왼쪽;}. divmg .div4_title {너비 : 380px; 높이 : 103px; 배경색 : #EDB205; 색상 : #fff; Font-Family : "Microsoft Yahei"; 글꼴 크기 : 22px; 글꼴 중량 : 대담한; 라인 높이 : 90px; 텍스트 정렬 : 센터; 문자 스페이스 : 5px;}. diMimg_img1 {너비 : 380px; 높이 : 414px; 마진-탑 : 5px; 배경색 : #fff; 위치 : 상대;}. Mivimg_div2 {너비 : 615px; float : right;}. divimg_img2 {너비 : 194px; 높이 : 256px; 플로트 : 왼쪽; 배경색 : #fff; 위치 : 상대;}. divimg_img3 {너비 : 417px; 높이 : 256px; 플로트 : 오른쪽; 배경색 : #fff; 위치 : 상대;}. divimg_img4 {너비 : 366px; 높이 : 262px; 플로트 : 왼쪽; 마진-탑 : 4px; 배경색 : #fff; 위치 : 상대;}. divimg_img5 {너비 : 245px; 높이 : 262px; 플로트 : 오른쪽; 마진-탑 : 4px; 배경색 : #fff; 위치 : 상대;}. divimg .gif {위치 : 절대; 왼쪽 : 50%; 상단 : 50%; 마진 왼쪽 : -50px; 마진 -탑 : -50px; z-index : 2;}. divimg .img {위치 : 절대; z- 인덱스 : 1; 왼쪽 : 0; 상단 : 0; 디스플레이 : none;}} </style> <script src = "js/jquery-1.10.2.min.js"> </script> <cript> $ (document) .ready (function (e) {$ ( ". diMimg.img"). load (function () {) {) {) {var w = parseint ($ (this).) hh = $ (this) .parent (). height (); var ww = $ (this) .parent (). width (); var blw = w/parseint (ww); var blh = h/parseint (hh); 함수 left () {$ (this) .animate ({왼쪽 :-( parseint (parseint (hh)/h*w))-(parseint (ww))}, 10000, 오른쪽)} function right () {$ (this) .animate ({왼쪽 : 0}, 10000, 왼쪽);} 함수 top () {$ (this) .animate ({top :-( parseint (parseint (ww)/w*h))-(parseint (hh))}, 10000, 하단);} 함수 맨 아래 () {$ (this) .animate ({top : 0}, 10000, top);} blh) {$ (hh) .width (parseint (parseint (hh)/h*w)); $ (this) .prev (). $ (this) .animate ({왼쪽 :-( parseint (parseint (hh)/h*w)-(parseint (ww))}, 10000, 오른쪽);} else if (blw < blh) {$ (this) .Height (parseint (parseint (ww)/w*h)). 너비 (ww); $ (this) .prev (). hide (); $ (this) .css ({ "z-index": "3", "di splay ":"block "}); $ (this) .animate ({top :-( parseint (parseint (ww)/w*h)-(parseint (hh)))}, 10000, 하단);}}); $ (". div4 .img "). 각 (함수 (index, element) {$ (this) .attr ("src ", $ (this) .attr ("name "));});}); </script> </head> <body> <div> <div> <div> <div> <div> 모든 크기의 슬라이드 </div> <div> <img src = "images/loadding.gif"/> <img name = "images/am_bigimg01.jpg 이름 = "images/am_nyimg01.jpg"src = ""/> </div> <div> <img src = "images/loadding.gif"/> <img name = "images/am_img02.jpg"src = ""/> </div> <div> <img src = "image/loadding.gif" 이름 = "이미지/am_newimg01.jpg"src = ""/> </div> <div> <img src = "images/loadding.gif"/> <img name = "images/am_rynewimg03.jpg"src = ""/> </div> </div> </div> </html> </html>