Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

<section> inside #ul doesn't wowjs scroll animation properly #383

Open
menghan465 opened this issue Dec 29, 2024 · 0 comments
Open

<section> inside #ul doesn't wowjs scroll animation properly #383

menghan465 opened this issue Dec 29, 2024 · 0 comments

Comments

@menghan465
Copy link 

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/14
  Time: 下午10:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="css/homepage.css">
    <title>宿优圈(∠・ω< )⌒★Showyou circle!</title>
    <link rel="stylesheet" href="loading.css">
    <script>
        $(window).on("load", function(){
            $(".loader").fadeOut();
        });

        // 弹出客服电话
        function showPhoneNumber() {
            alert("客服电话: 123456789"); // 替换为实际的客服电话
        }
    </script>
    <div class="loader"></div>
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/wow.min.js"></script>
    <script>
        new WOW({
            boxClass: 'wow',
            scrollContainer: '#ul',
            offset: 100,
            live: true,
            animateClass: 'bounceInUp'
        }).init();
    </script>
</head>
<body>
    <style>
        .all {
            display: flex; /* 使用 Flexbox */
            flex-direction: row; /* 水平排列 */
            justify-content: center; /* 在主轴上居中 */
            align-items: flex-start; /* 在交叉轴上顶部对齐 */
            width: 50%; /* 设置宽度为60% */
            margin: 0 auto; /* 使容器居中 */
        }

        .carousel {
            width: 50%; /* 设置轮播图宽度为50% */
            margin-right: 20px; /* 右侧留出间距 */
        }
        .left{
            width: 50%;
            margin-right: 20px;
            position: relative;
            width: 736px; /* 设置宽度为736px */
            float: left; /* 使轮播图浮动到左侧 */
            margin-right: 20px; /* 右侧留出间距 */
        }
        .homestay-container {
            width: 50%; /* 设置民宿列表宽度为50% */
            display: flex;
            flex-direction: column; /* 垂直排列 */
            align-items: flex-start; /* 左对齐 */
        }

        /* 轮播图样式 */
        .carousel {
            top: 42px;
            position: relative;
            width: 736px; /* 设置宽度为736px */
            height: 409px; /* 设置高度为409px */
            overflow: hidden;
            float: left; /* 使轮播图浮动到左侧 */
            margin-right: 20px; /* 右侧留出间距 */
            margin-bottom: 10px; /* 向下留出10px的间隔 */
        }
        .map-container{
            width: 100%;
            height: 500px;
            border: none;
            position: relative;
            top:50px;
        }
        .carousel img {
            width: 100%;
            height: 100%; /* 高度自适应 */
            object-fit: cover; /* 保持图片比例 */
        }
        .carousel .slides {
            display: flex;
            transition: transform 0.5s ease;
        }
        .carousel .slide {
            min-width: 100%;
        }
        .carousel .controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }
        .carousel .control {
            background-color: rgba(255, 255, 255, 0.5);
            border: none;
            cursor: pointer;
            padding: 10px;
        }
    </style>

    <style>
        .homestay-container {
            position: relative; /* 设置为相对定位 */
            top: 25px; /* 设置上边距 */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-left: 20px; /* 留出空间给轮播图 */
        }
        .pas_item {
            width: 266px; /* 设置宽度为266px */
            display: flex; /* 使用 Flexbox */
            flex-direction: column; /* 垂直排列 */
            justify-content: space-between; /* 在垂直方向上分散对齐 */
            margin-bottom: 20px; /* 列间距 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
            border-radius: 8px; /* 圆角 */
            overflow: hidden; /* 防止内容溢出 */
        }
        .pas_link {
            display: flex; /* 使用 Flexbox */
            flex-direction: column; /* 垂直排列 */
            height: 100%; /* 设置高度为100%以填满父容器 */
            text-decoration: none; /* 去掉链接下划线 */
        }
        .pas_image-container {
            height: 200px; /* 固定高度 */
            overflow: hidden; /* 防止图片溢出 */
        }
        .pas_image {
            width: 100%; /* 图片宽度100% */
            height: auto; /* 高度自适应 */
            transition: transform 0.3s; /* 添加过渡效果 */
        }
        .pas_image-container:hover .pas_image {
            transform: scale(1.05); /* 悬停时放大效果 */
        }
        .pas_info {
            padding: 10px; /* 内边距 */
        }
        .wow.bounceInUp {
            width: 100%; /* 确保动画元素宽度为100% */
        }
        body, html {
            margin: 0;       /* 添加 margin: 0 */
            padding: 0;
            overflow: hidden;
            height: 100%;
        }
    </style>
