Javascript 基于鼠标坐标的点击显示图像功能_Javascript_Html_Css

Javascript 基于鼠标坐标的点击显示图像功能

javascript html css

Javascript 基于鼠标坐标的点击显示图像功能,javascript,html,css,Javascript,Html,Css,用户应该单击页面上的任意位置，以使图像在用户在页面内单击的精确坐标处弹出一切都很好，但我希望单击功能不仅适用于屏幕100vh的视口单位，而且适用于整个页面长度，直到用户到达页面底部修复代码的宝贵帮助 $(window).scroll(function () { var percent = $(document).scrollTop() / ($('body').height() / 3); $('#scrollDown').css('opacity', 1 - percent); }

用户应该单击页面上的任意位置，以使图像在用户在页面内单击的精确坐标处弹出

一切都很好，但我希望单击功能不仅适用于屏幕100vh的视口单位，而且适用于整个页面长度，直到用户到达页面底部

修复代码的宝贵帮助

$(window).scroll(function () {
  var percent = $(document).scrollTop() / ($('body').height() / 3);
  $('#scrollDown').css('opacity', 1 - percent);
}); 
const images = [ 

//1japansimbol
"https://www.shareicon.net/data/512x512/2015/09/25/646301_japan_512x512.png",
//2snoopy
"https://ufopedia.it/images/8/8a/Snoopy.png",
//3murakami 
"http://media-s3-us-east-1.ceros.com/hype-beast/images/2018/06/07/3a06f1fdf6a3a13e86de84d686fe7eec/flower-04.png",
//4stussylogo 
"https://upload.wikimedia.org/wikipedia/en/1/1d/Stussy_Logo.svg",
//5 
"https://pngimage.net/wp-content/uploads/2018/06/kaws-png.png",

                            ]
const box = document.querySelector('.place-on-click')

let i = 0;

var x_bleed_right,
    x_bleed_left,
    y_bleed_bottom,
    y_bleed_top;
const scale = 0.4;

function placeImage(x,y) {
  const nextImage = images[i]
  const img = document.createElement('img')
  img.setAttribute('src', nextImage)

  // get image width and height before it is appended
  var img_width, img_height;
  const img_load = new Image();

  img_load.addEventListener('load', function(e) {
      img_width = img_load.width * scale;
      img_height = img_load.height * scale;

      // calculate how many pixels is bleeding
      x_bleed_right =   (x - img_width / 2 )  + img_width   - box.offsetWidth;
      x_bleed_left =    (x - img_width / 2 );
      y_bleed_bottom =  (y - img_height / 2 ) + img_height  - box.offsetHeight;
      y_bleed_top =     (y - img_height / 2 );

      // console.log(x_bleed_right, x_bleed_left)

      img.style.position = 'absolute'

      if (x_bleed_right > 0) {
        img.style.left = box.offsetWidth - (img_width / 2) + 'px'
      } else if (x_bleed_left < 0) {
        img.style.left = (img_width / 2) + 'px'
      } else {
        img.style.left = x + 'px'
      }

      if (y_bleed_bottom > 0) {
        img.style.top = box.offsetHeight - (img_height / 2) + 'px'
      } else if (y_bleed_top < 0) {
        img.style.top = (img_height / 2) + 'px'
      } else {
        img.style.top = y + 'px'
      }

      img.style.transform = 'translate(-50%, -50%) scale('+scale+')'
      img.style.pointerEvents = 'none';

      box.appendChild(img)
  });
  img_load.src = nextImage;


  i = i + 1
  if ( i >= images.length) {
    i = 0
  }
}

box.addEventListener("click", function(event) {
event.preventDefault()
 const posLeft = event.pageX - box.offsetLeft
 const posTop = event.pageY - box.offsetTop
placeImage(posLeft, posTop)

})

JS小提琴：

JSFIDLE:

因为它们都是用正确的z索引值绝对定位的，所以可以通过将div与class一起移动来实现这一点

HTML:

箱子的固定位置是否可行？但是，您可能需要将框中的内容拉出到同级节点中。实际上并不需要@Ben，我需要图像粘贴到用户单击的位置，并在内容向下滚动时再次滚动。我认为您可以使用一个元素来实现这一点，该元素使您能够获取视口文档中单击的位置。onclick？，再加上调用页面内容容器的getBoundingClientRect，以及一点数学知识。但可能有更好的办法@没错，现在工作得很好！很高兴听到：

.place-on-click {
  height:100%;
  background-color:red;
  position:absolute;
  z-index:26;
  top:0; bottom:0; left:0; right:0;

}

#container-intro
{ position:relative;
  align-items: center;
  background-color: black;
  width:100%;
  z-index:25;

}

#svg-container
{ position:relative;
  display: flex;
  align-items: center;
  height: 100vh;
  width:100%;
  z-index:25;
  margin:0;padding:0;
}
@media (max-width: 450px) {
#svg-container{       height: 90vh;
  }}





body {
overflow-x: hidden; 
    font-family: Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    margin: 0 0 20px 0;


}

ul, li {
  list-style: none; }

a {
  color: unset;
  text-decoration: none; }

img {
  max-width: 100%; }

:root {
  --sm-font-size: 1vw;
  --md-font-size: 3vw;
  --base-font-size: 12.3vw;
  --base-letter-spacing: -0.5vw;
  --base-line-height: 0.8;
  --active-area-offset: 0.075;
  --primary-font: "Gino Nord", Helvetica, Arial, sans-serif;
  --secondary-font: "Gino Normal", Helvetica, Arial, sans-serif;
 /* --primary-color:white;
  --secondary-color: white;*/
  --quick-delay: 250ms;
  --long-delay: 1000ms;
  --long-duration: 500ms;
  --lg-padding: 15vw;
  --md-padding: calc(12.3vw * 0.8);
  --sm-padding: 0.25em; }
  @media (max-width: 900px) {
    :root {
      --sm-font-size: 3vw;
      --md-font-size: 4.5vw; } }

::selection {
  color: var(--primary-color); }

html { 
   cursor: pointer;
  font-size: var(--base-font-size);
  font-family: var(--primary-font);
  font-weight: bold;
  line-height: var(--base-line-height);
  letter-spacing: var(--base-letter-spacing);
  color: white;
  text-align: center;
  font-kerning: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-left: -0.75vw; }

  @media (max-width: 900px) {
    html {
      -webkit-text-stroke: 0.015em var(--primary-color); } }

/*a {
  text-decoration: none; }
  a:hover {
    color: var(--primary-color);
    text-decoration: underline; }*/


main{
background-color:red;z-index:22;position: absolute;   text-transform: uppercase;}


div.scrolling-limit{
  width: 100%;
  height:auto;
  color: white;
  background-color: red;
  overflow:hidden;
  white-space:nowrap;


  font-family:helvetica;
  font-weight:600;
  letter-spacing:-5px;
    color:black;
    /*top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);*/
    font-size: 26vw;
  text-transform:lowercase;

z-index:24;
  position: absolute;
  font-weight:600;

}

div.scrolling{
  position: absolute;
  -webkit-animation: scroll 20s infinite linear;;
  -moz-animation: scroll 20s infinite linear;
  -o-animation: scroll 20s infinite linear;
  animation: scroll 20s infinite linear;
}

@keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}
@-webkit-keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}

<div class="place-on-click">CLICK </div> 

   <main>
        <header class="About About--primary">
            <p class="About-description u-fadeIn--long" data-roll="body" itemprop="description">
<br><br><br><br>
                      <span class="u-line">LAST ORGY</span>
                <span class="u-line">THE ARCHIVE</span>
<br><br>
  <span class="u-line">company</span>
                <span class="u-line">based in</span>
                <span class="u-line">Brooklyn</span>
                <span class="u-line">New York.</span>
                <span class="u-line">We help</span>
                <span class="u-line">startups</span>
                <span class="u-line">become</span>
                <span class="u-line">icons and</span>
                <span class="u-line">help icons</span>
                <span class="u-line">behave</span>
                <span class="u-line">more like</span>
                <span class="u-line">startups.</span>
            </p>

        </header>

        <div class="About About--secondary u-fadeIn--long" itemprop="subOrganization" itemscope itemtype="http://schema.org/Organization">

            <h2 class="About-title" data-roll="title" itemprop="name">
                <span class="u-line">Front &</span>
                <span class="u-line">Center</span>
            </h2>

            <p class="About-description" data-roll="body" itemprop="description">
                <span class="u-line">is the first</span>
                <span class="u-line">design and</span>

            </p>

        </div>

        <footer class="About About--contact">

            <ul class="ContactList" data-roll="body">


                   <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                       Shop (soon)
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                      Collaboration (soon)
                    </a>
                </li>




                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="email" href="mailto:hello@center.design">
                        Email
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                        Instagram
                    </a>
                </li>


                <li class="ContactList-item ContactList-item--address">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="http://maps.google.com/?q=61 Greenpoint Ave. #304A Brooklyn, NY 11222">
                        61 Greenpoint Ave. #304A
                        <br> Brooklyn, NY 11222
                    </a>
                </li>

            </ul>

            <span class="Copyright">
                © Last Orgy Archive
            </span>

        </footer>

    </main>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
<!----INTRO-->  


   <main>
   <div class="place-on-click">CLICK </div> 
        <header class="About About--primary">
            <p class="About-description u-fadeIn--long" data-roll="body" itemprop="description">
<br><br><br><br>
                      <span class="u-line">LAST ORGY</span>
                <span class="u-line">THE ARCHIVE</span>
<br><br>
  <span class="u-line">company</span>
                <span class="u-line">based in</span>
                <span class="u-line">Brooklyn</span>
                <span class="u-line">New York.</span>
                <span class="u-line">We help</span>
                <span class="u-line">startups</span>
                <span class="u-line">become</span>
                <span class="u-line">icons and</span>
                <span class="u-line">help icons</span>
                <span class="u-line">behave</span>
                <span class="u-line">more like</span>
                <span class="u-line">startups.</span>
            </p>

        </header>

        <div class="About About--secondary u-fadeIn--long" itemprop="subOrganization" itemscope itemtype="http://schema.org/Organization">

            <h2 class="About-title" data-roll="title" itemprop="name">
                <span class="u-line">Front &</span>
                <span class="u-line">Center</span>
            </h2>

            <p class="About-description" data-roll="body" itemprop="description">
                <span class="u-line">is the first</span>
                <span class="u-line">design and</span>

            </p>

        </div>

        <footer class="About About--contact">

            <ul class="ContactList" data-roll="body">


                   <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                       Shop (soon)
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                      Collaboration (soon)
                    </a>
                </li>




                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="email" href="mailto:hello@center.design">
                        Email
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                        Instagram
                    </a>
                </li>


                <li class="ContactList-item ContactList-item--address">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="http://maps.google.com/?q=61 Greenpoint Ave. #304A Brooklyn, NY 11222">
                        61 Greenpoint Ave. #304A
                        <br> Brooklyn, NY 11222
                    </a>
                </li>

            </ul>

            <span class="Copyright">
                © Last Orgy Archive
            </span>

        </footer>

    </main>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

.place-on-click {
  height:100%;
  background-color:transparent;
  position:absolute;
  z-index:26;
  top:0; bottom:0; left:0; right:0;

}

#container-intro
{ position:relative;
  align-items: center;
  background-color: black;
  width:100%;
  z-index:25;

}

#svg-container
{ position:relative;
  display: flex;
  align-items: center;
  height: 100vh;
  width:100%;
  z-index:25;
  margin:0;padding:0;
}
@media (max-width: 450px) {
#svg-container{       height: 90vh;
  }}


body {
overflow-x: hidden; 
    font-family: Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    margin: 0 0 20px 0;


}

ul, li {
  list-style: none; }

a {
  color: unset;
  text-decoration: none; }

img {
  max-width: 100%; }

:root {
  --sm-font-size: 1vw;
  --md-font-size: 3vw;
  --base-font-size: 12.3vw;
  --base-letter-spacing: -0.5vw;
  --base-line-height: 0.8;
  --active-area-offset: 0.075;
  --primary-font: "Gino Nord", Helvetica, Arial, sans-serif;
  --secondary-font: "Gino Normal", Helvetica, Arial, sans-serif;
 /* --primary-color:white;
  --secondary-color: white;*/
  --quick-delay: 250ms;
  --long-delay: 1000ms;
  --long-duration: 500ms;
  --lg-padding: 15vw;
  --md-padding: calc(12.3vw * 0.8);
  --sm-padding: 0.25em; }
  @media (max-width: 900px) {
    :root {
      --sm-font-size: 3vw;
      --md-font-size: 4.5vw; } }

::selection {
  color: var(--primary-color); }

html { 
   cursor: pointer;
  font-size: var(--base-font-size);
  font-family: var(--primary-font);
  font-weight: bold;
  line-height: var(--base-line-height);
  letter-spacing: var(--base-letter-spacing);
  color: white;
  text-align: center;
  font-kerning: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-left: -0.75vw; }

  @media (max-width: 900px) {
    html {
      -webkit-text-stroke: 0.015em var(--primary-color); } }

/*a {
  text-decoration: none; }
  a:hover {
    color: var(--primary-color);
    text-decoration: underline; }*/


main{
background-color:red;z-index:22;position: absolute;   text-transform: uppercase;}


div.scrolling-limit{
  width: 100%;
  height:auto;
  color: white;
  background-color: red;
  overflow:hidden;
  white-space:nowrap;


  font-family:helvetica;
  font-weight:600;
  letter-spacing:-5px;
    color:black;
    /*top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);*/
    font-size: 26vw;
  text-transform:lowercase;

z-index:24;
  position: absolute;
  font-weight:600;

}

div.scrolling{
  position: absolute;
  -webkit-animation: scroll 20s infinite linear;;
  -moz-animation: scroll 20s infinite linear;
  -o-animation: scroll 20s infinite linear;
  animation: scroll 20s infinite linear;
}

@keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}
@-webkit-keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}