Скрипт смены фона сайта


Скрипт смены фона сайта

5184
10 из 10
Проголосовало: 7






Итак начнём с конструктора и создания нового блока.

После создания в конструкторе блока, помещаем в него такой HTML код

Code
<center>[<small><a href="javascript://" onclick="deletebg()">Удалить свой фон</a></small>] [<small>Растянуть фон? <input id="str" type="checkbox"></input></small>]</center>  
  <span id="background"></span>  
  Или используйте уже имеющееся:<br>  
  <select id="bgs">  
  <option selected disabled>Варианты фона</option>  
  <option disabled>Вернуть свою ссылку на фон</option>  
  <option value="Ссылка на любой фон 1">Фон 1</option>  
  <option value="Ссылка на любой фон 2">Фон 2</option>  
  ...  
  <option value="Ссылка на любой фон n">Фон n</option>  
  </select>  
  <script type="text/javascript">  
  var dmn="ваш домен";  
  $(document).ready(function() {  
  $('#bgs').change(function(){  
  $('#bg').val($("select#bgs").val());  
  });  
  $('#str').change(function(){  
  if($("#str").is(':checked')){  
  setCookie("stretched", null, { expires: -1, path:"/", domain:dmn} );  
  $('body').removeClass('bg').addClass('bg_temp');  
  setCookie("stretched", "yes", { expires: 999999999999999, path:"/", domain:dmn} );  
  }else if($("#str").is(':not(:checked)')){  
  setCookie("stretched", null, { expires: -1, path:"/", domain:dmn} );  
  $('body').removeClass('bg_temp').addClass('bg');  
  setCookie("stretched", "no", { expires: 999999999999999, path:"/", domain:dmn} );  
  }  
  });  
  var bg=document.getElementById('background')  
  var backgr=getCookie("background")  
  if(backgr){bg.innerHTML="<input id='bg' placeholder='Ваша прямая ссылка на фон, без кавычек' size='35' onclick='select()' value="+backgr+"></input><center><button value='Сменить фон' onclick='bgchange()'>Сменить фон</button></center>";}  
  else if(!backgr){  
  bg.innerHTML="<input id='bg' placeholder='Ваша прямая ссылка на фон, без кавычек' size='35' onclick='select()'></input><center><button value='Сменить фон' onclick='bgchange()'>Сменить фон</button></center>";  
  }  
  if(backgr){$('#bgs :nth-child(2)').attr("value",backgr);$('#bgs :nth-child(2)').removeAttr("disabled");}  
  });  
  function deletebg(){  
  if(!getCookie("background")){alert("У вас нет установленного фона, удалять нечего")}else{  
  setCookie("background", null, { expires: -1, path:"/", domain:dmn} )  
  alert("Фон выставлен по умолчанию");  
  location.reload(true)}  
  }  
  function bgchange(){  
  if(bg.value!=''){var bg_link=bg.value  
  if(!bg_link.match(/http[^\s\"]+[^\" >]*?/ig)){alert("Вы ввели неверную ссылку на фон")}  
  else{  
  setCookie("background", bg_link, { expires: 999999999, path:"/", domain:dmn} )  
  alert("Новый фон установлен, перезагрузите главную страницу")  
  location.reload(true)  
  }  
  }else{alert("Вы не ввели ссылку на фон")}  
  }  
  </script>


Далее заходим в Общие шаблоны ->Таблица стилей (CSS) и помещаем в любое место, лучше в самый конец чтобы не запутаться

Code
.bg_temp{  
  background-Position: center;  
  background-Attachment: fixed;  
  background-Repeat: no-repeat;  
  background-size: 100% 100%;  
  -moz-background-size: 100% 100%;  
  -o-background-size: 100% 100%;  
  -webkit-background-size: 100% 100%;  
  }  
  .bg{  
  background-Position: center;  
  background-Attachment: fixed;  
  background-Repeat: no-repeat;  
  }


Далее идут различия, надо в Глобальные блоки->Верхняя часть сайта в самое начало запихнуть следующий код

Code
<script type="text/javascript">  
  function getCookie(name) {  
  var matches = document.cookie.match(new RegExp(  
  "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"  
  ))  
  return matches ? decodeURIComponent(matches[1]) : undefined  
  }  
  function setCookie(name, value, props) {  
  props = props || {}  
  var exp = props.expires  
  if (typeof exp == "number" && exp) {  
  var d = new Date()  
  d.setTime(d.getTime() + exp*1000)  
  exp = props.expires = d  
  }  
  if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }  
   
  value = encodeURIComponent(value)  
  var updatedCookie = name + "=" + value  
  for(var propName in props){  
  updatedCookie += "; " + propName  
  var propValue = props[propName]  
  if(propValue !== true){ updatedCookie += "=" + propValue }  
  }  
  document.cookie = updatedCookie  
   
  }  
  var bg_li=getCookie("background")  
  if(bg_li){document.body.style.backgroundImage = 'url('+bg_li+')';}else{document.body.style.backgroundImage = 'url(/wallpaper.jpg)'}  
  </script>


Сохраняем, и переходим в Глобальные блоки->Нижняя часть сайта и тоже в самое начало вставляем следующий код

Code
<script type="text/javascript">  
  function getCookie(name) {  
  var matches = document.cookie.match(new RegExp(  
  "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"  
  ))  
  return matches ? decodeURIComponent(matches[1]) : undefined  
  }  
  function setCookie(name, value, props) {  
  props = props || {}  
  var exp = props.expires  
  if (typeof exp == "number" && exp) {  
  var d = new Date()  
  d.setTime(d.getTime() + exp*1000)  
  exp = props.expires = d  
  }  
  if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }  
   
  value = encodeURIComponent(value)  
  var updatedCookie = name + "=" + value  
  for(var propName in props){  
  updatedCookie += "; " + propName  
  var propValue = props[propName]  
  if(propValue !== true){ updatedCookie += "=" + propValue }  
  }  
  document.cookie = updatedCookie  
   
  }  
  if(getCookie("stretched")=="yes"){$('#str').attr('checked','true');$('body').removeClass('bg').addClass('bg_temp');} else if(getCookie("stretched")=="no" || !getCookie("stretched")){$('#str').removeAttr('checked');$('body').removeClass('bg_temp').addClass('bg');}  
  document.body.style.padding = '0';  
  document.body.style.margin = '0';  
  </script>


Сохраняем и переходим к следующему пункту настройка всего выше написанного

Итак, скрипт вы установили, далее проверяем код из первого пункта, меняем, если хотим, в списке <select> в пунктах <option> на прямые ссылки на фон, к примеру <option value="http://uweb.su/wallpaper.png">Фон 1</option>
Ниже смотрим строчку var dmn="ваш домен"; тут надо вставить ваш домен, к примеру var dmn="uweb.su"; переменная вроде относится к блоку и должна работать, если не будет, то просто вместо букв dmn вставте туда в кавычках ваш домен.

Code
document.body.style.backgroundImage = 'url(/wallpaper.jpg)'


выставляем вместо /wallpaper.jpg путь до вашего фона который будет стандартным и постоянным для всех.

Далее код из предпоследнего пункта, тут просто описание и объяснение как видите функции получения и удаления куки повторяются, это сделано просто из-за незнания, т.к. я не уверен будет ли функции из верхнего блока активна и для нижнего.

Ну и вроде бы всё, ах да про css и функцию растяжки, как мы все знаем есть фон который либо меньше, либо больше отображаемой части сайта, так вот эта функция (если включена) растягивает (втискивает) ваш фон в границы сайта, css спокойно настраивается и имеет довольно привычный вид.

Фон применяется к тегу body в качестве background-image, так что по идее должно работать на любом сайте. Вроде всё, если что обнаружу ещё, новость обновлю.
Автор публикации: Загрузка
Загрузка
DIMON_-_BEST, это его n материал
Источник: http://uweb.su/
  • Всего комментариев: 7

Jet_Shark
0
Jet_Shark написал: Написано 08 Апреля 2013 в 11:21
Комментарий №7
ФОН НЕ МЕНЯЕТСЯ!

DontST0PMe
0
DontST0PMe написал: Написано 16 Августа 2012 в 00:00
Комментарий №6
А как сделать чтобы фон оставался растянутым через один день?

Black_Sun
0
Black_Sun написал: Написано 24 Июля 2011 в 15:29
Комментарий №5
О, кул мой скрипт и тут.
Значит гуд скрипт сделал smile
Причём сделан он так что будет работать не только на укоз сайте

nikita2003
0
nikita2003 написал: Написано 08 Июня 2011 в 12:12
Комментарий №4
да

DJ_FORWARD
0
DJ_FORWARD написал: Написано 08 Июня 2011 в 12:12
Комментарий №3
штука прикольная ну она мне не пригодится,...

DIMON_-_BEST
0
DIMON_-_BEST написал: Написано 08 Июня 2011 в 09:34
Комментарий №2
ты уверен??? у всех работает, но я не ставил.. я ХЗ=))

nikita2003
0
nikita2003 написал: Написано 08 Июня 2011 в 09:02
Комментарий №1
Чёто фон не меняется sad

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: