Background Image

Скрипт выбора <body> изображения с запоминанием cookie

Script

by — Category Script on

При помощи скрипта можно изменить фоновое изображение странички и всего сайта на один из представленных (всего 9). ри переходе на другую страничку цвет фона НЕ возвращается в исходное состояние благодаря сохранению выбранного фона в cookies.

 CSS

.panel { 
 background: rgba(255,255,255,0.22);
 border-radius: 0 3px 3px 0;
 position: fixed;
 height:205px;
 width: 200px;
 z-index: 15;
 left:-250px;
 top:20%;
 } 
.open a{
 right: 250px!important;
 }
 .sp {padding:10px} 
 .s-top {
 margin: 0;
 color: #fff;
 padding:0;
 font-size:13px;
 float: right;
 height: 20px;
 }
.handle {
 background:url(http://www.mggp.ru/1134/rightarrow.png) no-repeat;
 background-position:left center!important;
 border-radius: 0 3px 3px 0;
 background-size:25px;
 cursor: pointer;
 margin-left:0px;
 margin-top:70%;
 height: 35px;
 width: 35px;
 }
.img_panel {
float:left;
cursor:pointer;
margin: 0px 5px 5px 5px;
width:50px;
height:50px;
}
.img_panel:hover {
 box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.72);
}

Разметка

<div class="panel" id="panel">
 <div class="sp"> 
 <a class="handle" href=""></a>
 <div class="s-top">
 <div class="s-title">Ваш персональный фон [<a style="color: #0a8fcc;text-decoration:none;cursor:pointer;" href="http://www.mggp.ru/terms_of_use#cookie" title="." ><b>?</b></a>]</div>
 </div>
 <img class="img_panel" onclick="plat1()" alt="Фон №1" src="http://www.mggp.ru/background/918313059.jpg" /> 
 <img class="img_panel" onclick="plat2()" alt="Фон №2" src="http://www.mggp.ru/background/wallpaper.jpg" /> 
 <img class="img_panel" onclick="plat3()" alt="Фон №3" src="http://www.mggp.ru/background/background.png" /> 
 <img class="img_panel" onclick="plat4()" alt="Фон №4" src="http://www.mggp.ru/background/6000x3711.jpg" /> 
 <img class="img_panel" onclick="plat5()" alt="Фон №5" src="http://www.mggp.ru/background/Powerpoint-Templates.jpg" /> 
 <img class="img_panel" onclick="plat6()" alt="Фон №6" src="http://www.mggp.ru/background/cd-background-1.jpg" /> 
 <img class="img_panel" onclick="plat7()" alt="Фон №7" src="http://www.mggp.ru/background/par1.png" /> 
 <img class="img_panel" onclick="plat8()" alt="Фон №8" src="http://www.mggp.ru/background/autumn-vector.jpg" /> 
 <img class="img_panel" onclick="plat9()" alt="Фон №9" src="http://www.mggp.ru/background/minecraft-Background.jpg" /> 
 </div>
</div>

Подключаем JS

<script type="text/javascript">
(function($){
 $.fn.tabSlideOut = function(callerSettings) {
 var settings = $.extend({
 tabHandle: '.handle',
 speed: 300, 
 action: 'click',
 tabLocation: 'left',
 topPos: '38%',
 leftPos: '20px',
 fixedPosition: false,
 positioning: 'absolute',
 display: 'block', 
 }, callerSettings||{});

 settings.tabHandle = $(settings.tabHandle);
 var obj = this;
 if (settings.fixedPosition === true) {
 settings.positioning = 'fixed';
 } else {
 settings.positioning = 'absolute';
 }
 
 //ie6 doesn't do well with the fixed option
 if (document.all && !window.opera && !window.XMLHttpRequest) {
 settings.positioning = 'absolute';
 }
 
 //set initial tabHandle css
 settings.tabHandle.css({ 
 'display': 'block',
 'width' : settings.imageWidth,
 'height': settings.imageHeight,
 'textIndent' : '-99999px',
 'outline' : 'none',
 'position' : 'absolute'
 });
 
 obj.css({
 'line-height' : '1',
 'position' : settings.positioning
 });

 
 var properties = {
 containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
 containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
 tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
 tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
 };

 //set calculated css
 if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
 obj.css({'left' : settings.leftPos});
 settings.tabHandle.css({'right' : 0});
 }
 
 if(settings.tabLocation === 'top') {
 obj.css({'top' : '-' + properties.containerHeight});
 settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
 }

 if(settings.tabLocation === 'bottom') {
 obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
 settings.tabHandle.css({'top' : '-' + properties.tabHeight});
 
 }
 
 if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
 obj.css({
 'height' : properties.containerHeight,
 'top' : settings.topPos
 });
 
 settings.tabHandle.css({'top' : 0});
 }
 
 if(settings.tabLocation === 'left') {
 obj.css({ 'left': '-' + properties.containerWidth});
 settings.tabHandle.css({'right' : '-' + properties.tabWidth});
 }

 if(settings.tabLocation === 'right') {
 obj.css({ 'right': '-' + properties.containerWidth});
 settings.tabHandle.css({'left' : '-' + properties.tabWidth});
 
 $('html').css('overflow-x', 'hidden');
 }

 //functions for animation events
 
 settings.tabHandle.click(function(event){
 event.preventDefault();
 });
 
 var slideIn = function() {
 
 if (settings.tabLocation === 'top') {
 obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
 } else if (settings.tabLocation === 'left') {
 obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
 } else if (settings.tabLocation === 'right') {
 obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
 } else if (settings.tabLocation === 'bottom') {
 obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
 } 
 
 };
 
 var slideOut = function() {
 
 if (settings.tabLocation == 'top') {
 obj.animate({top:'-3px'}, settings.speed).addClass('open');
 } else if (settings.tabLocation == 'left') {
 obj.animate({left:'-3px'}, settings.speed).addClass('open');
 } else if (settings.tabLocation == 'right') {
 obj.animate({right:'-3px'}, settings.speed).addClass('open');
 } else if (settings.tabLocation == 'bottom') {
 obj.animate({bottom:'-3px'}, settings.speed).addClass('open');
 }
 };

 var clickScreenToClose = function() {
 obj.click(function(event){
 event.stopPropagation();
 });
 
 $(document).click(function(){
 slideIn();
 });
 };
 
 var clickAction = function(){
 settings.tabHandle.click(function(event){
 if (obj.hasClass('open')) {
 slideIn();
 } else {
 slideOut();
 }
 });
 
 clickScreenToClose();
 };
 
 var hoverAction = function(){
 obj.hover(
 function(){
 slideOut();
 },
 
 function(){
 slideIn();
 });
 
 settings.tabHandle.click(function(event){
 if (obj.hasClass('open')) {
 slideIn();
 }
 });
 clickScreenToClose();
 
 };
 
 //choose which type of action to bind
 if (settings.action === 'click') {
 clickAction();
 }
 
 if (settings.action === 'hover') {
 hoverAction();
 }
 };
})(jQuery);
</script>

