jQuery - 更改文本滑塊的位置

那麼，我有這個滑塊至少與parallax content slider一起工作！我希望將圖像放在文字的位置，反之亦然！我來改變它，但只要我傳遞到下一個滑塊，它就會返回到它的初始位置！jQuery - 更改文本滑塊的位置

.da-slide-current .da-img { 
    left: 10%; 
    opacity: 1; 
}

jsfiddle
什麼辦法可以做到這一點？非常感激。

來源

2014-04-16 SpencerX

這是因爲滑塊動畫的位置，而你還沒有在動畫中改變了他們。 –

我如何改變這個動畫的位置？ – SpencerX

您可以用DIV位置發揮：

<html lang="en" class=" js cssanimations csstransitions"><head> 
     <meta charset="UTF-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>Parallax Content Slider with CSS3 and jQuery</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta name="description" content="Parallax Content Slider with CSS3 and jQuery"> 
     <meta name="keywords" content="slider, animations, parallax, delayed, easing, jquery, css3, kendo UI"> 
     <meta name="author" content="Codrops"> 
     <base href="http://tympanus.net/Development/ParallaxContentSlider/" /> 
     <link rel="shortcut icon" href="../favicon.ico"> 
     <link rel="stylesheet" type="text/css" href="css/demo.css"> 
     <link rel="stylesheet" type="text/css" href="css/style.css"> 
     <script type="text/javascript" src="js/modernizr.custom.28468.js"></script> 
     <link href="http://fonts.googleapis.com/css?family=Economica:700,400italic" rel="stylesheet" type="text/css"> 
     <noscript> 
      &lt;link rel="stylesheet" type="text/css" href="css/nojs.css" /&gt; 
     </noscript> 
    </head> 
    <body> 
     <div class="container"> 
      <div id="da-slider" class="da-slider" style="position:relative;"> 
       <div class="da-slide da-slide-current" > 
        <h2 style="position:absolute;top:50%;">Warn WWelcome</h2> 
        <p style="position:absolute;top:25%;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p> 
        <div class="da-img"><img src="images/1.png" alt="image01"></div> 
       </div> 
       <div class="da-slide" > 
        <h2 style="position:absolute;top:50%;">Easy management</h2> 
        <p style="position:absolute;top:25%;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p> 

        <div class="da-img"><img src="images/2.png" alt="image01"></div> 
       </div> 
       <div class="da-slide" > 
        <h2 style="position:absolute;top:50%;">Revolution</h2> 
        <p style="position:absolute;top:25%;">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> 

        <div class="da-img"><img src="images/3.png" alt="image01"></div> 
       </div> 
       <div class="da-slide" > 
        <h2 style="position:absolute;top:50%;">Quality Control</h2> 
        <p style="position:absolute;top:25%;">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p> 

        <div class="da-img"><img src="images/4.png" alt="image01"></div> 
       </div> 
       <nav class="da-arrows"> 
        <span class="da-arrows-prev"></span> 
        <span class="da-arrows-next"></span> 
       </nav> 
      <nav class="da-dots"><span class="da-dots-current"></span><span></span><span></span><span></span></nav></div> 
     </div> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript" src="js/jquery.cslider.js"></script> 
     <script type="text/javascript"> 
      $(function() { 

       $('#da-slider').cslider(); 

      }); 
     </script>  

</body></html>

http://jsfiddle.net/YakV7/36/

來源

2014-04-16 15:13:24 gtryonp

jQuery - 更改文本滑塊的位置

回答

相關問題