如何在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. 将所有图像水平排列在容器中（可以使用向左浮动），并设置隐藏的溢出值

2. 将容器分成两个（算术）。 使用javascript查找光标位置或尝试使用jquery鼠标滚轮 。 如果光标位于“左”容器中，请自定义光标图像，反之亦然。

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