[英]Jquery Slide DIV half of page only
我嘗試做出類似於Microsoft支持網站上的內容。請參閱 ->( 訪問此處 )
單擊此處列出的任何產品。 (注意:本文/問題的目的不是在任何產品上營銷!!!!僅僅是出於知識目的。)
當您單擊那里列出的任何一個時,將出現一個下拉列表。
現在我的問題要點出來了。 單擊菜單項后,您會看到有一個“選擇主題”列表,當您單擊其中任何一個時,就會出現第二個列表。 然后單擊第二個列表中的項目,第三個列表就會出現。 我正是嘗試制作一個這樣的腳本。 我通過互聯網搜索並制作了一個div滑塊。 但它會滑整個div。 這是我做的代碼
HTML
<div id="gallery">
<div id="slider">
<div style="background:#cf5">1</div>
<div style="background:#ada">2</div>
<div style="background:#b0b">3</div>
</div>
<span id="prev">Prev</span>
<span id="next">Next</span>
</div>
CSS
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:500px;
height:330px; /* +30 = space for buttons */
text-align:center; /* to center the buttons */
}
#slider{
position:absolute;
left:0;
height:300px;
text-align:left; /* to reset text inside slides */
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
#prev, #next{
display:inline-block;
position:relative;
top:300px;
cursor:pointer;
padding:5px;
}
jQuery的
$(function(){
var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('div',$sli),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0; // a counter
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
});
這是我在Fiddle上的代碼示例
之后進行一些研發。 我做這樣的事情
HTML
<div>
<input type="submit" id = "submit" value = "Show panel"/>
<span id = "showpanel1"></span>
</div>
<div id = "slider" style = "display:none">
<div class = "panel1" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
<div class = "panel2" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
<!-- Load Loder GIF -->
<div id = "loader" style = "display:none">
<img src = "loader.gif">
</div>
<!-- QnA Div Start -->
<div id = "qaslider" style = "display:none">
<div class = "mainpanel" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
JS
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var firsttext;
$(".panel1").on('click','li',function (){
$(".panel2").show("slide", { direction: "right" }, 1000);
$("span").text($(this).html());
firsttext = $(this).html();
});
$('#submit').click(function() {
$(".mainpanel").hide();
$("#slider").show("slide", { direction: "right" }, 0);
$(".panel2").hide("slide", { direction: "right" }, 0);
$(".panel1").show("slide", { direction: "right" }, 1000);
});
$(".panel2").on('click','li',function (){
$("span").text(firsttext + " > " + $(this).html());
$( "#slider" ).fadeOut( "slow" );
$("#loader").show("slide", { direction: "right" }, 800);
$("#loader").center(true);
setTimeout(removeslider,4000)
});
});
function removeslider()
{
$("#loader").hide("slide", { direction: "left" }, 800);
$("#qaslider").show("slide", { direction: "right" }, 0);
$(".mainpanel").show("slide", { direction: "right" }, 1000);
}
// Custome Jquery Function to stop/place element at center screen
jQuery.fn.center = function(parent) {
if (parent) {
parent = this.parent();
} else {
parent = window;
}
this.css({
"position": "absolute",
"top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
"left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
});
return this;
}
</script>
樣式
<style>
.panel1 .panel1
{
border:1px solid black;
margin-right:800;
margin-top:20px;
}
#loader
{
margin-right:708;
margin-top:117px;
margin-left:525px;
}
.panel1 ul li:hover, .panel2 ul li:hover
{
cursor:hand
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
</style>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.