哇.js不起作用

wow.js is not working

本文关键字：不起作用 js      更新时间：2023-09-26

我刚刚尝试在我的网站上实现wow.js但它不起作用。我已经链接了所有内容，但我不知道为什么它不起作用。我什至添加了哇.js并将其链接到html，但似乎仍然没有任何工作。我还添加了动画.css但仍然没有效果。

.HTML 

<!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(); 
});

你的代码没有错 - 它工作正常
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.jshttps://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js

对我来说

，除了文档就绪事件之外，在窗口加载事件中调用WOW后，它运行良好：

//At the document ready event
$(function(){
  new WOW().init(); 
});
//also at the window load event
$(window).on('load', function(){
     new WOW().init(); 
});

<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。

如果您已将溢出属性设置为body，html或在wow框的父容器上，它将不起作用.删除正文或html中的溢出属性

相关文章：