Animate slideshow horizontally on click
Div with id="content" need to change content. I开发者_如何学编程 have two DIVs, somewhere generated with id=1 and id=2, and I want to div id="content" show one,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="content">
</div>
</body>
</html>
CSS-only example based on this SO answer:
It uses CSS3 flex for the template and transition for the nice slideshow effect:
*{box-sizing:border-box;}
html, body{height:100%; margin:0;}
body{
font: 16px/1 sans-serif;
color:#fff;
display: flex;
flex-direction: column;
overflow: hidden;
}
nav ul{
list-style:none;
padding:0;
margin:0;
display: flex;
}
nav ul li{
flex: 1;
}
nav ul li a{
display: block;
text-align:center;
padding:24px;
background:#0bf;
color:#fff;
}
#pages{
flex-grow: 1;
display: flex;
transition: 1s;
}
#pages section{
overflow: auto;
min-width: 100%;
overflow-y: auto;
padding: 0 32px;
font-size: 40px;
}
.bg1{background:#0af;}
.bg2{background:#f0a;}
.bg3{background:#0fa;}
#home:target ~ #pages{
transform: translateX(-0%);
}
#about:target ~ #pages{
transform: translateX(-100%);
}
#contact:target ~ #pages{
transform: translateX(-200%);
}<nav>
<ul>
<li><a href="#home" class="bg1">HOME</a></li>
<li><a href="#about" class="bg2">ABOUT</a></li>
<li><a href="#contact" class="bg3">CONTACT</a></li>
</ul>
</nav>
<!-- dummy anchor targets -->
<i class="target" id="home"></i>
<i class="target" id="about"></i>
<i class="target" id="contact"></i>
<div id="pages">
<section class="bg1">
<h1>WELCOME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure repellendus impedit, fugiat nostrum totam possimus perferendis aut explicabo, perspiciatis veritatis dolorem recusandae ut ratione similique magnam ex tenetur qui doloribus.</p>
</section>
<section class="bg2">
<h1>ABOUT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus praesentium ipsum esse autem quisquam earum accusantium cumque, ipsa ratione saepe sunt voluptatibus fuga perspiciatis reiciendis qui impedit nam itaque incidunt.</p>
</section>
<section class="bg3">
<h1>CONTACT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum perspiciatis, quae tempore voluptas modi dignissimos asperiores quibusdam adipisci eligendi facilis eos eius corrupti, numquam nulla dolorum, impedit rem fugit rerum?</p>
</section>
</div>P.S: don't forget to add the needed legacy -vendor- prefixes to needed CSS3 properties
It's a multiple step process :
1/Listen for the click event on the button one need to click to switch the content
2/On click you can use the animate function to slide the content you wish to replace out of the container div. Something like
$('#id1').animate({'margin-left':'-=500px'},500)
should work. The second "500" is the speed of the animation.
3/ Then you need to use the same function to slide the content you wish to show in.
4/ Of course you'd need the correct css style. Something like :
#content{
width:100px //width of your div
height : 100px // height of your div
overflow : hidden;
}
I would play a bit and view sources to learn how to do it manually. You can start by inspecting this one: http://css-tricks.com/examples/AnythingSlider/
If not it has the complete source for download and docs on how to implement it
The best way to change the content of a div is to make available both the sub-div inside it.
Initially make one display:none; and on basis of some condition make it as display:block;
It works perfectly on Chrome, FF and IE.
加载中,请稍侯......
精彩评论