JS, как это сделать?

Question

[Niriter Inc.]

нужно сделать такое:

При этом нужно что-бы при передвижении этой границы менялось изображение, вообщем где-то уже это видел но не могу кинуть ссылку где это есть.
Скиньте библиотеку какую на js, или css хотя насчет последнего я думаю это не реально.
Спасибо.

Comments

[Kovalsky]

"что-бы при передвижении этой границы менялось изображение" - банально два блока с разными фоновыми картинками, при драге - ресайз

[Ди Ма]

Никита Полевой: Использовать магию вне хогвартса - запрещено!

Answer 1

[Сергей Соколов]

Недавно был аналогичный вопрос Как сделать на сайте 2 изображения, перекрывающие друг друга через js?
я предложил 5 вариантов:

1. TwentyTwenty
   
2. Juxtapose
   
3. imgSlider
   
4. Cocoen
   
5. Image Comparison Slider
   

Answer 2

[Андрей]

www.catchmyfame.com/2009/06/25/jquery-beforeafter-...

zurb.com/playground/twentytwenty

Answer 3

[Онотолий]

На обычном jquery можно сделать.

Comments

[Niriter Inc.]

1-х ты читал читал что там написано?, "Скиньте библиотеку какую-то на js", 2-х скинь набросок что-бы я глянул как ты сделаешь на jquery

[Онотолий]

Niriter Inc.: Да ты прав, я немного невнимательно прочел. И еще я погорячися, можно обойтись на чистом js без jquery
Это элементарно как все гениальное.

[Онотолий]

Niriter Inc.: Ладно щас кину код, допью чай только

[Онотолий]

Niriter Inc.:

<style>
div.pic1{
width:1000px; /* -- ширина div с картинкой, заменишь на свое */
height:600px; 
background:url(/img/адрес_картинки_#1.jpg);
border:1px solid;
}
div.pic2{
position:relative; 
height:600px; 
background:url(/img/адрес_картинки_#2.jpg);
border-right:1px solid;
}
div.sl{position:absolute; top:50%; right:-25px; width:50px; background:black; color:#ff93ff;}
</style>

<script>
document.getElementById('sl').onmousemove = function(event){
var wPic=1000; // ширина div с картинкой, заменишь на свое 
var _left = window.innerWidth > wPic ? (event.clientX-((window.innerWidth-wPic)/2)) : event.clientX;
if(event.which==1){
if(_left <= wPic){
document.getElementById('pic2').style.width=_left+'px';
}}
};
</script>

<center>
<div id="pic1" class="pic1">
<div id="pic2" style="width:500px" class="pic2">
<div align="center" id="sl" class="sl">&lt; | &gt;</div>
</div>
</div>
</center>

jsbin.com/wazitawozo/1/edit?html,output

Чорд, да я же ГЕНИЙ!

[Онотолий]

Ах, забыл добавить align="left" для самого первого div