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設計 - 滑動條

回答

相關問題