1

我已经设置了SmoothDivScroll 插件 1.3我已经在一个页面上的弹出窗口中

简化的初始化函数，触发插件并根据内容长度设置可滚动区域的宽度：

$('.slider').smoothDivScroll({
  hotSpotScrolling: false,
  touchScrolling: true,
  manualContinuousScrolling: true
}).find('.scrollableArea').css('width', count * 140 );

简化标记：

<div class='slider'>
  <div class="portrait" style="background-image: url(img/bios/testing-thumb1.jpg);"></div>
  <div class="portrait" style="background-image: url(img/bios/testing-thumb2.jpg);"></div>
  <div class="portrait" style="background-image: url(img/bios/testing-thumb3.jpg);"></div>
</div>

CSS、'scrollWrapper' 和 'scrollableArea' 都是由插件在初始化时创建的：

.slider { position: absolute; top: 0; left: 0; border-top: 2px solid #000; border-bottom: 2px solid #000; height: 168px; width: 880px; }

.slider .scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; }
.slider .scrollableArea { position: relative; width: auto; height: 100%; }

.slider .portrait { display: block; float: left; padding: 0 5px; width: 130px; height: 168px; position: relative; margin-bottom: 4px; background-position: center top; background-repeat: no-repeat; }
.slider .portrait:hover, .slider .portrait.active { background-position: center bottom; }
.slider .portrait:after { display: none; content: ""; position: absolute; top: 0; left: 5px; height: inherit; width: inherit; pointer-events: none; }
.slider .portrait:hover:after { display: block; background-image: url(../img/popup-about-team-hover.png); }

单击此处查看开发版本 （向下滚动并单击绿色的“检查目录”按钮）

在 Chrome 和 Firefox 中运行良好...但是在 IE（当然）中，您可以向右滚动（单击并拖动到左侧）很好，但是如果您尝试向左滚动（单击并向右拖动），那么浏览器迅速锁定，完全冻结，必须通过任务管理器杀死。

我不完全了解该插件对 DOM 做了什么，以至于无法知道在哪里寻找问题。

我确实有关于插件的另一个问题，与这个 IE 问题无关。如果需要，我可以删除它并作为单独的问题发布：

问）如何使用键盘上的箭头键为此滑块实现左/右滑动？我知道如何将某些东西绑定到键，但我似乎无法弄清楚如何将处理程序转换为插件的操作。

4

1 回答 1

2


我查看了这个问题，发现您的jquery.kineticpresent inside版本plugin.js导致了问题。我不确定为什么会发生这种情况，因为我没有将您的 kinetic.js 版本与 smoothdivscroll.com 上使用的版本进行比较。但是，如果您只是更新您plugin.js的代码以jquery.kinetic用压缩/缩小版本替换代码，http://www.smoothdivscroll.com/js/jquery.kinetic.js那么我相信一切都会正常工作。

请按照以下步骤操作：

    1) 打开 URL http://www.smoothdivscroll.com/js/jquery.kinetic.js 并从那里复制 JS 代码。
    2) 借助 http://javascriptcompressor.com/ 等在线 JS 压缩器；缩小上面复制的代码并将其保存在临时文件中。
    3）打开你的 /js/plugin.js 并注释掉 jquery.kinetic 的现有代码并在那里添加上面的压缩代码。
    4) 运行演示页面，它也可以在 IE 上运行。

谢谢！

于 2013-08-13T09:47:48.090 回答