滑出div的Javascript幻灯片

时间：2014-02-14 09:35:14

标签： javascript html css

我正在尝试创建此网站的副本：

http://liko0312.wix.com/wildfireimages

我已经使用CSS将它从同一方向滑入和滑出，并将div放在100％以外，然后将其带入0，非常多的切换效果。

然而，我正试图让页面像模型网站一样滑入和滑出，但CSS不允许我这样做。我有很好的HTML / CSS技能，但Javascript很低。到目前为止，我找到this fiddle，但它是一个切换动画，而我需要它从右侧滑入并向左滑动并且必须重置之后。此外，当前div滑动和下一个div滑动的动画必须同时进行。

根据要求提供Fiddle with code 

.panel{
    width:0px;
    height:0px;
    overflow: hidden;
	position:relative;
    left:100%;
    background: none;
    z-index: 2;
	-moz-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
    -webkit-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
	-o-transition: all .8s ease-in-out,  width 0s ease 1s, border-width 0s ease 1s;
	transition: all .8s ease;
	transition-delay:0s;
	margin:0px;
	
}

.panel:target{
	width:100%;
	height:auto;
    margin:0px 0 0;
	padding:0;
    background-color: transparent;
	position:relative;
	left:0;
	z-index:3;
	
}
<div id="overall-wrap">
<!-- Header with Navigation -->

 <div id="header">
    <a href="#home"><img class="header" src="images/logo.png" width="133" height="86" alt="Wildfire Images"></a>
    <nav>
    <ul id="navigation">
        <li><a class="scroll" href="#home">Home</a></li>
        <li><a class="scroll" href="#about">About Us</a>
            <ul>
              <li><a class="scroll" href="#contact">Contact Us</a></li>
            </ul>
        </li>
    </ul>
    </nav>
    <div class="clearfix"></div>
</div>

 
<div class="clearfix"></div>

		

      <div id="home" class="panel"></div>

<!-- About Us -->
 
      <div id="about" class="panel">
          <div class="content">
              <div class="bg-about effect2">
              <div class="about-wrapper">
                <div class="about-text">
                <h2> About Us</h2>
                <p>Wildfire Images is a Sydney based boutique Portrait Photography Studio dedicated to candidly capturing all that is beautiful, fun and elegant about you and your loved ones.</p>
                <p>At Wildfire Images, we tailor every shoot to you, your trade mark smile, your rapturous laugh, your devotion to those you love, the cheeky, the serious and all those gorgeous things in between that will always be unmistakably you.</p>
                <p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p>
                <p class="strong">Contact us today on 9150 6275.</p>
                </div>
                <div class="about-image"><img src="images/aboutme.jpg" width="200" height="300" alt="WildFire Studios"></div>
              </div>
              </div>
              <!-- ... -->
          </div>
          <div class="clearfix"></div>
      </div>

<!-- /About Us -->

<!-- Contact -->

<div id="contact" class="panel">
    <div class="content">
        <div class="bg-contact effect2">
        <img src="images/contact-image.jpg" width="900" height="419" alt="Contact Wildfire"/>
        
       <div id="form-wrapper">
         <div id="form-outer">
         <div id="text-wrap">
           <div id="contact-left">
           <h2>Contact</h2>
           <div id="phone">
           <h3>Phone</h3><p>9150 6275</p></div>
           <div id="email">
           <h3>Email</h3><p>info@wildfireimages.com.au<p></div>
</div>
           <div id="contact-right"><h3>Address</h3><p>Studio 18,</p><p>442-444 King Georges Rd</p><p>BEVERLY HILLS NSW 2209</p></div>
           </div>
           <div class="clear"></div>
           <div id="form-inner">
           <form name="contact" action="contact.php" method="post" onBlur="MM_validateForm('name','','R','email','','RisEmail','subject','','R','message','','R');return document.MM_returnValue">
             <input name="name" type="text" class="field" id="name" placeholder="Name"/>
             <input name="email" type="email" class="field" id="email" placeholder="Email"/>
             <input name="subject" type="text" class="field" id="subject" placeholder="Subject" />
             <textarea name="message" class="field_textarea" id="message" placeholder="Message"></textarea>
             <input type="submit" value="Send" name="submit" class="submit"/>
           </form>
           </div>
         </div>
       </div>
          
        </div>
        <!-- ... -->
    </div>
</div>
<!-- /Contact -->

