gpt4 book ai didi

javascript - 如何使 Javascript 函数在显示 DIV 元素时启动?

转载 作者:行者123 更新时间:2023-12-02 17:20:05 25 4
gpt4 key购买 nike

我有一个单页 html 应用程序。只有一个 thml 文件具有多个 DIV,单击相关按钮时显示/隐藏这些 DIV。

我在其中一个 DIV 上使用了一些动画(而不是在“第一页 DIV”上)。问题是,当html文档加载时,动画直接开始,当我用动画转到那个div时,动画已经结束了。

我的问题是:如何让动画在DIV显示的那一刻开始?

这是代码:

<!DOCTYPE html>
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
<script>
function myFunction()
{
var o, qt=[
["a","b","c"],
["d","e","f"],
["g","h","i"]];

o=document.getElementById("quote1");
o.innerHTML="";
for(var i=1;i<4;i++)
o.innerHTML+="<p id=\"quote1_"+i+"\" style=\"font-size: 28pt;\">&nbsp;</p>";

var q=qt[Math.floor(Math.random() * qt.length)];
document.getElementById("quote1_1").innerHTML=q[0];
setTimeout(function() { document.getElementById("quote1_2").innerHTML=q[1]; }, 2000);
setTimeout(function() { document.getElementById("quote1_3").innerHTML=q[2]; }, 3000);
}

window.onload = function(){
myFunction();
}
</script>
</head>

<body>
<div id="Page1">
<div data-role="page">
<div data-role="content">
<center>
<a href="#" onclick="return show('Page2','Page1');">SHOW ANIMATION</a>
</center>
</div>
</div>
</div>




<div id="Page2" style="display:none">
<div data-role="page" id="main">
<div data-role="content">
<center>
<div id="quote1"></div>
<center>
<a href="#" onclick="myFunction()">Next</a>
</center>
</center>
</div>
</div>
</div>
</body>
</html>

最佳答案

除了 Kcent 的帖子之外,还有一个名为“ScrollMagic”的 jQuery 插件:

http://janpaepke.github.io/ScrollMagic/

它根据页面上的滚动速度/位置激事件画。您可以在这里找到文档:

http://janpaepke.github.io/ScrollMagic/docs/index.html

关于javascript - 如何使 Javascript 函数在显示 DIV 元素时启动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24046027/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com