单击时水平播放幻灯片动画
Animate slideshow horizontally on click
具有id="content"
的div需要更改内容。我有两个DIV
,在某个地方用id=1
和id=2
生成,我想div id="content"
显示一个,
但当我点击某个按钮来更改另一个DIV上的内容时,但使用平滑的水平动画,如图像库上的左右滚动。如何使用jQuery做到这一点?
<!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基于此SO答案的唯一示例:
它使用CSS3flex
作为模板,使用transition
来获得不错的幻灯片效果:
*{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>
第页。S: 不要忘记将所需的遗留-供应商-前缀添加到所需的CSS3属性
这是一个多步骤的过程:
1/在需要点击以切换内容的按钮上收听点击事件
2/点击后,你可以使用animate功能将你想要替换的内容从容器div中滑出
$('#id1').animate({'margin-left':'-=500px'},500)
应该起作用。第二个"500"是动画的速度。
3/然后你需要使用相同的功能来滑动你想要显示的内容。
4/当然你需要正确的css样式。类似于:
#content{
width:100px //width of your div
height : 100px // height of your div
overflow : hidden;
}
我会玩一些游戏并查看源代码来学习如何手动完成。您可以从检查这个开始:http://css-tricks.com/examples/AnythingSlider/
如果没有,它有完整的下载源和如何实现它的文档
更改div内容的最佳方法是使其中的子div都可用。
最初制作一个display:none;
,并在一定条件下制作为display:block;
它可以在Chrome、FF和IE上完美工作。
相关文章:
- jQuery透明图像描述鼠标悬停时的幻灯片动画
- jquery图片库幻灯片动画
- 选择2.js和jQuery幻灯片动画滞后/抖动
- 如何在显示隐藏元素时在 JQuery 中制作幻灯片动画
- 画布幻灯片动画
- JQuery WOW幻灯片/动画效果:Z指数问题
- 延迟jQuery切换Class效果,直到幻灯片动画完成
- Javascript:悬停时滞后;制作幻灯片动画
- 幻灯片动画未定义
- 点击按钮触发jQuery幻灯片动画
- 为什么我的背景幻灯片动画在更改之间有延迟
- 带有幻灯片动画的可关闭底部栏
- jquery的幻灯片动画;工作不正常
- JQuery垂直幻灯片动画不会移动
- 为jquery幻灯片动画添加不透明度效果
- 向ng重复添加幻灯片动画
- 如何防止引导转盘在单击右/左控件后恢复幻灯片动画
- 单击时水平播放幻灯片动画
- Jbgallery 3.0幻灯片动画是否有可能从白色淡出
- jQuery:幻灯片动画走得很远,然后“跳”到正确的高度