如何在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. 对于每点击一次，将容器移动到一些像素。