И последний этап запоминания cookie с помощью JS

<script type="text/javascript">
function setCookie(name, value, days) {
 if (days) {
 var date = new Date();
 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
 var expires = "; expires=" + date.toGMTString();
 }
 else var expires = "";
 document.cookie = name + "=" + value + expires + "; path=/";
 }
 function getCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
 }
 return null;
 }
 function eraseCookie(name) {
 setCookie(name, "", -1);
 };
 function okno(){ 
 _uWnd.alert($("#okno1").html(),'Смена фона',{name:'24a', align:'left', w:415, h:395, tm:400000, icon:'http://s5.ucoz.net/img/icon/tip.png'}) 
 }; 
 function plat1(){ 
 setCookie('platbg1','1','365'); eraseCookie('platbg2');eraseCookie('platbg3');eraseCookie('platbg4');eraseCookie('platbg5');eraseCookie('platbg6'); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9'); 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/918313059.jpg")'); 
 }; 
 function plat2(){ 
 setCookie('platbg2','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9'); 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/wallpaper.jpg")'); 
 }; 
 function plat3(){ 
 setCookie('platbg3','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg2' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9'); 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/background.png")'); 
 }; 
 function plat4(){ 
 setCookie('platbg4','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg2' );eraseCookie( 'platbg3' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9'); 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/6000x3711.jpg")'); 
 }; 
 function plat5(){ 
 setCookie('platbg5','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg2' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9'); 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/Powerpoint-Templates.jpg")'); 
 }; 
 function plat6(){ 
 setCookie('platbg6','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg2' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9'); 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/cd-background-1.jpg")'); 
 }; 
 function plat7(){ 
 setCookie('platbg7','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg2'); eraseCookie('platbg8'); eraseCookie('platbg9'); 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/par1.png")'); 
 }; 
 function plat8(){ 
 setCookie('platbg8','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg2'); eraseCookie('platbg7'); eraseCookie('platbg9'); 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/autumn-vector.jpg")'); 
 }; 
 function plat9(){ 
 setCookie('platbg9','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg2'); 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/minecraft-Background.jpg")'); 
 }; 
 if(getCookie('platbg1')) { 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/918313059.jpg")'); 
 }; 
 if(getCookie( 'platbg2' )) { 
 $('body,.cd-projects .preview-image').css('background-image', 'url("http://www.mggp.ru/background/wallpaper.jpg")'); 
 }; 
 if(getCookie( 'platbg3' )) { 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/background.png")'); 
 }; 
 if(getCookie( 'platbg4' )) { 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/6000x3711.jpg")'); 
 }; 
 if(getCookie( 'platbg5' )) { 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/Powerpoint-Templates.jpg")'); 
 }; 
 if(getCookie( 'platbg6' )) { 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/cd-background-1.jpg")'); 
 }; 
 if(getCookie( 'platbg7' )) { 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/par1.png")'); 
 }; 
 if(getCookie( 'platbg8' )) { 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/autumn-vector.jpg")'); 
 }; 
 if(getCookie( 'platbg9' )) { 
 $('body,.preview-image').css('background-image', 'url("http://www.mggp.ru/background/minecraft-Background.jpg")'); 
 }; 
 $(function(){
 $('.panel').tabSlideOut({ 
 tabHandle: '.handle',
 tabLocation: 'left', 
 speed: 300, 
 action: 'click', 
 topPos: '7%', 
 fixedPosition: false 
 });
 });
</script> 

Готово! 


Понравился материал?
Поделитесь с друзьями
С этим материалом смотрят: Похожие материалы не найдены
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu