HTML/JS设计 - 滑动条

我已经在此基础上的代码，但我不能让它开始工作时，我必须把它转换成文件。 HTML。

我在网络的世界泰华很新design.Thank

2016-04-27 Ander Gonzalez

首先阅读帮助中心[如何提问]（http://stackoverflow.com/help/how-to-ask）和[MCVE]（HTTP ：//stackoverflow.com/help/mcve），然后提出一个正确而具体的问题。我们不提供“让我的工作”服务。 –

你检查这下面的代码，并且还环节的工作拨弄链接在这里，你可以采取代码，使文件。

Fiddle Link

$('.dot:nth-child(1)').click(function() { 
 
    $('.inside').animate({ 
 
    'width': '20%' 
 
    }, 500); 
 
}); 
 
$('.dot:nth-child(2)').click(function() { 
 
    $('.inside').animate({ 
 
    'width': '40%' 
 
    }, 500); 
 
}); 
 
$('.dot:nth-child(3)').click(function() { 
 
    $('.inside').animate({ 
 
    'width': '60%' 
 
    }, 500); 
 
}); 
 
$('.dot:nth-child(4)').click(function() { 
 
    $('.inside').animate({ 
 
    'width': '80%' 
 
    }, 500); 
 
}); 
 
if ($('#switch1').not(':checked')) { 
 
    $('.modal').wrap('<div class="mask"></div>') 
 
    $('.mask').click(function() { 
 
    $(this).fadeOut(300); 
 
    $('.mask article').animate({ 
 
     'top': '-100%' 
 
    }, 300) 
 
    }); 
 

 
    $('.dot').click(function() { 
 
    var modal = $(this).attr('id'); 
 
    $('.mask').has('article.' + modal).fadeIn(300); 
 
    $('.mask article.' + modal).fadeIn(0).animate({ 
 
     'top': '10%' 
 
    }, 300); 
 
    }); 
 
} 
 
$("#switch1").click(function() { 
 
    if ($('#switch1').is(':checked')) { 
 
    $('.modal').unwrap('<div class="mask"></div>'); 
 
    $('.modal').hide(); 
 
    $('.modal').addClass('nobox'); 
 
    $('.dot').click(function() { 
 
     var modal = $(this).attr('id'); 
 
     $('article.nobox').hide() 
 
     $('article.nobox.' + modal).fadeIn(200) 
 
    }); 
 
    } else { 
 
    $('article').removeClass("nobox"); 
 
    $('.modal').wrap('<div class="mask"></div>') 
 
    $('.mask').click(function() { 
 
     $(this).fadeOut(300); 
 
     $('.mask article').animate({ 
 
     'top': '-100%' 
 
     }, 300) 
 
    }); 
 

 
    $('.dot').click(function() { 
 
     var modal = $(this).attr('id'); 
 
     $('.mask').has('article.' + modal).fadeIn(300); 
 
     $('.mask article.' + modal).fadeIn(0).animate({ 
 
     'top': '10%' 
 
     }, 300); 
 
    }); 
 
    } 
 
})

body { 
 
    font-family: arial, sans-serif; 
 
} 
 

 
.checkcaption { 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 

 
.check { 
 
    width: 60px; 
 
    height: 30px; 
 
    border: #222 solid 2px; 
 
    position: relative; 
 
    margin: 10px auto; 
 
    border-radius: 15px; 
 
} 
 
.check input { 
 
    visibility: hidden; 
 
    height: 30px; 
 
    width: 60px; 
 
} 
 
.check label { 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background-color: #e74c3c; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 18%; 
 
    left: 12%; 
 
    -webkit-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
} 
 
.check input:checked + label { 
 
    left: 55%; 
 
    background-color: #7b3; 
 
} 
 

 
div#timeline { 
 
    background-color: #6ab0de; 
 
    margin-top: 150px; 
 
    height: 10px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
div#timeline .inside { 
 
    position: absolute; 
 
    height: 4px; 
 
    background-color: #fff; 
 
    width: 0%; 
 
    top: 3px; 
 
    left: 0; 
 
} 
 
div#timeline .dot { 
 
    z-index: 99; 
 
    -webkit-transition: 0.3s ease-in-out; 
 
    transition: 0.3s ease-in-out; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: -15px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
