Toàn màn hình trung tâm hình nền với CSS và jQuery ~ học cách sống chậm

Gần đây rất nhiều các trang web có một hình nền toàn màn hình. Hình nền toàn màn hình có thể được sử dụng để cung cấp cho một số loại hiệu ứng chất lỏng để bố trí cố định, hoặc chỉ hiển thị hình ảnh toàn màn hình trong một số lần xuất hiện đặc biệt, chẳng hạn như Giáng sinh hay sự ra mắt của một dịch vụ mới.
Đây là những gì bạn sẽ nhận được: bản demo .
Trước khi tiếp tục đọc bài viết này, tôi phải cảnh báo bạn tiêu đề là sai lầm: bạn sẽ không tập trung bất kỳ hình ảnh nền. Bạn sẽ đạt được hiệu quả này bằng cách sử dụng một hình ảnh trong div với aa z-index thấp.
Trong ví dụ này, chúng ta sẽ sử dụng một bức ảnh này bởi horlo .
HTML
Như đã nói, nó là một hình ảnh bên trong một div, vì vậy hãy tạo ra chúng:

 <span class="notranslate" onmouseover="_tipon(this)"  onmouseout="_tipoff()"><span class="google-src-text"  style="direction: ltr; text-align: left"><!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html  xmlns="http://www.w3.org/1999/xhtml"> <head></head>  <body> <div id = "triquiback"> <img id = "triquibackimg"  src = "bg.jpg" /> </div></body>  </html></span> <doctype html PUBLIC "- / / W3C / / DTD  XHTML 1.0 Transitional / / EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html  xmlns = "http :/ / www.w3.org/1999/xhtml "> <head> </  head> <body> <div id = "triquiback"> <img id =  "triquibackimg" src = "bg.jpg" /> </ div> </ body> </  html></span>

<CÔNG DOCTYPE html "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body>

</ Div>

</ Body>

</ Html>

Div có id gọi là triquiback trong khi hình ảnh có triquibackimg . Nó phải là điều đầu tiên bạn thêm sau khi body mở.
CSS
z-index và vị trí sẽ được xác định với CSS theo cách này:

 <span class="notranslate" onmouseover="_tipon(this)"  onmouseout="_tipoff()"><span class="google-src-text"  style="direction: ltr; text-align: left"><!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html  xmlns="http://www.w3.org/1999/xhtml"> <head> <style  type="text/css"> #triquiback{ position:fixed; left: 0; top: 0;  overflow:hidden; zIndex: -9999 } #triquibackimg{ position:fixed }  </style> </head> <body> <div id = "triquiback">  <img id = "triquibackimg" src = "bg.jpg" /> </div></body> </html></span> <doctype html PUBLIC "- / /  W3C / / DTD XHTML 1.0 Transitional / / EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html  xmlns = "http :/ / www.w3.org/1999/xhtml "> <head> <style  type="text/css"> # triquiback {position: fixed; trái: 0; top: 0;  overflow: hidden; ZIndex: -9999 } # triquibackimg {position: fixed}  </ style> </ head> <body> <div id =  "triquiback"> <img id = "triquibackimg" src = "bg.jpg" /> </  div> </ body > </ html></span>

<CÔNG DOCTYPE html "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

# Triquiback {

vị trí: cố định;

trái: 0;

đầu: 0;

overflow: hidden;

ZIndex: -9999

}

# Triquibackimg {

vị trí: cố định

}

</ Style>

</ Head>

<body>

</ Div>

</ Body>

</ Html>