<!-- Portraits -->
<div id="portraits" class="panel">
    <div class="content">
       <div class="gallery-big effect2">
       <div id="gallery-big-text-wrap">
           <h2>Portraits</h2>
           <p>Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.</p>
           <p>Contact us today on 9150 6275.</p>
           </div>  
          <!--k gallery start-->
          <img src="images/baby-06-portrait-gallery.jpg" width="798" height="531">
           <img src="k/ki_galleries/all-about-me/AEP_0486.jpg" width="798" height="1200">
          <img src="k/ki_galleries/all-about-me/AEP_0653.jpg" width="798" height="1200">
          <img src="k/ki_galleries/all-about-me/DSC_0548.jpg" width="799" height="1200">
          <img src="k/ki_galleries/all-about-me/DSC_2652-edit.jpg" width="799" height="1200">
          <img src="images/family.jpg" width="798" height="532">
          <img src="k/ki_galleries/all-about-me/DSC_4052.jpg" width="799" height="1200">
        
      </div>
    </div>
</div>
<!-- /Portraits -->
</div>

此外，新网站可以在wixwebsite.seobrasov.com上看到

请注意，幻灯片的输入和输出应该适用于两个以上的div，并且能够从tiv 1跳到div 3而不显示div 2.

4 个答案:

答案 0 :(得分：1)

你可以尝试两件事 -

  1. 您可以使用基于Jquery的插件，如bxslider。你不需要学习jquery。如果仔细观察，这是非常自我解释的。 http://bxslider.com/options

  2. 您可以使用纯CSS 3解决方案。这采用了CSS 3的转换属性，具有应用于它们的易于/缓出的转换功能。在此处查看演示http://www.usabilitypost.com/2011/04/19/pure-css-slideout-interface/

答案 1 :(得分：1)

您可以使用两个div来执行此操作：一个用于处理显示的页面，另一个用于处理要加载的页面。

单击链接时，只需将当前页面设置为左侧动画，并在动画结束时将其设置为右侧：

$("#page1").stop().animate({
    left:"-100%"
}, 500, function(){
    $(this).css("left", "100%");
});

$("#page2").stop().animate({
    left:"10%"
}, 500);

Basic JSFiddle

JSFiddle using 3-page menu

答案 2 :(得分：0)

稍微更新了您的代码以支持所需的导航

我在div周围添加了一个包装器，一次只显示一个框。

<div id="mainbox">
        <div class="left-right">
            <div class="red box">Red Div !</div>
            <div class="green box">Green Div !</div>
        </div>
</div>

CSS就像这样

#mainbox {
    height:200px;
    width:200px;
    overflow:hidden;
}

然后我在鼠标移开时将其左侧位置更改为-100％，并在鼠标移出时将其恢复为0。

$(document).ready(function(){
    $('.left-right').mouseover(function(){
         $('.left-right').stop().animate({
            left: '-100%'    
        }, 400);                        
    }).mouseout(function(){
        $('.left-right').stop().animate({
                left:'0'
        }, 400);     
    });

});

Working JSFiddle Demo

答案 3 :(得分：0)

检查此更新： JS Fiddle updated! （http://jsfiddle.net/jPneT/2705/）

  • 使用3次观看
  • 您有默认视图
  • 易于导航的方法。

Js文件：

$(document).ready(function(){
    var currentPageI = -1;
    var pages = [
        $('div.l1'),
        $('div.l2'),
        $('div.l3'),
    ];
    var viewsWidth = 200; 
    var showPage = function(index){
        if(index === currentPageI){return;}
        var currentPage = pages[currentPageI];
        if(currentPage){
            currentPage.stop().animate({left: -viewsWidth})
        }
        var nextPage = pages[index];
        nextPage
            .stop()
            .css({left: viewsWidth})
            .animate({left: 0}) 
        currentPageI = index;
    }
    // show default page
    showPage(0);
    $('a.l1').click(showPage.bind(null, 0));
    $('a.l2').click(showPage.bind(null, 1));
    $('a.l3').click(showPage.bind(null, 2));

    $('.left-right').mouseover(function(){
        $('.slider').stop().animate({
            right: 0    
        }, 400);                        
    }).mouseout(function(){
        $('.slider').stop().animate({
            right: '-200px'    
        }, 400);     
    });

});

HTML：

<a class="l1">1</a><a class="l2">2</a><a class="l3">3</a>

<div class="left-right">
    <div class="l1">L1 view</div>
    <div class="l2">L2 view</div>
    <div class="l3">L3 view</div>
</div>

CSS：

.left-right {
    overflow:hidden;
    height:200px;
    width:200px;
    position:relative;
    background-color:#333;
    clear: left;
}
div.l1,div.l2,div.l3 {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:-200px;
    color:#fff;
}
a.l1,a.l2,a.l3 {
    display: block;
    width: 50px;
    height: 50px;
    float: left;
    cursor: pointer;
    opacity: 0.6;
}
a:hover {
    opacity: 1
}

.l1{
    color: red;
    background-color:red;
}
.l2{
    color: green;
    background-color:green;
}
.l3{
    color: blue;
    background-color:blue;
}
相关问题
最新问题