Question

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

这是我的代码

CSS CODE

.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

如果您共享代码

，会更容易为您提供帮助

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

将所有图像水平排列（您可以使用左侧浮动）并将溢出值设置为隐藏
将容器分成两部分（算一算）。使用javascript找到光标位置或尝试使用 jquery mouse wheel。如果光标在左侧容器中，则将光标图像自定义为反之亦然。
每次点击都会将容器移动到某些像素。

如何使用鼠标光标在js和css3中单击实现滚动图像

1 个答案: