javascript - उत्तरदायी क्षैतिज पृष्ठ फिसलने




jquery html (2)

"जैसा कि आप स्केल करते हैं, उसे पृष्ठ पर छड़ी करने की आवश्यकता है और दूसरों को प्रकट नहीं करना"

इसे प्राप्त करने के लिए, वर्तमान पृष्ठ तत्व के संदर्भ को रखें और फिर कोई विलंब स्क्रॉल करें इस तत्व के लिए जब विंडो का आकार बदल दिया जाता है:

var currentPage; //here is where we will hold the reference
jQuery('a.scrollitem').click(function () {
    var targetPage = $(jQuery(this).attr('href'));
    jQuery('a.scrollitem').removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery('.toggle').css({'display':'none'});
    jQuery('.wrapper').scrollTo(targetPage, 1200, function(){
        jQuery('.toggle').css({'display':'block'});
    });
    currentPage = targetPage; //here is where we set the reference
    return false;
});

//and here we do a no-delay scrollTo
$(window).resize(function(){
    if(!!currentPage){
        console.log('window resized.  scrolling to: ', currentPage.attr('id'));
        jQuery('.wrapper').scrollTo(currentPage);
    }
});

यह मेरी राय में, यह बहुत संवेदनशील बना देता है

पृष्ठों को आखिरी समय में अंतर के बिना, लंबे (800px) और अभी भी स्क्रॉल होने में सक्षम होना चाहिए।

उस अंतराल से छुटकारा पाने के लिए, मैं सिर्फ सभी page थोड़ी देर के लिए बनाने की अपेक्षा करता हूं। स्क्रॉलिंग से इस पर कोई प्रभाव नहीं पड़ता क्योंकि पेज छोड़ दिया गया है- बाएं के साथ उचित left:0; । मुझे संदेह है कि अन्य पृष्ठों का एक ही अंतर था और यह कि उन पृष्ठों पर अंतराल स्क्रॉल बार द्वारा कवर किया गया था।

.page {
    width: 110%;
}

न्यूनतम 9 पर काम करने की आवश्यकता है I 9

मुझे डर है कि मैं इस संबंध में मदद नहीं कर सकता हूं; मेरे पास केवल आईई 11 स्थापित है लेकिन हे, यह IE11 में महान काम करता है

कार्य बेला

मैं क्षैतिज उत्तरदायी पृष्ठ नेविगेशन बनाना चाहता हूं जैसा कि नीचे की छवि से दिखाया गया है:

यह वही है जो मैंने किया है: डेमो

$(document).ready(function () {
    var slideNum = $('.page').length,
        wrapperWidth = 100 * slideNum,
        slideWidth = 100/slideNum;
    $('.wrapper').width(wrapperWidth + '%'); 
    $('.page').width(slideWidth + '%');
    
    $('a.scrollitem').click(function(){
        $('a.scrollitem').removeClass('selected');
        $(this).addClass('selected');
        
        var slideNumber = $($(this).attr('href')).index('.page'),
            margin = slideNumber * -100 + '%';
    
        $('.wrapper').animate({marginLeft: margin},1000);
        return false;
    });
});
html, body {
    height: 100%;
    margin: 0;
    overflow-x:hidden;
    position:relative;
}
nav{
    position:absolute;
    top:0; left:0;
    height:30px;
}
.wrapper {
    height: 100%;
    background: #263729;
}
.page {
    float:left;
    background: #992213;
    min-height: 100%;
    padding-top: 30px;
}
#page-1 {
    background: #0C717A;
}
#page-2 {
    background: #009900;
}
#page-3 {
    background: #0000FF;
}
a {
    color:#FFF;
}
a.selected{
    color: red;
}


.simulate{
    height:2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
    <nav>
        <a href="#page-1" class="scrollitem selected">page 1</a>
         <a href="#page-2" class="scrollitem">page 2</a>
         <a href="#page-3" class="scrollitem">page 3</a>
    </nav>
    <div id="page-1" class="page"> 
         <h3>page 1</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
    <div id="page-2" class="page">  
         <h3>page 2</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
    <div id="page-3" class="page"> 
        <h3>page 3</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
</div>

हालांकि मैंने कुछ ईंट की दीवारों को मारा है, क्योंकि मेरा किसी निश्चित डिग्री के लिए उत्तरदायी है, जैसे ही आप पैमाने पर जाते हैं, उसे पृष्ठ पर चिपकाकर दूसरों को प्रकट नहीं करना पड़ता है

साथ ही यदि पेज लंबे होते हैं तो यह एक स्क्रॉल बार दिखाता है जो सही है, लेकिन पिछली स्लाइड पर स्क्रॉल-बार के रूप में व्यापक अंतर है।

मेरी निम्नलिखित ज़रूरतें हैं:

  1. उत्तरदायी होना चाहिए
  2. पृष्ठों को आखिरी समय में अंतर के बिना, लंबे (800px) और अभी भी स्क्रॉल होने में सक्षम होना चाहिए।
  3. न्यूनतम 9 पर काम करने की जरूरत है I 9

क्षैतिज पृष्ठ स्लाइडिंग

बाएं मार्जिन एनीमेशन के साथ

यह jQuery स्निपेट:

  1. स्लाइड्स की संख्या की गणना करता है और उसके अनुसार आवरण की चौड़ाई निर्धारित करता है।
  2. किस लिंक के अनुसार क्लिक किया जाता है, left-margin को एक चिकनी संक्रमण के साथ इसी स्लाइड दिखाने के लिए आवरण पर एनिमेटेड किया गया है
  3. सक्रिय लिंक हाइलाइटिंग के लिए क्लिक किए गए लिंक के वर्ग को टॉगल करता है

ध्यान दें कि यह समाधान:

  1. मार्कअप को कम करने और सामग्री पुनरावृत्ति को रोकने के लिए केवल एक मेनू ईवेंट का उपयोग करता है।
  2. केवल jQuery लाइब्रेरी की आवश्यकता है
  3. स्लाइड की एक गतिशील संख्या के लिए काम करता है

$(document).ready(function() {
  var slideNum = $('.page').length,
    wrapperWidth = 100 * slideNum,
    slideWidth = 100 / slideNum;
  $('.wrapper').width(wrapperWidth + '%');
  $('.page').width(slideWidth + '%');

  $('a.scrollitem').click(function() {
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    var slideNumber = $($(this).attr('href')).index('.page'),
      margin = slideNumber * -100 + '%';

    $('.wrapper').animate({
      marginLeft: margin
    }, 1000);
    return false;
  });
});
html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
}

.wrapper {
  height: 100%;
  background: #263729;
}

.page {
  float: left;
  background: #992213;
  min-height: 100%;
  padding-top: 30px;
}

#page-1 {
  background: #0C717A;
}

#page-2 {
  background: #009900;
}

#page-3 {
  background: #0000FF;
}

a {
  color: #FFF;
}

a.selected {
  color: red;
}

.simulate {
  height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <nav>
    <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>
  </nav>
  <div id="page-1" class="page">
    <h3>page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3>page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3>page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div>





responsive-design