<header class="not-top-img" id="page-header">
    <nav id="nav" class="show">
        <div id="nav-group">
      <span id="blog_name">
        <a href="/homepage.jsp">
            <img src="images/logo3.png" id="logo1" style="position: absolute; top: 10px; left: 300px; z-index: 3;"  />
        </a>
      </span>
            <div id="menus" style="position: relative; top: 25px;">
                <div class="menus_items">
                    <div class="menus_item">
                        <a class="site-page" href="javascript:void(0);" draggable="false" data-pjax-state="">
                            <span> 民宿优选</span>
                        </a>
                        <ul class="menus_item_child" style="background: #ffffff;">
                            <li>
                                <a class="site-page child faa-parent animated-hover" href="/list.jsp" draggable="false" data-pjax-state="">
                                    <i class="anzhiyufont anzhiyu-icon-shapes faa-tada" style="font-size: 0.9em;"></i>
                                    <span> 民宿列表</span>
                                </a>
                            </li>
                            <li>
                                <a class="site-page child faa-parent animated-hover" href="/bookingList" draggable="false" data-pjax-state="">
                                    <i class="anzhiyufont anzhiyu-icon-shapes faa-tada" style="font-size: 0.9em;"></i>
                                    <span> 我的预约</span>
                                </a>
                            </li>
                            <li>
                                <a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="/collect" draggable="false">
                                    <i class="anzhiyufont anzhiyu-icon-dice-d20 faa-tada" style="font-size: 0.9em;"></i>
                                    <span> 收藏民宿</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="menus_item">
                        <a class="site-page" href="javascript:void(0);" draggable="false" data-pjax-state="">
                            <span> 宿优社区</span>
                        </a>
                        <ul class="menus_item_child" style="background: #ffffff;">
                            <li>
                                <a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="/read.jsp" draggable="false">
                                    <i class="anzhiyufont anzhiyu-icon-comments faa-tada" style="font-size: 0.9em;"></i>
                                    <span> 旅游攻略</span>
                                </a>
                            </li>
                            <li>
                                <a class="site-page child faa-parent animated-hover" target="_blank" rel="noopener" href="https://s.miku.cyou/2" draggable="false">
                                    <i class="anzhiyufont anzhiyu-icon-paper-plane faa-tada" style="font-size: 0.9em;"></i>
                                    <span> 宿优动态</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="menus_item">
                        <a class="site-page" href="javascript:void(0);" draggable="false" data-pjax-state="">
                            <span> 问宿优优</span>
                        </a>
                        <ul class="menus_item_child" style="background: #ffffff;">
                            <li>
                                <a class="site-page child faa-parent animated-hover" href="javascript:void(0);" draggable="false" data-pjax-state="">
                                    <i class="anzhiyufont anzhiyu-icon-link faa-tada" style="font-size: 0.9em;"></i>
                                    <span id="run-app"> 优优妙答</span>
                                </a>
                                <script>
                                    document.getElementById('run-app').addEventListener('click', function() {
                                        // 添加状态检查
                                        let checkCount = 0;
                                        const maxChecks = 10;

                                        function checkService() {
                                            fetch('http://127.0.0.1:7860')
                                                .then(response => {
                                                    if (response.ok) {
                                                        window.open('http://127.0.0.1:7860', '_blank');
                                                    } else {
                                                        retryOrFail();
                                                    }
                                                })
                                                .catch(() => retryOrFail());
                                        }

                                        function retryOrFail() {
                                            checkCount++;
                                            if (checkCount < maxChecks) {
                                                console.log(`第 ${checkCount} 次检查失败，2秒后重试...`);
                                                setTimeout(checkService, 2000);
                                            } else {
                                                alert("无法连接到Gradio服务，请检查服务器日志");
                                            }
                                        }

                                        fetch('/run-app', {
                                            method: 'POST'
                                        })
                                        .then(response => response.json())
                                        .then(data => {
                                            if (data.status === "success") {
                                                console.log("开始检查服务...");
                                                setTimeout(checkService, 2000);
                                            } else {
                                                alert("运行失败: " + data.message);
                                            }
                                        })
                                        .catch(error => {
                                            console.error('错误:', error.toString());
                                            alert("请求失败，请检查服务器状态");
                                        });
                                    });
                                </script>
                            </li>
                        </ul>
                    </div>
                    <div class="menus_item">
                        <a class="site-page" href="javascript:void(0);" draggable="false" data-pjax-state="">
                            <span> 在线客服</span>
                        </a>
                        <ul class="menus_item_child" style="background: #ffffff;">
                            <li>
                                <a class="site-page child faa-parent animated-hover" href="javascript:void(0);" onclick="showPhoneNumber()" draggable="false">
                                    <i class="anzhiyufont anzhiyu-icon-link faa-tada" style="font-size: 0.9em;"></i>
                                    <span>客服电话</span>
                                </a>
                            </li>
                            <li>
                                <a class="site-page child faa-parent animated-hover" href="customer_service.jsp" target="_blank" rel="noopener" draggable="false">
                                    <i class="anzhiyufont anzhiyu-icon-plant-fill faa-tada" style="font-size: 0.9em;"></i>
                                    <span>客服中心</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>
