Всем доброго дня. Задумка следующая: есть 2 блока с бэграундами и блок, назовем его ресайз. Нужно чтобы мышкой можно было регулировать ширину и при этом ширина одного блока увеличивалась, а другого уменьшалась.
Вот примерно то что хочу сделать
двигая ползунок можно просматривать то одно изображение целиком, то другое.
Нашел в нэте скрипт подобного, но что то у меня он не совсем правильно работает.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
/*Section-9*******************************/
div.sec-9 {
margin: 0 auto;
width: 90%;
height: 757px;
position: relative;
background: #fff;
padding-top: 50px;
}
.sec-9 h1 {
position: relative;
text-align: center;
font-size: 45px;
color: #fff;
font-weight: 700;
z-index: 100;
}
.sec-9 h2 {
position: relative;
text-align: center;
font-size: 20px;
color: #fff;
z-index: 100;
}
.sec-9-good-roof h3 {
margin: 0;
font-size: 45px;
color: #fff;
font-weight: 700;
line-height: 757px;
text-align: center;
}
.sec-9-bad-roof h3 {
margin: 0;
font-size: 45px;
color: #fff;
font-weight: 700;
line-height: 757px;
text-align: center;
}
.sec-9-good-roof {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 757px;
background: url(img/sec-9-img-2.jpg) no-repeat;
background-position: right center;
}
.sec-9-good-roof div {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 757px;
}
.sec-9-bad-roof {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 757px;
background: url(img/sec-9-img-1.jpg) no-repeat;
background-position: left center;
}
.sec-9-ukaz {
position: absolute;
top: 0;
left: 50%;
width: 61px;
height: 757px;
margin-left: -30.5px;
background: url(img/sec-9-ukaz.png) no-repeat;
background-position:center;
}
.sec-9-ukaz:hover {
cursor: pointer;
}
.sec-9-roof-wid {
width: 70%;
}
.sec-9-ukaz-wid {
left: 70%;
}
.sec-9-anim {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}
</style>
</head>
<body>
<div class="sec-9 doit" id="foto">
<h1>Результат на лицо</h1>
<h2>Мы успешно завершили десятки проектов<br>по монтажу кровли</h2>
<div class="sec-9-good-roof" id="block">
<div>
<h3>После</h3>
</div>
</div>
<div class="sec-9-bad-roof" style="width: 770px;">
<h3>До</h3>
</div>
<div class="sec-9-ukaz" id="block_resize" style="left: 770px;"></div>
</div>
<script type="text/javascript">
var ie = 0;
var op = 0;
var ff = 0;
var block; // Основной блок
var block_r; // Блок для изменения размеров
var delta_w = 0; // Изменение по ширине
var delta_h = 0; // Изменение по высоте
/* После загрузки страницы */
onload = function () {
/* Определяем браузер */
var browser = navigator.userAgent;
if (browser.indexOf("Opera") != -1) op = 1;
else {
if (browser.indexOf("MSIE") != -1) ie = 1;
else {
if (browser.indexOf("Firefox") != -1) ff = 1;
}
}
block = document.getElementById("block"); // Получаем основной блок
block_r = document.getElementById("block_resize"); // Получаем блок для изменения размеров
document.onmouseup = clearXY; // Ставим обработку на отпускание кнопки мыши
block_r.onmousedown = saveWH; // Ставим обработку на нажатие кнопки мыши
}
/* Функция для получения текущих координат курсора мыши */
function getXY(obj_event) {
if (obj_event) {
x = obj_event.pageX;
y = obj_event.pageY;
}
else {
x = window.event.clientX;
y = window.event.clientY;
if (ie) {
y -= 2;
x -= 2;
}
}
return new Array(x, y);
}
function saveWH(obj_event) {
var point = getXY(obj_event);
w_block = block.clientWidth; // Текущая ширина блока
h_block = block.clientHeight; // Текущая высота блока
delta_w = w_block - point[0]; // Измеряем текущую разницу между шириной и x-координатой мыши
delta_h = h_block - point[1]; // Измеряем текущую разницу между высотой и y-координатой мыши
/* Ставим обработку движения мыши для разных браузеров */
document.onmousemove = resizeBlock;
if (op || ff) document.addEventListener("onmousemove", resizeBlock, false);
return false; // Отключаем стандартную обработку нажатия мыши
}
/* Функция для измерения ширины окна */
function clientWidth() {
return document.documentElement.clientWidth == 0 ? document.body.clientWidth : document.documentElement.clientWidth;
}
/* Функция для измерения высоты окна */
function clientHeight() {
return document.documentElement.clientHeight == 0 ? document.body.clientHeight : document.documentElement.clientHeight;
}
/* При отпускании кнопки мыши отключаем обработку движения курсора мыши */
function clearXY() {
document.onmousemove = null;
}
function resizeBlock(obj_event) {
var point = getXY(obj_event);
new_w = delta_w + point[0]; // Изменяем новое приращение по ширине
block.style.width = new_w + "px"; // Устанавливаем новую ширину блока
block.style.height = new_h + "px"; // Устанавливаем новую высоту блока
/* Если блок выходит за пределы экрана, то устанавливаем максимальные значения для ширины и высоты */
if (block.offsetLeft + block.clientWidth > clientWidth()) block.style.width = (clientWidth() - block.offsetLeft) + "px";
if (block.offsetTop + block.clientHeight > clientHeight()) block.style.height = (clientHeight() - block.offsetTop) + "px";
}
</script>
</body>
</html>
Подскажите что я делаю не так?
