个人中心
gpt4 book ai didi

javascript - 在更改图像或重新加载页面时将页面保持在一个位置？

转载 作者：可可西里 更新时间：2023-10-31 23:38:32 28 4
gpt4 key购买 nike

我已经检查过这个站点是否存在相同类型的问题，但我不想在不重新加载页面的情况下更改此项目上的图像 - 它需要重新加载。虽然当我点击 next 或 previous 按钮时，页面会像它应该做的那样再次跳到顶部，但有没有办法解决这个问题，以便当用户点击页面重新加载屏幕上的图像而不是用户每次都必须向下滚动的下一张图像？这是我的脚本:

$albumName = "Our Gallery"; // Name your album!

/*
 * Installation:
 * 1.) Place your photos into the images directory.
 *      - Photos will be displayed in alphabetical order.
 * 2.) Rename the "basic-php-photo-album" folder to anything you wish.
 *      - Example: paris-photo-album
 * 3.) Upload the renamed folder and all of its contents to your server.
 *      
 * That's it! Make multiple albums by repeating the above 3 steps.
 */

/*
 * You shouldn't need to change anything beyond this.
 *
 */

$p = $_GET['p'];
if ($handle = opendir("uploads")) {
    $i = 1;
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {
            $img[$i] = $file;
            if ($p == $img[$i]) {
                $ci = $i;
            }
            $i++;
        }
    }
    closedir($handle);
    $ti = $i - 1;
    $pi = $ci - 1;
    if ($p == "") {
        $ni = $ci + 2;
    } else {
        $ni = $ci + 1;
    }
    $prevNext = "";
    if ($pi > 0) {
        $piFile = $img[$pi];
        $prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $piFile . "\" title=\"Previous image\">Previous &#171</a>";
    } else {
        $prevNext .= "&#171;";
    }
    $prevNext .= " | ";
    if ($ni <= $ti) {
        $niFile = $img[$ni];
        $prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $niFile . "\" title=\"Next image\">&#187 Next</a>";
    } else {
        $prevNext .= "&#187;";
    }
    if ($p == "") {
        $p = $img[1];
    }
}
?> 

<!DOCTYPE HTML>
<html>
<head>
<title>Dave's Caravan Lettings</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Hire our Deluxe Plus Caravan based in Sandy Bay, Exmouth for an easy, great priced family holiday! Comes complete with all required facilities as standard!">
<meta name="keywords" content="Haven,Holidays,Sandy,Bay,Devon,Cliffs,Exmouth,Beach,Caravan,Hire,Rental,Rent,Cheap,Holiday,Family,Entertainment,Daves,Letting,Lettings,Fun,Best,Stay,Nights,Price,Buy">
<meta name="author" content="BaseEnterprises WebDesign">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">

        td, select, input {
            font-family: arial, helvetica, sans-serif;
            font-size: 11px;
        }


        .hRule {
            border-top: 1px solid #cdcdcd;
            margin: 0px 0px 10px 0px;
        }

        img {
            border: 1px solid #333333;
        }

        .nextPrevious {
            font-size: 18px;
            color: #cdcdcd;
            padding-bottom: 15px;
        }

        a, a:visited {
            color: #cc0000;
            text-decoration: none;
        }
        a:active, a:hover {
            color: #cc0000;
            text-decoration: underline;
        }
    </style>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="header-bg">
    <div class="wrap">
        <div class="header">
            <div class="logo">
                <h1><a href="index.html">Dave's Caravan Lettings</a></h1>
            </div>
        </div>
        <div class="header-bot">
            <div class="menu">
                <ul>
                    <li class="home"><a href="index.html">Home</a></li>
                    <li class=""><a href="location.html">Location</a></li>
                    <li class=""><a href="facilities.html">Facilities</a></li>
                    <li class=""><a href="availability.php">Availability</a></li>
                    <li class=""><a href="contact.html">Contact Us</a></li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="wrap">
            <span class="banner-img">
                <img src="images/banner2.jpg" alt=""/>
            </span>
        </div>
    </div>
</div>
<div class="main">
 <div class="wrap">
     <div class="content-bot">
                <h3><?php echo $albumName; ?></h3>
                <p>Images sent to us by previous holiday makers staying in our Caravan... See what it's like yourself by browsing the images below...</p><br></br>
                <div class="inner-top">
                    <div class="section group" align="center">



                <div class="hRule"></div>

<table border="0" cellpadding="0" cellspacing="0" align="center">
    <tr align="center">
        <td class="nextPrevious"><?php echo $prevNext; ?></td>
    </tr>
    <tr align="center">
        <td><img src="uploads/<?php echo $p; ?>" alt="<?php echo $$albumName; ?>" border="0" height="300px" width="400px"></td>
    </tr>
</table>






            </div>
            </div>
                <div class="clear"></div>
            </div>

最佳答案

如果你想自动滚动到底部，这取决于你的图像有多大 - 你可以使用这样的东西:

$(".section group").animate({ scrollTop: $(document).height() }, "fast");
  return false;

然后将其添加到您的页面:

<div class="section group" align="center" style="overflow-y: scroll;height:520px;width:520px 240px">

然后您要做的就是摆弄宽度和高度属性，直到它们与您的设计相匹配。

关于javascript - 在更改图像或重新加载页面时将页面保持在一个位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33997025/

28 4 0
文章推荐： php - 如果 url 在主域之后包含问号，我需要一个 htaccess 规则
文章推荐： node.js - Express.js、Node.js、EJS - 未捕获的语法错误 : Unexpected token <
文章推荐： node.js - 在 openshift 上部署 meteor 8.3 及更高版本
文章推荐： PHP Traits 冲突(trait 参数)
可可西里
个人简介

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

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