页无jQuery的幻灯片？ [英] Page slide without Jquery?
本文介绍了页无jQuery的幻灯片？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图做与动态内容没有jQuery的（阿贾克斯）页幻灯片切换。我第一次想尝试做只有CSS，但我尝试没有工作，没有人还没有到我的如何尝试这个CSS问题。
我决定尝试这个做用JavaScript，但我似乎无法加载类的时候我希望。任何建议？
我演示的尝试：测试页
而code：
JavaScript的：
函数pageSlide（N）{
VAR滑=的document.getElementById（N）;
如果（slide.className ===aniDown'）{
slide.className ='aniUp'; }
否则，如果（slide.className ===aniUp'）{
slide.className ='aniDown'; }}
功能sectionAssure（的classID）{
pageSlide（的classID）;
的setTimeout（函数（）{
VAR TMP ='';
VAR SEL = document.getElementsByTagName（'部分'）;
对于（VAR I = 0; I＆LT; sel.length;我++）{
如果（SEL [我] .ID ==的classID）{TMP ='块'}其他{TMP ='无'}
SEL [我] .style.display = TMP; }
pageSlide（的classID）; }，（1000））;
}
CSS：
.aniDown {
的z-index：0;
-webkit-动画名称：了slideDown;
-webkit-动画持续时间：2秒;
-webkit-动画迭代数：1;
-webkit-动画定时功能：缓解;
-webkit-动画方向：正常;
}
@ -webkit-关键帧了slideDown {
0％{的margin-top：-3000px; }
40％{的margin-top：-100px; }
100％{的margin-top：0px; }
}
.saniUp {
-webkit-动画名称：效果基本show;
-webkit-动画持续时间：2秒;
-webkit-动画迭代数：1;
-webkit-动画定时功能：缓解;
-webkit-动画方向：正常;
}
@ -webkit-关键帧效果基本show {
0％{的margin-top：0px;}
20％{的margin-top：-1000px;}
100％{的margin-top：-3000px;}
}
HTML5：
＆LT;头＆GT;
＆LT; NAV ID =headNav＆GT;
＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =＃的onclick =checkPage（第1页，home.html做为'）;返回false＆GT;家＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃的onclick =checkPage（'PAGE2'，'about.html'）;返回false＆gt;关于＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / NAV＆GT;
＆LT; /头＆GT;
＆LT; - 内容区：（可变视觉） - ＆GT;
＆LT; DIV ID =contentBody＆GT;
＆LT; BR＆GT;
＆lt;节类=aniDownID =第1页＆GT;
＆LT;脚本＆GT; loadContent（第1页，home.html做为'）;＆LT; / SCRIPT＆GT;
＆LT; /节＆gt;
＆lt;节类=aniDownID =第2页＆GT;＆LT; /节＆gt;
＆LT; / DIV＆GT;
解决方案
我在这有几个错误。首先是在CSS类名称的拼写错误。二是，部分元素，我告诉给.aniUp是目标的的classID。
下面是修复：
使用陈吉伟;
功能效果基本show（N）{
VAR TMP ='';
VAR滑=的document.getElementById（N）;
VAR sectionClass = document.getElementsByTagName（'部分'）;
对于（VAR I = 0; I＆LT; sectionClass.length;我++）{
如果（sectionClass [I] .style.display =='块'）{
的console.log（内容）;
TMP ='aniUp'; }
sectionClass [I] .className = TMP; }
}
功能了slideDown（N）{
VAR滑=的document.getElementById（N）;
VAR TMP ='';
VAR SEL = document.getElementsByTagName（'部分'）;
对于（VAR I = 0; I＆LT; sel.length;我++）{
如果（SEL [我] .ID == N）{
的console.log（内容下）;
TMP ='aniDown'; }
SEL [我] .className = TMP; }
}
功能sectionAssure（的classID）{
的console.log（开始点击）;
效果基本show（的classID）;
的setTimeout（函数（）{
VAR TMP ='';
VAR SEL = document.getElementsByTagName（'部分'）;
对于（VAR I = 0; I＆LT; sel.length;我++）{
如果（SEL [我] .ID ==的classID）{TMP ='块'}其他{TMP ='无'}
SEL [我] .style.display = TMP; }
的console.log（复位为下）;
了slideDown（的classID）; }，（1000））;
}
功能loadContent（的classID，网址）{
VAR XMLHTTP;
如果（window.XMLHtt prequest）{
XMLHTTP =新XMLHtt prequest（）;
xmlhttp.onreadystatechange =功能（）{
如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）{
的document.getElementById（的classID）.innerHTML = xmlhttp.responseText;}};
xmlhttp.open（GET，内容/+网址，真正的）;
xmlhttp.send（）; }
返回false; }
功能checkPage（的classID，网址）{
sectionAssure（的classID）;
loadContent（的classID，URL）; }
，和在CSS .saniUp到.aniUp
I am attempting to do a page slide transition with no jQuery with dynamic content(Ajax). I first wanted to try and do it with only CSS but my attempt didn't work and no one has yet to respond to my CSS question on how to try this.
I decided to try this doing it with JavaScript but I can't seem to load the class when I wish. Any advice?
My demo attempt: Test Page
And the Code:
javascript:
function pageSlide ( n ) {
var slide = document.getElementById( n );
if( slide.className === 'aniDown' ) {
slide.className = 'aniUp'; }
else if ( slide.className === 'aniUp' ){
slide.className = 'aniDown'; } }
function sectionAssure( classID ) {
pageSlide( classID );
setTimeout( function ( ) {
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
sel[i].style.display = tmp; }
pageSlide( classID ); }, ( 1000 ) );
}
css:
.aniDown {
z-index:0;
-webkit-animation-name: slideDown;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-direction:normal;
}
@-webkit-keyframes slideDown {
0% { margin-top:-3000px; }
40% { margin-top:-100px; }
100% { margin-top:0px; }
}
.saniUp {
-webkit-animation-name: slideUp;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-direction:normal;
}
@-webkit-keyframes slideUp {
0% {margin-top:0px;}
20% {margin-top:-1000px;}
100% {margin-top:-3000px;}
}
html5:
<header>
<nav id="headNav">
<ul>
<li><a href="#" onclick="checkPage('page1', 'home.html');return false">Home</a></li>
<li><a href="#" onclick="checkPage('page2', 'about.html');return false">About</a></li>
</ul>
</nav>
</header>
<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<br>
<section class="aniDown" id="page1">
<script>loadContent('page1','home.html');</script>
</section>
<section class="aniDown" id="page2"></section>
</div>
解决方案
I had several error in this. First was a typo in the css class name. Second was that the section element I was telling to .aniUp was the target's classID.
Here is the fix:
"use strick";
function slideUp ( n ) {
var tmp = '';
var slide = document.getElementById( n );
var sectionClass = document.getElementsByTagName('section');
for (var i=0; i<sectionClass.length; i++){
if (sectionClass[i].style.display == 'block') {
console.log("Content Up");
tmp = 'aniUp'; }
sectionClass[i].className = tmp; }
}
function slideDown ( n ) {
var slide = document.getElementById( n );
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == n) {
console.log("Content Down");
tmp = 'aniDown'; }
sel[i].className = tmp; }
}
function sectionAssure( classID ) {
console.log("Start Click");
slideUp( classID );
setTimeout( function ( ) {
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
sel[i].style.display = tmp; }
console.log("Reset to Down");
slideDown( classID ); }, ( 1000 ) );
}
function loadContent ( classID, url ) {
var xmlhttp;
if ( window.XMLHttpRequest ) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
document.getElementById( classID ).innerHTML=xmlhttp.responseText;}};
xmlhttp.open( "GET", "content/" + url, true );
xmlhttp.send( ); }
return false; }
function checkPage ( classID, url) {
sectionAssure ( classID );
loadContent ( classID, url); }
, and in the css .saniUp to .aniUp.
这篇关于页无jQuery的幻灯片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
