搜索
搜索

我希望我的div在调整浏览器大小时移动

Shubhankar Sethi 发表于 Dev
73
Shubhankar Sethi

我为一个朋友的生日制作了一个网站。我使用视差以获得很好的滚动效果来勾勒出她的戒指。但是，圆环仅在全屏（15英寸屏幕）上居中。当我调整页面大小时，圆环不会移动。我希望整个视差div保持居中并在浏览器较小时移动。图像也不会调整大小，它们只会消失在浏览器后面。我知道，如果不按屏幕大小查看页面，页面将会关闭，我们将不胜感激，谢谢！

https://upliftjewelry.org/rings.html

当浏览器的宽度变小，图片被截断且没有任何动作时，它就是这样显示的。

window.addEventListener('scroll', function(e) {

    const target =  document.querySelectorAll('.scroll')
    
    var index = 0, length = target.length;
    for (index; index < length; index++) {
        var pos =  window.pageYOffset * target[index].dataset.rate;

        target[index].style.transform = 'translate3d(0px, '+pos+'px, 0px)';
    }

});

/* Image 1 */

function hideAll() {
    document.body.style.backgroundColor = "#988780";
    document.getElementById("maintitle").style.color = "#e3e3de";
    var sidebar = document.getElementsByClassName("maintext");
    var index = 0;
    length = sidebar.length;
    for (index; index < length; index++) {
        sidebar[index].style.color = "#e3e3de";
    }
}

function showAll() {
    document.body.style.backgroundColor = "#e3e3de";
    document.getElementById("maintitle").style.color = "#265935";
    var sidebar = document.getElementsByClassName("maintext");
    var index = 0;
    length = sidebar.length;
    for (index; index < length; index++) {
        sidebar[index].style.color = "#2B4B42";
    }
}

function hide1(x) {
    document.getElementById("l_img_1").style.opacity = "0";
    hideAll();
}

function show1(x){
    document.getElementById("l_img_1").style.opacity = "1";
    showAll();
}

/* Image 2 */

function hide2(x) {
    document.getElementById("l_img_2").style.opacity = "0";
    hideAll();
}

function show2(x){
    document.getElementById("l_img_2").style.opacity = "1";
    showAll();
}

/* Image 3 */

function hide3(x) {
    document.getElementById("l_img_3").style.opacity = "0";
    hideAll();
}

function show3(x){
    document.getElementById("l_img_3").style.opacity = "1";
    showAll();
}

/* Image 4 */

function hide4(x) {
    document.getElementById("l_img_4").style.opacity = "0";
    hideAll();
}

function show4(x){
    document.getElementById("l_img_4").style.opacity = "1";
    showAll();
}

/* Image 5 */

function hide5(x) {
    document.getElementById("l_img_5").style.opacity = "0";
    hideAll();
}

function show5(x){
    document.getElementById("l_img_5").style.opacity = "1";
    showAll();
}

/* Image 6 */

function hide6(x) {
    document.getElementById("l_img_6").style.opacity = "0";
    hideAll();
}

function show6(x){
    document.getElementById("l_img_6").style.opacity = "1";
    showAll();
}

/* Image 7 */

function hide7(x) {
    document.getElementById("r_img_1").style.opacity = "0";
    hideAll();
}

function show7(x){
    document.getElementById("r_img_1").style.opacity = "1";
    showAll();
}

/* Image 8 */

function hide8(x) {
    document.getElementById("r_img_2").style.opacity = "0";
    hideAll();
}

function show8(x){
    document.getElementById("r_img_2").style.opacity = "1";
    showAll();
}

/* Image 9 */

function hide9(x) {
    document.getElementById("r_img_3").style.opacity = "0";
    hideAll();
}

function show9(x){
    document.getElementById("r_img_3").style.opacity = "1";
    showAll();
}

/* Image 10 */

function hide10(x) {
    document.getElementById("r_img_4").style.opacity = "0";
    hideAll();
}

