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)
         );

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

1 个答案: