मैं हेडर बैनर के साथ क्षैतिज लेआउट स्लाइडिंग लागू करने की कोशिश कर रहा हूं।क्षैतिज उत्तरदायी लेआउट और माउसहेल इनपुट स्लाइडिंग
<body>
<div id="header">
<div><a href="#one"> one </a></div>
<div><a href="#two"> two </a></div>
<div><a href="#thr"> thr </a></div>
</div>
<div id="one" class="panel"> </div>
<div id="two" class="panel"> </div>
<div id="thr" class="panel"> </div>
</body>
हैडर तय हो गई है, और पैनलों एक ढाल पृष्ठभूमि (मध्य पैनल डिबग प्रयोजन के लिए एक अलग रंग है) के साथ प्रदान किया गया है:
इस HTML संरचना है।
body {
width: 6000px;
overflow: hidden;
}
.panel {
width: 33.3%;
float: left;
padding-left: 30px;
padding-right: 1040px;
margin-top: -75px;
height: 960px;
background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
}
#header {
position: fixed;
height: 75px;
margin-top: 25px;
}
#two{
background-image: linear-gradient(to bottom, #0B8800, #9E5EFF);
}
और अंत में समारोह जो पैनल के बीच एनीमेशन का प्रबंधन करता है:
$(document).ready(function() {
$("#header a").bind("click", function(event) {
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
समस्याओं का सामना करना पड़ रहा हूँ निम्नलिखित हैं:
1) मैं करने की कोशिश की यहाँ सीएसएस है जब उपयोगकर्ता माउस व्हील का उपयोग करता है तो स्लाइड एनीमेशन चलाने के लिए एक jQuery फ़ंक्शन को कार्यान्वित करें, लेकिन मेरे परीक्षणों में से कोई भी काम नहीं करता है ... संरचना हमेशा एक ही होती है:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
var target // still not able to figure out who should i target
$("html, body").stop().animate({
//to the target >,<
}
});
2) जब मेरी ब्राउज़र विंडो 100% पर है आकार सब कुछ अच्छी तरह से काम करने लगता है, लेकिन अगर मैं कम करने या> ज़ूम सब कुछ गड़बड़ कर में वृद्धि, < मैं इसे इस संभाल करने के लिए संभव है नोटिस, और here is an example: