如何创建滚动按钮?

时间:2014-10-03 07:12:59

标签: javascript html5 horizontal-scrolling

我在横向网站上工作。我想创建2个按钮(左按钮和右按钮),可以帮助用户向左和向右滚动。

The site that I'm working on

我想创建的功能是,当我鼠标悬停按钮时,页面将开始并继续滚动操作,直到鼠标离开按钮然后页面停止滚动。

我从codepen" http://goo.gl/uTQdzD"中找到了一些东西。这与我想要的类似,但这不是我想要的功能。它需要继续点击它只能它可以继续滚动,一旦它点击它然后它只移动一定的像素距离然后停止然后再次点击...即使我试图改变为鼠标悬停,同样的事情..我必须将鼠标移入和移出按钮,只有它可以继续滚动页面。

我不是专业的网络编码人员或开发人员,而只是一个新人。我希望有人可以帮助我。

提前致谢。

1 个答案:

答案 0 :(得分:0)

在这里:http://codepen.io/caseybaggz/pen/uBysA?editors=001

我将.click更改为您正在寻找的mouseenter事件。此外,由于step变量被分配400,您注意到的增量正在发生。所以,我只是将400替换为wWidth并在mouseenter函数内,告诉它滚动bodyWidth

我不完全确定你为什么要这样做?网页设计的自然流程是垂直设计/建立网站。让用户水平滚动对于UX来说有点尴尬,可能被认为是糟糕的设计......特别是现在设备开始发挥作用。

在进入开发网站之前,请务必先学习网页设计和用户体验标准。它不仅有助于改善网络,还有助于改善用户体验。 ;)

希望这会有所帮助并祝你好运!