Эффекты на основе Java Script

Дискретное изменение горизонтальных размеров центрального(информационного) блока

Например здесь может быть блок с меню и другой вспомогательной информацией.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Здесь может быть второй блок со вспомогательной информацией.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet
Здесь основной блок. Для удобства или какой либо другой необходимости(например, если ширина Вашей странички шире экрана и восприятие информации не очень удобно, или страничка вообще имеет горизонтальное строение и т.д.) Вы можете изменять ширину центрального блока. Вы можете задать 3-и(в данном случае, но впринцепе сколько нужно) фиксированные варианта ширины этого блока. В примере представлен вариант 3-х блочной(вертикальной) организации странички. Если Вам нужен 2-х блочный вариант странички, то Вы можете задать 0-й размер ненужного блока и получите 2-х блочный.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait facilisi.

<Вернуться в каталог>

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/926/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_780").click(function () {
  $("div.controls a").removeClass("select");
  $(this).addClass("select");                         // минимальная ширина
  $("div.wrapper").animate({width: '60%'}, 'slow', function() {;
  });
});

$("a.switch_980").click(function () {
  $("div.controls a").removeClass("select"); 
  $(this).addClass("select");                         // средняя ширина
  $("div.wrapper").animate({width: '85%'}, 'slow', function() {;	 
  });
});

$("a.switch_fluid").click(function () {
  $("div.controls a").removeClass("select");
  $(this).addClass("select");                        // мах. ширина
  $("div.wrapper").animate({width: '100%'}, 'slow', function() {;
  });
});

});
</script>
<style>
/* начальный размер */
.wrapper { width:980px;	margin:0 auto; }
/* стиль левого блока */
.leftcolm {	float:left;	width:150px; background-color:#333; padding:10px; color: #fff; border: 1px solid #ffff00;}
/* стиль правого блока */
.rightcolm { float:right; width:150px; background-color:#333; padding:10px; color: #fff; border: 1px solid #ffff00;}
/* стиль центрального блока */
.midcont { padding:10px; margin-left:180px; margin-right:180px; background-color:#CCCCCC; color: #000; border: 1px solid #ff0000;}
/* всё что относится к кнопкам управления */ 
.controls { width:100px; float:right; margin:10px; }
.controls ul, .controls li { margin:0px; padding:0px; list-style:none; display:inline }
.controls li a:link, .controls li a:visited { float:right; display:block; height:15px; width:15px; text-indent:-9999px; overflow:hidden; 	margin-left:10px; }
.controls li a.select{border:solid 1px #ff0000; width:14px; height:14px;}
.controls li a.switch_780 { background-image:url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/926/images/icon_780.jpg); }
.controls li a.switch_980 { background-image:url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/926/images/icon_980.jpg); }
.controls li a.switch_fluid { background-image:url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/926/images/icon_fluid.jpg); }
</style>

Всё подписано, проблем быть не должно.

Внутри тега <BODY> - </BODY> там где у Вас будут блоки.

<div class="wrapper">
  <div class="controls">
    <ul>
      <li><a href="#" class="switch_fluid">100%</a></li>
      <li><a href="#" class="switch_980">85%</a></li>
      <li><a href="#" class="switch_780">60%</a></li>
    </ul>
  </div>
  <br style="clear:both" />
  <div class="leftcolm">  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
  <div class="rightcolm">  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>
  <div class="midcont">
    <font style="font-size: 24px; font-weight: bold;">Lorem ipsum dolor sit amet</font><br>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait facilisi.</div>
</div>

Здесь тоже всё должно быть понятно. Если данный скрипт Вам полезен, задайте нужную Вам информацию в нужные блоки и используйте. Как видно, вся другая информация расположенная на страничке, остаётся неизменной.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.