<div class="all">
    <div class="left">
    <div class="carousel" style="border-radius: 12px">
        <div class="slides">
            <div class="slide"><img src="rotating_chart/1.jpg" alt="Image 1"></div>
            <div class="slide"><img src="rotating_chart/2.jpg" alt="Image 2"></div>
            <div class="slide"><img src="rotating_chart/3.jpg" alt="Image 3"></div>
            <div class="slide"><img src="rotating_chart/4.jpg" alt="Image 4"></div>
            <!-- 添加更多图片 -->
        </div>
        <div class="controls">
            <button class="control" onclick="prevSlide()">❮</button>
            <button class="control" onclick="nextSlide()">❯</button>
        </div>
    </div>
    <div class="map-container">
        <iframe src="map.html" style="width: 100%;height: 430px;border-radius: 12px"></iframe>
    </div>
    </div>
    <script>
        let currentIndex = 0;

        function showSlide(index) {
            const slides = document.querySelector('.slides');
            const totalSlides = document.querySelectorAll('.slide').length;
            if (index >= totalSlides) {
                currentIndex = 0;
            } else if (index < 0) {
                currentIndex = totalSlides - 1;
            } else {
                currentIndex = index;
            }
            slides.style.transform = 'translateX(' + (-currentIndex * 100) + '%)';
        }

        function nextSlide() {
            showSlide(currentIndex + 1);
        }

        function prevSlide() {
            showSlide(currentIndex - 1);
        }
        // 自动轮播
        setInterval(nextSlide, 5000); // 每5秒切换一次
    </script>
<div class="homestay-container">
    <style>
        ol, ul, li {
            list-style: none;
        }
        ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
            unicode-bidi: isolate;
        }
        #ul{
            max-height: 900px; /* 设置最大高度 */
            overflow-y: scroll; /* 允许垂直滚动 */
        }
    </style>
    <ul id="ul">
        <%
            Connection conn = null;
            Statement stmt = null;
            ResultSet rs = null;
            try {
                Class.forName("com.mysql.cj.jdbc.Driver");
                conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/showyou_circle", "root", "123456");
                stmt = conn.createStatement();
                String sql = "SELECT * FROM homestay_info";
                rs = stmt.executeQuery(sql);

                if (!rs.isBeforeFirst()) { // 检查 ResultSet 是否为空
                    out.println("<li>没有找到任何民宿信息</li>");
                } else {
                    while (rs.next()) {
                        int id = rs.getInt("homestay_id");
                        String name = rs.getString("name");
                        String image = rs.getString("image");
                        int star = rs.getInt("star");
                        int price = rs.getInt("price");
                        int commentAmount = rs.getInt("comment_amount");
        %>
        <section class="wow bounceInUp" data-wow-offset="100">
                        <li class="pas_item">
                            <a class="pas_link" href="Booking.jsp?id=<%=id%>"> <!-- 修改链接地址 -->
                                <div class="pas_image-container">
                                    <img class="pas_image" alt="<%= name %>" src="listImages/<%= image %>">
                                </div>
                                <div class="pas_info">
                                    <h3 class="pas_name"><%= name %></h3>
                                    <img class="pas_level" alt="" src="https://webresource.c-ctrip.com/ResH5HotelOnline/R1/hotel_detail_icon_star<%= star %>_20180824.png">
                                    <div class="pas_review">
                                        <span><span class="pas_score"><%= star %><em class="pas_total">/5</em></span><span class="pas_rating">超棒</span></span>
                                    </div>
                                    <div class="pas_comment">
                                        <div><%= commentAmount %>条点评</div>
                                        <div class="pas_price">¥<span class="pas_num"><%= price %></span></div>
                                    </div>
                                </div>
                            </a>
                        </li>
        </section>
        <%
                    }
                }
            } catch (Exception e) {
                e.printStackTrace(); // 输出异常信息
            } finally {
                if (rs != null) try { rs.close(); } catch (SQLException e) {}
                if (stmt != null) try { stmt.close(); } catch (SQLException e) {}
                if (conn != null) try { conn.close(); } catch (SQLException e) {}
            }
        %>
    </ul>
</div>
</div>
</body>
</html>
1735483355171 ![Uploading 1735483373407.png…]()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@menghan465