function show10(x){
    document.getElementById("r_img_4").style.opacity = "1";
    showAll();
}
@font-face { font-family: Bebas; src: url('/Fonts/Bebas_Neue/BebasNeue-Regular.ttf'); }
@font-face { font-family: cormorant; src: url('/Fonts/Cormorant/Cormorant-Medium.ttf'); }
@font-face { font-family: maharlika; src: url('/Fonts/Maharlika-Regular.ttf'); }
@font-face { font-family: poppins; src: url('/Fonts/Poppins/Poppins-Bold.ttf'); }
body {
    background-color: #e3e3de;
}

#maintitle {
    font-family: maharlika;
    color: #265935;
    text-align: center;
}

/* Only for non-index */

#main_title_container {
    position: fixed;
    text-align: center;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    z-index: 1;
}

/* end */

.maintext {
    font-family: cormorant;
    color: #2B4B42;
    writing-mode: vertical-lr;
    text-orientation: sideways;
    padding: 20px;   
    transform: rotate(180deg);
}

.sidebar {
    position: fixed;
    padding-top: 4.5rem;
    margin-top: 7rem;
}

.maintext:hover {
    color: #BF621E;
}

#homepage {
    text-decoration: none;
}

#instaLink {
    text-decoration: none;
}

#abtMel{
    text-decoration: none;
}

#ringpage {
    text-decoration: none;
}

#abrydabout {
    text-decoration: none;
}

#contactinfo {
    text-decoration: none;
}

/* End of Base CSS */

.sidebar_right {
    position: fixed;
    margin-top: 7rem;
    right: 0;
    bottom: 50%;
    margin-bottom: -7rem;
}

#orderInfo {
    text-decoration: none;
}

.parallax_effect {
    position: absolute;
    display: grid;
    grid-template-columns: auto auto;
    padding:0;
    margin:0;
    margin-top: 10rem;
    margin-left: 5rem;
    margin-right: 5rem;
    width: 70rem;
    text-align:center
}

.parallax_effect_left {
    grid-column-start: 1;
    grid-column-end: 2;
    margin-left: 12rem;
    margin-right: 2rem;
    height: 160rem;

}

.parallax_effect_right {
    grid-column-start: 2;
    grid-column-end: 3;
    margin-right: 12rem;
    margin-left: 2rem;
    height: 160rem;
}

#l_img_1 {
    margin-bottom: 15rem;
}

#l_img_2 {
    margin-bottom: 15rem;
}

#l_img_3 {
    margin-bottom: 15rem;
}

#l_img_4 {
    margin-bottom: 15rem;
}

#l_img_5 {
    margin-bottom: 15rem;
}

#l_img_6 {
    margin-bottom: 15rem;
}

#r_img_1 {
    margin-top: 15rem;
    margin-bottom: 15rem;
}

#r_img_2 {
    margin-bottom: 15rem;
}

