Jquery Simplyscroll 在容器/剪辑中添加左右图像

Question

我正在使用 Jquery Simplyscroll (http://logicbox.net/jquery/simplyscroll/)，我正在寻找一种方法来在左侧和右侧添加图像(褪色的 png)以避免我的图像被滑过就“切断”。

我的滚动条代码:

    <script type="text/javascript">
    (function($) {
        $(function() {
            $("#scroller").simplyScroll();
        });
    })(jQuery);
    </script>

    <ul id="scroller">
      <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li>
        <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li>
        <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080513_VPJWVQRW_tb.jpg" width="290" height="200" alt="Firehouse bar"></li>
        <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080514_B1YJ08B6_tb.jpg" width="290" height="200" alt="Firehouse chloe club fishtank"></li>
        <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080514_JYW68XPT_tb.jpg" width="290" height="200" alt="Firehouse restaurant"></li>
        <li><img src="http://logicbox.net/jquery/simplyscroll/assets/20080608_38CG51J2_tb.jpg" width="290" height="200" alt="Firehouse"></li>
    </ul>

要实现这一目标，最佳实践/方法是什么？

一些建议将不胜感激。

谢谢，帕特里克

Answer 1

我找到了一个临时解决方案:

    .mask {
         -webkit-mask: -webkit-linear-gradient(
              left,
             rgba(255,255,255,0),
             rgba(255,255,255,1) 5%,
             rgba(255,255,255,1) 95%,
             rgba(255,255,255,0)
         );