个人中心
gpt4 book ai didi

javascript - 在 Codepen 中工作的 JS 在我的 html 页面上不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 07:39:47 26 4
gpt4 key购买 nike

你能解释一下为什么这段代码在 codepen 中运行良好，但在我的 html 页面中却不行。我什至无法检查可能出现的错误。我很高兴你的帮助!我想这个错误与连接一些 jquery 模块有关。但我试图修复它并连接其中一些但没有成功。CSS 和 HTML 效果很好。但是我打不开图片

总的来说，我决定从 html-page 公开整个代码。不幸的是，删除 https 中的 's' 字符并替换 jquery 的连接并不能解决问题..

问题解决了。我的代码不起作用的原因是 Bootstrap 。我需要将一个特殊的引导链接连接到我的代码，它解决了这个问题。 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="gallery">
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr01/original-9161-1439317330-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />

        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr08/original-1654-1439317465-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr08/original-13354-1439321173-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr04/original-25740-1439321209-5.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr08/original-9292-1439319916-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr05/original-6710-1439319334-17.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />

        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr02/original-16901-1439320287-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr04/original-29345-1439321306-8.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr15/original-20286-1439320376-10.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr02/original-6989-1439317507-15.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr11/original-8867-1439317446-6.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr03/original-22498-1439319085-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    </div>
</div>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>
<style>
   .gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.gallery img {
    width: 100%;
    height: auto;
    transition: 500ms;
    margin-bottom: 10px;
    opacity: 0.8;
    page-break-inside: avoid; /* For Firefox. */
    -webkit-column-break-inside: avoid; /* For Chrome & friends. */
    break-inside: avoid; /* For standard browsers like IE. :-) */
}

.gallery img:hover {
    opacity: 1;
}

.modal-img,.model-vid{
  width:100%;
  height: auto;
}
.modal-body{
  padding:0px;
}

.modal-dialog {
    text-align: center;
    vertical-align: middle;
    display: block;
    top: 10%;
}

.modal-content {
  border: none;
}

@media screen and (max-width: 767px) {
    .gallery {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    .gallery div { margin: 0;
        width: 200px;
    }
}

@media screen and (max-width: 479px) {
    .gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .gallery div {
        margin: 0;
        width: 200px;
    }
}

</style>
<script>
   $(document).ready(function () {
  $(".gallery-img").click(function(){
    var t = $(this).attr("src");
    $(".modal-body").html("<img src='"+t+"' class='modal-img'>");
    $("#myModal").modal();
  });
});
</script>
</body>

</html>

最佳答案

您可能试图在不安全的页面上加载安全内容。尝试使用 https 加载 jquery:http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

关于javascript - 在 Codepen 中工作的 JS 在我的 html 页面上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48630643/

26 4 0
文章推荐： c - feof，似乎不起作用 - 文本文件
文章推荐： java - 使用 Java 更新 Mongodb
文章推荐： python - 试图将文件下载缓冲区拆分为单独的线程
文章推荐： java邮件API异常
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com