#r_img_3 {
    margin-bottom: 15rem;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="CSS/rings.css">
        <title>Uplift Jewelry</title>

    </head>
    <body>
        <div id="main_title_container">
            <a id="homepage" href="index.html"><h1 id="maintitle">Uplift Jewelry</h1></a>
        </div>
        

        <div class="sidebar">
            <a id="ringpage" href="rings.html"><h3 class="maintext">Rings</h3></a>
            <a id="abtMel" href="about.html"><h3 class="maintext">About Melina</h3></a>
            <a id="abrydabout" href="abryd.html"><h3 class="maintext">Abryd Morocco</h3></a>
            <a id="instaLink" href="https://www.instagram.com/uplift.jewelry/" target="_blank"><h3 class="maintext">Instagram</h3></a>
            <a id="contactinfo" href="contact.html"><h3 class="maintext">Contact Info</h3></a>
        </div>

        <div class="sidebar_right">
            <a id="orderInfo" href="orderInfo.html"><h3 class="maintext">Ordering Details</h3></a>
        </div>

        <!-- End of Base HTML -->

        <!-- Parallax -->

        <section>
            <div class="parallax_effect">
                <!-- Left -->

                <div class="parallax_effect_left">
                    <img class="scroll" onMouseOver="hide1(this)" onMouseOut="show1(this)" id="l_img_1" data-rate="-1.2" src="https://via.placeholder.com/500">               

                    <img class="scroll" onMouseOver="hide2(this)" onMouseOut="show2(this)" id="l_img_2" data-rate="-1.2" src="https://via.placeholder.com/500">

                    <img class="scroll" onMouseOver="hide3(this)" onMouseOut="show3(this)" id="l_img_3" data-rate="-1.2" src="https://via.placeholder.com/500">

                    <img class="scroll" onMouseOver="hide4(this)" onMouseOut="show4(this)" id="l_img_4" data-rate="-1.2" src="https://via.placeholder.com/500">

                    <img class="scroll" onMouseOver="hide5(this)" onMouseOut="show5(this)" id="l_img_5" data-rate="-1.2" src="https://via.placeholder.com/500">

                    <img class="scroll" onMouseOver="hide6(this)" onMouseOut="show6(this)" id="l_img_6" data-rate="-1.2" src="https://via.placeholder.com/500">
                </div>

                <!-- Right -->

                <div class="parallax_effect_right">
                    <img class="scroll" onMouseOver="hide7(this)" onMouseOut="show7(this)" id="r_img_1" data-rate="-.3" src="https://via.placeholder.com/500">

                    <img class="scroll" onMouseOver="hide8(this)" onMouseOut="show8(this)" id="r_img_2" data-rate="-.3" src="https://via.placeholder.com/500">

                    <img class="scroll" onMouseOver="hide9(this)" onMouseOut="show9(this)" id="r_img_3" data-rate="-.3" src="https://via.placeholder.com/500">

                    <img class="scroll" onMouseOver="hide10(this)" onMouseOut="show10(this)" id="r_img_4" data-rate="-.3" src="https://via.placeholder.com/500">
                </div>
            </div>
        </section>

        <!-- End of Parallax -->

        <script src="JS/rings.js"></script>

    </body>

</html>

怎么样

在您的parallax_effect类中，将宽度更改为100％，而不是70rem。并在滚动类中添加width：100％和height：auto.so您具有：

.parallax_effect {
  position: absolute;
  display: grid;
  grid-template-columns: auto auto;
  padding: 0;
  margin: 0;
  margin-top: 10rem;
  margin-left: 5rem;
  margin-right: 5rem;
  width: 100%; /*change this line*/
  text-align: center;
}
/*add this*/
.scroll{
  width: 100%;
  height: auto;
}

而不是所有这些图像ID，请以滚动类作为页边距。您的代码将更干净。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

调整浏览器大小时我的 div 重叠

当我调整浏览器大小时，我的文字上下移动

HTML5表格-调整浏览器大小时，我只希望某些列调整宽度

调整浏览器大小时，为什么我的div重叠？

重新调整浏览器大小时，我有2个div重叠

调整浏览器窗口大小时，我的图片会在应该放在一起的时候移动

为什么在移动设备上调整浏览器窗口大小时我的网页看起来不同？

元素总是在调整浏览器大小时移动

调整浏览器大小时，大图像会移动

调整浏览器大小时，如何使元素移动更快？

调整浏览器窗口大小时 Div 容器正在移动

在浏览器调整大小时将 div 移动到另一个内部

调整浏览器窗口大小时如何阻止 Div 移动

调整浏览器窗口大小时防止子元素移动到父 div 之外

调整浏览器大小时保持 div 可见

在调整浏览器大小时清除div的“内容”

CSS div 溢出。（调整浏览器大小时）

浏览器调整大小后，为什么我的div不调整大小？

每当调整浏览器窗口屏幕大小时，让我的函数重新执行

调整浏览器大小时如何使我的盒子相应缩放

当我调整浏览器大小时，导航徽标和菜单会互相进入

当我调整浏览器大小时，所有元素都会更改其位置

当我调整浏览器大小时，元素与图像重叠

当浏览器宽度调整大小时，如何防止浮动div在其他浮动div下方移动？

调整浏览器大小时是否调整jqGrid的大小？

为什么调整浏览器大小时svg路径会移动？

调整浏览器大小时，简单的jQuery移动菜单停止工作

调整浏览器大小时，h3元素的文本移动

HTML，在调整浏览器大小时阻止页面上的元素移动

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档