【问题标题】:JQuery: thumbnails scroll automatically based on mouse positionJQuery:缩略图根据鼠标位置自动滚动
【发布时间】:2011-08-23 08:24:18
【问题描述】:
我正在尝试使一行缩略图在其 DIV 内根据鼠标的位置自动滚动。我找到了我在here 之后的示例,但无法提取/编辑 JavaScript 以使其正常工作。 Here 是我失败的尝试。 :(
我需要父 DIV 来填充页面的整个宽度(即 100%)。最后,如果我做对了,我想在一个页面上添加多个自动滚动缩略图 DIV。
对不起,如果代码不好,我的 JavaScript 知识糟糕。
【问题讨论】:
标签:
jquery
thumbnails
autoscroll
【解决方案1】:
虽然你的 javascript 和 perl 变量混杂在一起,但你已经非常接近了。
一些注意事项:
$ 用作jQuery 的别名。因此,$() 与 jQuery() 相同。它不是 perl 中的变量标识符。
$div 应该是$('div'),但如果你马上要打电话给children() 或find(),它不是很有用。而是做$('div.album')
不是使用63 * number_of_elements 计算宽度,而是使用jQuery 使用.outerWidth(true) 获取它们的实际宽度。 true 表示它包含边距。
这是一个基于您的代码的工作示例:
http://jsfiddle.net/jtbowden/BAjQB/
我添加了变量 leftBuffer 和 rightBuffer 来限制滚动,这样您就不必在最边缘的像素上一直向左/向右滚动。