Як зробити гумовий фон для сайту на jQuery

  1. Сподобався пост? Допоможи іншим дізнатися про цю статтю, кликни на кнопку соціальних мереж ↓↓↓

Всім привіт!!!

Ця стаття буде цікава всім тим, хто створює сайти. Я думаю, ви не раз бачили на різних веб-сайтах такий ефект, коли при різному розширенні екрану фон сайту автоматично красиво розтягується по ширині і висоті монітора. Якщо ж ви з подібним ефектом не стикалися, рекомендую подивитися готовий варіант, і спробувати на ньому зменшити або збільшити масштаб в самому браузері.

Отже, для початку знайдіть якісне зображення для фону і помістіть його в корінь сайту.

Створіть файл «index.html» і встановіть ось такий код:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "https : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = UTF-8 "/> <title> </ title> <link href = "style.css" rel = "stylesheet" type = "text / css" /> <script type = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery /1.3.2/jquery.js "> </ script> <script> $ (document) .ready (function () {var bgImage = $ ( '# background-image'); function resizeImg () {var imgwidth = bgImage .width (), imgheight = bgImage.height (), winwidth = $ (window) .width (), winheight = $ (window) .height (), widthratio = winwidth / imgwidth, heightratio = winheight / imgheight, widthdiff = heightratio * imgwidth, heightdiff = widthratio * imgheight; if (heightdiff> winheight) {bgImage.css ({width: winwidth + 'px', height: heightdiff + 'px'});} else {bgImage.css ({width: widthdiff + 'px ', height: winheight +' px '});} $ ( "# background-image"). show ();} resi zeImg (); $ (Window) .resize (function () {resizeImg ();}); }); </ Script> <style> # background-image {position: absolute; top: 0; left: 0; z-index: -10; overflow: hidden; width: 100%; display: none; } .Content {height: 500px;} </ style> </ head> <body> <img src = "nature.jpg" id = "background-image" /> </ body> </ html>

Рядок №61 - це зображення, до якого присвоєно id «background-image», воно і буде служити фоном.

<Img src = "fon.jpg" id = "background-image" />

За допомогою коду JavaScript відбувається обчислення розміру екрану у користувача, який відкрив ваш сайт. Обчислення розміру екрану потрібно для нормального показу фонового зображення.

Звичайно, можна не морочитися, і просто завантажити исходник Звичайно, можна не морочитися, і просто завантажити исходник .

Звичайно, можна не морочитися, і просто завантажити исходник

Сподобався пост? Допоможи іншим дізнатися про цю статтю, кликни на кнопку соціальних мереж ↓↓↓

Останні новини категорії:

Схожі статті

Популярні статті:

Додати коментар

Мітки: ефекти для сайту

Сподобався пост?
Сподобався пост?