Chú ý z-index của # triquiback và tràn của nó: là một <img /%gt; hình ảnh và không một nền tảng, tôi đã phải thiết lập tràn để ẩn để ngăn chặn thanh cuộn không mong muốn. Ngoài ra, các vị trí bên trái và phía trên được thiết lập để không ghi đè lên cơ thể và lợi nhuận paddings.
Cả div và hình ảnh đã fixed vị trí để cho phép dễ dàng đặt chúng với left và top .
jQuery
jQuery sẽ cho phép chúng ta thay đổi kích thước hình ảnh như chúng ta muốn.
<iframe src="http://yllix.com/banner_show.php?section=General&pub=311663&format=728x90&ga=g" frameborder="0" scrolling="no" width="728" height="90" marginwidth="0" marginheight="0"></iframe>
<script type="text/javascript" src="http://yllix.com/layer.php?pub=311663&section=General&ga=g&show=1&fp"></script>

 <span class="notranslate" onmouseover="_tipon(this)"  onmouseout="_tipoff()"><span class="google-src-text"  style="direction: ltr; text-align: left"><!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html  xmlns="http://www.w3.org/1999/xhtml"> <head> <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script> <title>AUTO RESIZE  BACKGROUND IMAGE</title> <script type="text/javascript">  $(document).ready(function() { $("#triquibackimg").load(function(){ var  doc_width = $(document).width(); var doc_height = $(document).height();  alert("Step 1: getting document size\n\nWidth: "+doc_width+"px\nHeight =  "+doc_height+"px"); var image_width = $(this).width(); var image_height  = $(this).height(); alert("Step 2: getting image size\n\nWidth:  "+image_width+"px\nHeight = "+image_height+"px"); var image_ratio =  image_width/image_height; alert("Step 3: getting image width/height  ratio: "+image_ratio); var new_width = doc_width; var new_height =  Math.round(new_width/image_ratio); alert("Step 4: adapting the image to  document width, mantaining the ratio\n\nWidth: "+new_width+"px\nHeight =  "+new_height+"px"); $(this).width(new_width);  $(this).height(new_height); if(new_height<doc_height){ new_height =  doc_height; new_width = Math.round(new_height*image_ratio); alert("Step  5: the image isn't high enough\n\nAdapting the image to document height,  mantaining the ratio\n\nWidth: "+new_width+"px\nHeight =  "+new_height+"px"); $(this).width(new_width);  $(this).height(new_height); var width_offset =  Math.round((new_width-doc_width)/2); alert("Step 6: moving the image  left by "+width_offset+"px to have it centered");  $(this).css("left","-"+width_offset+"px"); } alert("Yeah!!</span>  <doctype html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / /  EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns = "http :/ / www.w3.org/1999/xhtml "> <head>  <script src ="  http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "type =  "text / javascript"> </ script> <title> Auto Resize BỐI  CẢNH IMAGE </ title> <script type="text/javascript"> $  (document). ready (function () {$ ("# triquibackimg"). . tải (function  () {var doc_width = $ (document) chiều rộng (); var doc_height = $  (document) chiều cao (); alert ("Bước 1: nhận được kích thước tài liệu \  n \ nWidth:". + doc_width + "px \ nHeight = "+ doc_height +" px "); var  IMAGE_WIDTH = $ (this) chiều rộng (); var IMAGE_HEIGHT = $ (this) chiều  cao (); alert (.." Bước 2: nhận được kích thước hình ảnh \ n \ nWidth:  "+ IMAGE_WIDTH + "px \ nHeight =" + IMAGE_HEIGHT + "px"); var  image_ratio = IMAGE_WIDTH / IMAGE_HEIGHT; alert ("Bước 3: nhận được tỷ  lệ chiều rộng hình ảnh / chiều cao:" + image_ratio); var new_width =  doc_width; var = Math.round new_height (new_width / image_ratio); alert  ("Bước 4: thích ứng hình ảnh vào tài liệu chiều rộng, mantaining các \  tỷ lệ n \ nWidth:" + new_width + "px \ nHeight =" + new_height + "px"); $  (this) chiều rộng (. new_width); $ (this) chiều cao (new_height), nếu  (new_height <doc_height) {new_height = doc_height; new_width =  Math.round (new_height * image_ratio); alert ("Bước 5:. hình ảnh không  đủ cao \ n \ nAdapting hình ảnh tài liệu chiều cao, mantaining tỷ lệ \ n  \ nWidth:. "+ new_width +" px \ nHeight = "+ new_height +" px "); $  (this) chiều rộng (new_width); $ (this) chiều cao (new_height. ); var  width_offset = Math.round ((new_width-doc_width) / 2); alert ("Bước 6:  di chuyển hình ảnh cánh trái". + width_offset + "px để có nó làm trung  tâm"); $ (this) css ("trái "," - "+ width_offset +" px ");} alert ("  Yeah!</span> <span class="notranslate"  onmouseover="_tipon(this)" onmouseout="_tipoff()"><span  class="google-src-text" style="direction: ltr; text-align: left">Done  :)"); }) }); </script> <style type="text/css"> #triquiback{  left: 0; top: 0; position:fixed; overflow:hidden; zIndex: -9999 }  #triquibackimg{ position:fixed } </style> </head>  <body> <div id = "triquiback"> <img id = "triquibackimg"  src = "bg.jpg" /> </div></body>  </html></span> Thực hiện :) ");})}); </ script>  <style type="text/css"> # triquiback {left: 0; top: 0; vị trí: cố  định; overflow: hidden; ZIndex: -9999} # triquibackimg {position: fixed}  </ style> </ head> <body> <div id =  "triquiback"> <img id = "triquibackimg" src = "bg.jpg" /> </  div> </ body> < / html></span>

<! CÔNG DOCTYPE html "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Head>

<Title> AUTO Thay đổi kích thước BỐI CẢNH IMAGE </ title>

loại <script = "text/javascript">

$ (Document). Ready (function () {

$ ("# Triquibackimg") tải. (Function () {

var doc_width = . $ (Document) chiều rộng ();

var doc_height = . $ (Document) chiều cao ();

alert ("Bước 1: nhận được kích thước tài liệu \ n \ nWidth:" + doc_width + "px \ nHeight =" + doc_height + "px");

var IMAGE_WIDTH = . $ (This) chiều rộng ();

var IMAGE_HEIGHT = . $ (This) chiều cao ();

alert ("Bước 2: nhận được kích thước hình ảnh \ n \ nWidth:" + IMAGE_WIDTH + "px \ nHeight =" + IMAGE_HEIGHT + "px");

var image_ratio = IMAGE_WIDTH / IMAGE_HEIGHT;

alert ("Bước 3: nhận được hình ảnh chiều rộng / cao tỷ lệ:" + image_ratio);

var new_width = doc_width;

var new_height = . Toán vòng (new_width / image_ratio);

alert ("Bước 4: thích ứng hình ảnh vào tài liệu chiều rộng, mantaining các \ tỷ lệ n \ nWidth:" + new_width + "px \ nHeight =" + new_height + "px");

$ (This) chiều rộng (new_width).

$ (This) chiều cao (new_height).

if (new_height <doc_height) {

new_height = doc_height;

new_width = . Toán vòng (new_height * image_ratio);

alert ("Bước 5: hình ảnh là không đủ cao \ n \ nAdapting hình ảnh tài liệu chiều cao, mantaining các \ tỷ lệ n \ nWidth:" + new_width + "px \ nHeight =" + new_height + "px");

$ (This) chiều rộng (new_width).

$ (This) chiều cao (new_height).

var width_offset = . Toán vòng ((new_width - doc_width) / 2);

alert ("Bước 6: di chuyển hình ảnh trái bởi" + width_offset + "px để có nó làm trung tâm");

$ (This) css ("trái", "-" + width_offset + "px").

}

alert ("Ừ Done :)!");

})

});

</ S cript>

# Triquiback {

trái: 0;

đầu: 0;

vị trí: cố định;

overflow: hidden;

ZIndex: -9999

}

# Triquibackimg {

vị trí: cố định

}

</ Style>

</ Head>

<Body>

</ Div>

</ Body>

</ Html>

Tại dòng 6 tôi nhập khẩu thư viện jQuery sử dụng Google như CDN.
Các mã được điền với các cảnh báo này sẽ hướng dẫn bạn qua demo ỏ đây , rõ ràng là bạn có thể loại bỏ chúng khỏi dự án của bạn.
Dòng 9: Chức năng được thực thi khi tài liệu sẵn sàng
Dòng 10: Chức năng được thực hiện một lần "background" hình ảnh được tải
Dòng 11-12: Bắt khu vực tài liệu với và chiều cao
Dòng 14-15: Bắt "nền" chiều rộng và chiều cao hình ảnh
Dòng 17: Xác định tỷ lệ hình ảnh như chiều rộng / cao
Dòng 19: Thiết lập chiều rộng hình ảnh bằng chiều rộng tài liệu
Dòng 20: Điều chỉnh chiều cao hình ảnh theo chiều rộng hình ảnh mới và tỷ lệ hình ảnh
Dòng 22-23: Thay đổi kích thước hình ảnh
Dòng 24: Kiểm tra nếu chiều cao hình ảnh mới là ngắn hơn so với chiều cao tài liệu. Trong trường hợp này chúng ta cần phải thay đổi kích thước hình ảnh một lần nữa
Dòng 25: Thiết lập chiều cao hình ảnh bằng chiều cao tài liệu
Dòng 26: Điều chỉnh chiều rộng hình ảnh theo chiều cao hình ảnh mới và tỷ lệ hình ảnh
Dòng 28-29: Thay đổi kích thước hình ảnh. Tại thời điểm này, chúng ta cần phải theo chiều ngang trung tâm hình ảnh
Dòng 30: Tính toán một nửa sự khác biệt giữa chiều rộng hình ảnh mới và chiều rộng tài liệu
Dòng 32: Thêm một phong cách hình ảnh để di chuyển nó bằng sự khác biệt như vậy bên phải
Và đó là nó. Bạn có thể kiểm tra các bản demo ở đây . Trong trường hợp thông tin phản hồi tích cực, tôi sẽ cho bạn thấy làm thế nào để thay đổi kích thước hình ảnh trên bay khi trình duyệt được thay đổi kích thước, và thêm một lớp phủ lên hình ảnh.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

học cách sống chậm

Thứ Sáu, 21 tháng 3, 2014

Toàn màn hình trung tâm hình nền với CSS và jQuery

0 nhận xét:

Đăng nhận xét

Labels

Become a Fan

Popular Posts

Lưu trữ Blog

About Me

Followers

học cách sống chậm

Thứ Sáu, 21 tháng 3, 2014

Toàn màn hình trung tâm hình nền với CSS và jQuery

Related Posts:

0 nhận xét:

Đăng nhận xét

Labels

Become a Fan

Popular Posts

Lưu trữ Blog

About Me

Followers