css wow.js无法工作

bwntbbo3 于 2023-03-09 发布在其他

关注(0)|答案(4)|浏览(101)

我刚试着在我的网站上实现wow.js，但它不起作用。我链接了所有的东西，但我不知道为什么它不起作用。我甚至添加了wow.js，并将其链接到html，但似乎仍然没有什么作用。我还添加了animate.css，但仍然没有效果。

超文本标记语言

<!DOCTYPE HTML>
<html>

<head>        
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="animate.css">
    <script language="javascript" type="text/javascript"src="javascript.js"></script>
    <script language="javascript" type="text/javascript" src="wow.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <title> Vids </title>
    <a href="index.html"> <header>  <img src="images/Logo.png" >    </header></a>

    </head>


<body>

   <div class="vids-title">

       <p>Vids</p>

   </div>


   <div class="video-1 wow slideInRight">
       <h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
       <iframe width="550" height="435"
src="https://www.youtube.com/embed/nuHfVn_cfHU">
</iframe>

   </div>

    <div class="video-2 wow slideInLeft">

        <h>Truth or Drink (Exes)</h>
        <iframe width="550" height="435"
src="https://www.youtube.com/embed/pxYpvNMbdXQ">
</iframe>

    </div>

    <div class="video-3 wow slideInRight">

        <h>Walker broke his arm</h>
        <iframe width="550" height="435"
src="https://www.youtube.com/embed/5-NXguyFFko">
</iframe>

    </div>

javascript语言

$(function(){
new WOW().init(); 

});

css

来源：https://stackoverflow.com/questions/30855948/wow-js-is-not-working

4条答案

按热度按时间

mwg9r5ms1#

您的代码没有任何问题-它工作正常https://jsfiddle.net/k3qaoyxe/
我将目录作为外部资源包括在内，然后

$(function(){
  new WOW().init(); 
});

效果很好。
您确定您已经正确包含了所有库并且它们正在正确加载吗？请检查开发者控制台中的网络选项卡。
cdn中包含的库：
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js

赞(0）回复(0）举报 2023-03-09

qcbq4gxm2#

对我来说，除了文档就绪事件外，在窗口加载事件中调用WOW后效果很好：

//At the document ready event
$(function(){
  new WOW().init(); 
});

//also at the window load event
$(window).on('load', function(){

     new WOW().init(); 
});

赞(0）回复(0）举报 2023-03-09

fzsnzjdm3#

<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

应该是

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="wow.js"></script>
<script src="javascript.js"></script>

你也可以去掉language和type属性，它们是无用的并且不符合W3C。

赞(0）回复(0）举报 2023-03-09

jfgube3f4#

如果你已经设置溢出属性到body，html或wow框父容器上，它将不起作用。从body或html删除溢出属性

赞(0）回复(0）举报 2023-03-09