div#timeline .dot:nth-child(1) { 
 
    left: 20%; 
 
    background-color: #2c3e50; 
 
} 
 
div#timeline .dot:nth-child(2) { 
 
    left: 40%; 
 
    background-color: #e74c3c; 
 
} 
 
div#timeline .dot:nth-child(3) { 
 
    left: 60%; 
 
    background-color: #7b3; 
 
} 
 
div#timeline .dot:nth-child(4) { 
 
    left: 80%; 
 
    background-color: #20638f; 
 
} 
 
div#timeline .dot:hover { 
 
    -webkit-transform: scale(1.2); 
 
      transform: scale(1.2); 
 
} 
 
div#timeline .dot date { 
 
    font-family: roboto; 
 
    font-size: 1.1rem; 
 
    display: block; 
 
    position: relative; 
 
    top: -60px; 
 
    text-align: center; 
 
} 
 
div#timeline .dot span { 
 
    display: inline-block; 
 
    margin-top: 10px; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: #fff; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
 
} 
 

 
article { 
 
    display: none; 
 
    position: relative; 
 
    top: 30px; 
 
    max-width: 960px; 
 
    background-color: #fff; 
 
    padding: 20px; 
 
    margin: auto; 
 
} 
 
article date { 
 
    display: block; 
 
    text-align: right; 
 
} 
 
article h2 { 
 
    font-family: merriweather, sans-serif; 
 
    font-size: 5rem; 
 
    padding: 10px 0; 
 
    border-bottom: solid #111 2px; 
 
    margin-bottom: 20px; 
 
} 
 
article p { 
 
    line-height: 130%; 
 
} 
 

 
div.mask { 
 
    display: none; 
 
    left: 0; 
 
    top: 0; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    z-index: 99999; 
 
} 
 
div.mask article { 
 
    position: relative; 
 
    top: -100%; 
 
    margin-top: 50px; 
 
    max-width: 960px; 
 
    background-color: #fff; 
 
    padding: 20px; 
 
    margin: auto; 
 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); 
 
} 
 
div.mask article date { 
 
    display: block; 
 
    text-align: right; 
 
} 
 
div.mask article h2 { 
 
    font-family: merriweather, sans-serif; 
 
    font-size: 5rem; 
 
    padding: 10px 0; 
 
    border-bottom: solid #111 2px; 
 
    margin-bottom: 20px; 
 
} 
 
div.mask article p { 
 
    line-height: 130%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<p class="checkcaption">no modal boxes?</p> 
 
<div class="check"> 
 
\t <input type="checkbox" id="switch1" name="switch1" class="switch" /> 
 
\t <label for="switch1"></label> 
 
</div> 
 

 
<div id="timeline"> 
 
\t <div class="dot" id="one"> 
 
\t \t <span></span> 
 
\t \t <date>1280</date> 
 
\t </div> 
 
    <div class="dot" id="two"> 
 
\t \t <span></span> 
 
\t \t <date>1649</date> 
 
\t </div> 
 
    <div class="dot" id="three"> 
 
\t \t <span></span> 
 
\t \t <date>1831</date> 
 
\t </div> 
 
    <div class="dot" id="four"> 
 
\t \t <span></span> 
 
\t \t <date>1992</date> 
 
\t </div> 
 
    <div class="inside"></div> 
 
</div> 
 

 
<!-- Modals --> 
 

 
<article class='modal one'> 
 
    <date>26/06 - 1280</date> 
 
    <h2>Yo les gars</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet, corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic at, fugiat eos eveniet.</p> 
 
</article> 
 

 
<article class='modal two'> 
 
    <date>08/09 - 1649</date> 
 
    <h2>Salut les louzeurs</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet, corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic at, fugiat eos eveniet.</p> 
 
</article> 
 

 
<article class='modal three'> 
 
    <date>21/07 - 1831</date> 
 
    <h2>Eat 'em all !</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet, corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic at, fugiat eos eveniet.</p> 
 
</article> 
 

 
<article class='modal four'> 
 
    <date>03/02 - 1992</date> 
 
    <h2>Mais pourquoi?</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet, corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic at, fugiat eos eveniet.</p> 
 
</article>

来源

2016-04-27 11:19:13

HTML/JS设计 - 滑动条

回答

相关问题