Skip to content

Instantly share code, notes, and snippets.

Last active January 28, 2016 07:11
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save shimizu/cdcd6a1dcd304c2318fd to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
.wrapper {
width: 100%;
height: 100%;
.img-box {
margin: 0 auto;
position: relative;
width: 800px;
height: 500px;
background-color: grey;
.img-panel {
position: absolute;
left: 0px;
width: 100%;
height: 100%;
.img-slider {
color: white;
text-align: center;
position: absolute;
width: 100px;
height: 50px;
border:4px solid black;
background-color: black;
z-index: 9999;
#slider1 {
left: -50px;
#slider2 {
left: -50px;
#slider3 {
left: -50px;
#slider4 {
left: -50px;
#slider5 {
left: -50px;
<div class="wrapper">
<div class="img-box">
<div id="img5" class="img-panel" style="background-color:gray; "></div>
<div id="slider5" class="img-slider" data-panel="img5" style="background-color: gray; ">gray</div>
<div id="img4" class="img-panel" style="background-color:orange; "></div>
<div id="slider4" class="img-slider drag" data-panel="img4" style="background-color: orange; ">orange</div>
<div id="img3" class="img-panel" style="background-color:green;"></div>
<div id="slider3" class="img-slider drag" data-panel="img3" style="background-color: green; ">green</div>
<div id="img2" class="img-panel" style="background-color: red; "></div>
<div id="slider2" class="img-slider drag" data-panel="img2" style="background-color: red; ">red</div>
<div id="img1" class="img-panel" style="background-color: blue; "></div>
<div id="slider1" class="img-slider drag" data-panel="img1" style="background-color: blue; ">blue</div>
<script src="//"></script>
var boxWidth = document.querySelector(".img-box").clientWidth;
var boxHeight = document.querySelector(".img-box").clientHeight;
var slideWidth = document.querySelector(".img-slider").clientWidth;
var hsw = slideWidth/2;
var xScale = d3.scale.linear().domain([-hsw, boxWidth-hsw]).range([-hsw, boxWidth-hsw]).clamp(true)
var drag = d3.behavior.drag()
.on("drag", dragFn)
function dragFn(d,i ) {
var x = + d3.event.dx;"left", xScale(x) + "px")
var target_id =
clip(target_id, x+hsw);
function clip(id, clipX) {
console.log(id)"#"+id).node().style.clip = 'rect(' + [0, boxWidth , boxHeight, clipX].join('px,') + 'px)';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment