javascript - 如何在js和css3中实现鼠标点击滚动图片

Question

我想做这样的事情http://www.romeoshagba.com/#1请帮忙。

这是我的代码

CSS 代码

.gree
{
background: #333;
width: max-content;
 white-space: nowrap;
height:38em;
position: relative;
overflow-y: hidden;
overflow-x: auto;
}
.gree img
{
height:100%;
display: inline-block;
margin: 10px;
}

这是从数据库中获取图像的 php 文件示例

<div class="gree padding_20-bottom">

        <?php
        $query2 = mysql_query("SELECT * FROM photos ORDER BY rand() DESC LIMIT 30");
      {

    while($row2 = mysql_fetch_assoc($query2))
    {
         $photo2 = $row2['photo_link'];

         echo"<img src='$photo2'>";
    }
      }
    ?>

    </div>

我的主要问题是获取鼠标位置和单击以使下一张图像居中

Answer 1

如果你分享代码会更容易帮助你

无论如何你可以试试这个:

1. 将所有图像水平排列(您可以使用 float left)在容器中并设置溢出值隐藏

2. 将容器分成两部分(算一下)。使用 javascript 查找光标位置或尝试使用 jquery mouse wheel .如果光标位于左侧容器中，则自定义光标图像以指向左侧，反之亦然。

3. 每次点击都会将容器移动到一些像素。