Javascript 为什么我的道具不会出现，而阵列会不断循环
下面是代码。其中一些来自我的老师，我只是想弄明白为什么我的控制台在数组中循环，而不是在屏幕上设置图像动画。如果有人能告诉我为什么或者如何解决这个问题，我们将不胜感激Javascript 为什么我的道具不会出现，而阵列会不断循环,javascript,arrays,loops,animation,Javascript,Arrays,Loops,Animation,下面是代码。其中一些来自我的老师，我只是想弄明白为什么我的控制台在数组中循环，而不是在屏幕上设置图像动画。如果有人能告诉我为什么或者如何解决这个问题，我们将不胜感激 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Interactive Catalogue App Framework</title> <!-- main c
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Catalogue App Framework</title>
<!-- main css -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<!-- load jquery -->
<script src="js/jquery-latest.min.js"></script>
<!-- load jquery fullscreen plugin -->
<script src="js/jquery.fullscreen-min.js"></script>
<!-- load TweenMax for animation -->
<script src="js/TweenMax.min.js"></script>
</head>
<body>
<main>
<section id="screen1">
<img class="title" src="img/title2.png" />
<img class="instru" src="img/instru.png">
<img class="logo" src="img/logo.png">
<img id="kinfe" class="element" src="img/knife.png">
<img id="num1" src="img/num1.png">
<img id="bow" class="element" src="img/bow.png">
<img id="num9" src="img/num9.png">
<img id="pads" class="element" src="img/pads.png">
<img id="num2" src="img/num2.png">
<img id="canteen" class="element" src="img/canteen.png">
<img id="num3" src="img/num3.png">
<img id="rope" class="element" src="img/rope.png">
<img id="num4" src="img/num4.png">
<img id="light" class="element" src="img/light.png">
<img id="num5" src="img/num5.png">
<img id="goPro" class="element" src="img/goPro.png">
<img id="num6" src="img/num6.png">
<img id="case" class="element" src="img/case.png">
<img id="num7" src="img/num7.png">
<img id="arrows" class="element" src="img/arrow.png">
<img id="num8" src="img/num8.png">
<img id="save" class="element" src="img/save.png">
<p class="items">
<b> <font color="#CC4600">1.</font>
<font color="#2a436b">$59.99 -</font></b>
<font color="#81accc">Knife</font><br>
<b> <font color="#CC4600">2.</font>
<font color="#2a436b">$19.99 -</font></b>
<font color="#81accc">Foot Pads</font><br>
<b> <font color="#CC4600">3.</font>
<font color="#2a436b">$15.99 -</font></b>
<font color="#81accc">Canteen</font><br>
<b> <font color="#CC4600">4.</font>
<font color="#2a436b">$32.99 -</font></b>
<font color="#81accc">Rope</font><br>
<b> <font color="#CC4600">5.</font>
<font color="#2a436b">$29.99 -</font></b>
<font color="#81accc">Flashlight</font><br>
</p>
<p class="items1">
<b> <font color="#CC4600">6.</font>
<font color="#2a436b">$69.99 -</font></b>
<font color="#81accc">GoPro</font><br>
<b> <font color="#CC4600">7.</font>
<font color="#2a436b">$129.99 -</font></b>
<font color="#81accc">Bow Case</font><br>
<b> <font color="#CC4600">8.</font>
<font color="#2a436b">$5.99 -</font></b>
<font color="#81accc">Arrows</font><br>
<b> <font color="#CC4600">9.</font>
<font color="#2a436b">$599.99 -</font></b>
<font color="#81accc">PSE Compound Bow</font><br>
</p>
<img class="more-info" src="images/highlight1.jpg" />
</section>
<section id="screen2">
<img class="title" src="img/title2.png" />
<img class="instru" src="img/instru.png">
<img class="logo" src="img/logo.png">
<img class="boot" src="img/boots.png">
<img id="no1" src="img/num1.png">
<img id="sock" src="img/sock.png">
<img id="no2" src="img/num2.png">
<img id="sock1" src="img/sock1.png">
<img id="no3" src="img/num3.png">
<img id="sock2" src="img/sock2.png">
<img id="no4" src="img/num4.png">
<img id="boot1" src="img/boots1.png">
<img id="no5" src="img/num5.png">
<img id="boot2" src="img/boots2.png">
<img id="no6" src="img/num6.png">
<img id="coat" src="img/coat.png">
<img id="no7" src="img/num7.png">
<img id="coat1" src="img/coat2.png">
<img id="no8" src="img/num8.png">
<img class="coat" src="img/coat3.png">
<img id="no9" src="img/num9.png">
<p class="items">
<b> <font color="#CC4600">1.</font>
<font color="#2a436b">$209.99 -</font></b>
<font color="#81accc">Hi-Top Boots</font><br>
<b> <font color="#CC4600">2.</font>
<font color="#2a436b">$9.99 -</font></b>
<font color="#81accc">Socks</font><br>
<b> <font color="#CC4600">3.</font>
<font color="#2a436b">$11.99 -</font></b>
<font color="#81accc">Work Socks</font><br>
<b> <font color="#CC4600">4.</font>
<font color="#2a436b">$15.99 -</font></b>
<font color="#81accc">Thermal Socks</font><br>
<b> <font color="#CC4600">5.</font>
<font color="#2a436b">$159.99 -</font></b>
<font color="#81accc">Work Boots</font><br>
</p>
<p class="items1">
<b> <font color="#CC4600">6.</font>
<font color="#2a436b">109.99 -</font></b>
<font color="#81accc">Saftey Shoes</font><br>
<b> <font color="#CC4600">7.</font>
<font color="#2a436b">$129.99 -</font></b>
<font color="#81accc">Pilots Jacket</font><br>
<b> <font color="#CC4600">8.</font>
<font color="#2a436b">$89.99 -</font></b>
<font color="#81accc">Hunters Jacket</font><br>
<b> <font color="#CC4600">9.</font>
<font color="#2a436b">$99.99 -</font></b>
<font color="#81accc">Ski Jacket</font><br>
</p>
<img class="more-info" src="images/highlight2.jpg" />
</section>
<section id="screen3">
<img class="title" src="img/tittle.png" />
<img class="instru" src="img/instru.png">
<img class="logo" src="img/logo.png">
<img class="shirt" src="img/shirt.png">
<img class="hat" src="img/hat.png">
<img id="shirt1" src="img/shirt1.png">
<img id="shirt2" src="img/shirt2.png">
<img id="thermal" src="img/thermal.png">
<img id="boxers" src="img/boxers.png">
<img id="boxers1" src="img/boxers1.png">
<img id="hat1" src="img/hat1.png">
<img id="hat2" src="img/hat2.png">
<p class="items">
<b> <font color="#CC4600">1.</font>
<font color="#2a436b">$209.99 -</font></b>
<font color="#81accc">Hi-Top Boots</font><br>
<b> <font color="#CC4600">2.</font>
<font color="#2a436b">$9.99 -</font></b>
<font color="#81accc">Socks</font><br>
<b> <font color="#CC4600">3.</font>
<font color="#2a436b">$11.99 -</font></b>
<font color="#81accc">Work Socks</font><br>
<b> <font color="#CC4600">4.</font>
<font color="#2a436b">$15.99 -</font></b>
<font color="#81accc">Thermal Socks</font><br>
<b> <font color="#CC4600">5.</font>
<font color="#2a436b">$159.99 -</font></b>
<font color="#81accc">Work Boots</font><br>
</p>
<p class="items1">
<b> <font color="#CC4600">6.</font>
<font color="#2a436b">109.99 -</font></b>
<font color="#81accc">Saftey Shoes</font><br>
<b> <font color="#CC4600">7.</font>
<font color="#2a436b">$129.99 -</font></b>
<font color="#81accc">Pilots Jacket</font><br>
<b> <font color="#CC4600">8.</font>
<font color="#2a436b">$89.99 -</font></b>
<font color="#81accc">Hunters Jacket</font><br>
<b> <font color="#CC4600">9.</font>
<font color="#2a436b">$99.99 -</font></b>
<font color="#81accc">Ski Jacket</font><br>
</p>
<img class="more-info" src="img/screen3.png" />
</section>
</main>
<!-- load scale site code for editing -->
<script src="js/scale-site.js"></script>
<!-- main code -->
<script src="js/main.js"></script>
</body>
</html>
/* jslint browser: true */
/* global $, TweenMax, Back, setTimeout, setInterval, clearTimeout, document, window */
// speed of image animation in seconds
var animationSpeed = 0.5;
// time in seconds to wait before instructions reappear
var idleWaitTime = 30;
// sets what keys will be checked
// screen is based on order (screen 1 = key 1, screen 2 = key 2, etc.)
// more info keys based on keys 4-6
var keys = [49, 50, 51, 52, 53, 54]; // keys 1, 2, 3, 4, 5, 6
// vars
var animating = false,
activeLift = true,
currentScreenNum,
idleTimer,
waitTime,
highlighting = false,
highlightToggle = true,
activeKeys = [false, false, false];
// hide all sections
$('section').hide();
// show instructions screen
function displayScreenSaver() {
TweenMax.to('#instructions', 1, {
opacity: 1,
onComplete: function () {
transitonScreenOff();
currentScreenNum = null;
}
});
}
// transitions all elements off screen
function transitonScreenOff() {
// remove elements that are not part of the loop below
$('.title, .other').fadeOut(animationSpeed * 1000);
// loop through all 'element' classes
$('#screen' + currentScreenNum + ' .element').each(function (index) {
// animate elements off screen
// only edit property and easing
this['move' + index] = TweenMax.to($(this), animationSpeed, {
delay: animationSpeed + index * 0.1,
y: -1080,
ease: Back.easeIn,
onComplete: function () {
// hide element after animation
$(this.target).hide();
// reset positioning property values
this.pause(0);
}
});
});
}
// trigger function for image animation
function displayScreen(screenNum) {
// output screen number to browser console
console.log("Screen Number: " + screenNum);
// disable interactivity during animation
animating = true;
// disable keys
activeLift = false;
// hide instructions if showing
TweenMax.to('#instructions', 1, {
opacity: 0
});
// number of elements in section
// default set to 6.67 to delay transition when not transitioning off first
// wait enough time for instructions to fade off (6.67 * 150 = 1000 millisecs = 1 sec)
var numEle = 6.67;
// checks if currentScreenNum has been set
if (currentScreenNum) {
// sets how many elements in section
numEle = $('#screen' + currentScreenNum + ' .element').length;
// transitions all images off screen
transitonScreenOff();
}
// wait enough time for images to transition off
setTimeout(function () {
// shows active screen if hidden
$('#screen' + screenNum).show();
// transitions all elements with a 'element' class onto screen
$('#screen' + screenNum + ' .element').each(function (index) {
// sets the delay for each element
// each one will be offset by 0.1s + the duration
waitTime = index * 0.1 + animationSpeed;
// resets visibility of current element
$(this).show();
// animate element onto screen
// only edit property and easing
TweenMax.from($(this), animationSpeed, {
delay: waitTime,
y: 1080,
ease: Back.easeOut
});
});
// show screen title
$('#screen' + screenNum + ' .title').show();
// transition title on after final/total wait time (delay) from above
TweenMax.fromTo('#screen' + screenNum + ' .title', animationSpeed, {
left: -$(this).width()
}, {
delay: waitTime + animationSpeed,
left: 80,
ease: Back.easeOut
});
// show instructions/other content
$('#screen' + screenNum + ' .other').show();
// transition instructions/other content on after final/total wait time (delay) from above
TweenMax.fromTo('#screen' + screenNum + ' .other', animationSpeed, {
opacity: 0
}, {
delay: waitTime + animationSpeed,
opacity: 1,
onComplete: function () {
// enable interactivity
animating = false;
}
});
}, numEle * 150);
// sets current screen number for use when transitioning content off the screen
currentScreenNum = screenNum;
// clear idle timer
clearTimeout(idleTimer);
// start idle timer
idleTimer = setTimeout(displayScreenSaver, idleWaitTime * 1000);
}
// trigger for screen highlight overlay
function highlight(screenNum) {
// check if hightlight is hidden or showing
if (highlightToggle) {
// output highlight number to browser console
console.log("Highlight " + screenNum + " showing");
// fade in highlight/more info
$('#screen' + screenNum + ' .more-info').fadeIn(1000);
// animate highlighted product to the right
TweenMax.to('#screen' + screenNum + ' .highlight', 1, {
delay: 0.5,
x: "+=100"
});
// disables access to picking up other items
highlighting = true;
// runs else next time
highlightToggle = false;
} else {
// output highlight number to browser console
console.log("highlight " + screenNum + " hiding");
// animate highlighted product back to the left
TweenMax.to('#screen' + screenNum + ' .highlight', 1, {
x: "-=100"
});
// fade out highlight/more info
$('#screen' + screenNum + ' .more-info').delay(500).fadeOut();
// enables access to picking up other items
highlighting = false;
// runs if next time
highlightToggle = true;
}
// clear idle timer
clearTimeout(idleTimer);
// restart idle timer
idleTimer = setTimeout(displayScreenSaver, idleWaitTime * 1000);
}
// listen for down keypress
document.onkeydown = function (e) {
e = e || window.event;
// sets activeKeys to true
if (e.keyCode == keys[0]) {
activeKeys[0] = true;
}
if (e.keyCode == keys[1]) {
activeKeys[1] = true;
}
if (e.keyCode == keys[2]) {
activeKeys[2] = true;
}
// F key - go fullscreen
if (e.keyCode == 70) {
$(document).fullScreen(true);
}
};
//listen for up keypress
document.onkeyup = function (e) {
e = e || window.event;
// only check keys when active true
if (activeLift) {
if (e.keyCode == keys[0] && currentScreenNum != 1 && !highlighting) {
displayScreen(1);
}
if (e.keyCode == keys[1] && currentScreenNum != 2 && !highlighting) {
displayScreen(2);
}
if (e.keyCode == keys[2] && currentScreenNum != 3 && !highlighting) {
displayScreen(3);
}
}
// screen highlight overlay
if (e.keyCode == keys[3] && currentScreenNum == 1 && !animating) {
highlight(1);
}
if (e.keyCode == keys[4] && currentScreenNum == 2 && !animating) {
highlight(2);
}
if (e.keyCode == keys[5] && currentScreenNum == 3 && !animating) {
highlight(3);
}
// sets activeKeys to false
if (e.keyCode == keys[0]) {
activeKeys[0] = false;
}
if (e.keyCode == keys[1]) {
activeKeys[1] = false;
}
if (e.keyCode == keys[2]) {
activeKeys[2] = false;
}
};
//loop checks for all keys active
setInterval(function () {
if (activeKeys[0] && activeKeys[1] && activeKeys[2]) {
activeLift = true;
} else {
activeLift = false;
}
}, 10);
//loop just to check activeKeys in console
setInterval(function () {
console.log(activeKeys);
}, 1000);
交互式目录应用程序框架
1.
$59.99 -
刀
2.
$19.99 -
脚垫
3.
$15.99 -
食堂
4.
$32.99 -
绳索
5.
$29.99 -
手电筒
6.
$69.99 -
GoPro
7.
$129.99 -
船首箱
8.
$5.99 -
箭头
9
$599.99 -
PSE复合弓
1.
$209.99 -
高帮靴子
2.
$9.99 -
袜子
3.
$11.99 -
工作袜
4.
$15.99 -
保暖袜
5.
$159.99 -
工作靴
6.
109.99 -
安全鞋
7.
$129.99 -
飞行员夹克
8.
$89.99 -
猎人夹克
9
$99.99 -
滑雪夹克
1.
$209.99 -
高帮靴子
2.
$9.99 -
袜子
3.
$11.99 -
工作袜
4.
$15.99 -
保暖袜
5.
$159.99 -
工作靴
6.
109.99 -
安全鞋
7.
$129.99 -
飞行员夹克
8.
$89.99 -
猎人夹克
9
$99.99 -
滑雪夹克
/*jslint浏览器：true*/
/*全局$，TweenMax，Back，setTimeout，setInterval，clearTimeout，文档，窗口*/
//图像动画的速度（秒）
var animationSpeed=0.5；
//指令重新出现前等待的时间（秒）
var idleWaitTime=30；
//设置要检查的关键点
//屏幕基于顺序（屏幕1=键1，屏幕2=键2等）
//基于键4-6的更多信息键
变量键=[49,50,51,52,53,54]；//键1、2、3、4、5、6
//瓦尔斯
var animating=false，
activeLift=true，
当前屏幕数，
闲散者，
等待时间，
高亮显示=假，
highlightToggle=true，
activeKeys=[false，false，false]；
//隐藏所有部分
$（'section'）.hide（）；
//显示说明屏幕
函数displayScreenSaver（）{
TweenMax.至（“#说明”，1{
不透明度：1，
onComplete:函数（）{
transitonScreenOff（）；
currentScreenNum=null；
}
});
}
//将所有元素转换到屏幕外
函数transitionScreenOff（）{
//删除不属于以下循环的元素
$（'.title，.other'）.fadeOut（动画速度*1000）；
//循环遍历所有“元素”类
$（“#屏幕”+currentScreenNum+”.element'）。每个（函数（索引）{
//在屏幕外设置元素动画
//仅编辑属性和属性
这个['move'+index]=TweenMax.to（$（这个），animationSpeed{
延迟：动画速度+索引*0.1，
y:-1080，
放松：回来，放松，
onComplete:函数（）{
//动画后隐藏元素
$（this.target）.hide（）；
//重置定位属性值
这个。暂停（0）；
}
});
});
}
//图像动画的触发函数
功能显示屏（screenNum）{
//将屏幕编号输出到浏览器控制台
控制台日志（“屏幕编号：+screenNum”）；
//禁用动画期间的交互
动画=真；
//禁用密钥
activeLift=false；
//如果显示，则隐藏说明
TweenMax.至（“#说明”，1{
不透明度：0
});
//节中的元素数
//默认设置为6.67，以在不首先关闭转换时延迟转换
//等待足够的时间，使指令逐渐消失（6.67*150=1000毫秒