javascript - 如何减少侧面的不透明度

Question

这是我正在使用的导航库 sly我需要降低屏幕中心到两侧元素的不透明度，但我不知道如何处理它，像这样: 另外，正如您在代码片段中看到的那样，设置“itemNav:'forceCentered'”，由于某种原因，它在滚动时将帧的开始和结束与窗口的两侧分开太多，滚动时应该看起来像这样直到两侧:code snippet ，如您所见，元素会弹到两边。

jQuery(function($) {
  'use strict';

  // -------------------------------------------------------------
  //   Basic Navigation
  // -------------------------------------------------------------
  (function() {
    var $frame = $('#basic');
    var $slidee = $frame.children('ul').eq(0);
    var $wrap = $frame.parent();

    // Call Sly on frame
    $frame.sly({
      horizontal: 1,
      itemNav: 'forceCentered',
      smart: 1,
      activateMiddle: true,
      activateOn: 'click',
      mouseDragging: 1,
      touchDragging: 1,
      releaseSwing: 1,
      startAt: 3,
      scrollBar: $wrap.find('.scrollbar'),
      scrollBy: 1,
      pagesBar: $wrap.find('.pages'),
      activatePageOn: 'click',
      speed: 300,
      elasticBounds: 1,
      easing: 'easeOutExpo',
      dragHandle: 1,
      dynamicHandle: 1,
      clickBar: 1
    });
  }());
});

.wrap {
  position: relative;
 }
.frame {
  overflow: hidden;
}
.clearfix {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
li {
  float: left;
  width: 227px;
  height: 100%;
  margin: 0 1px 0 0;
  padding: 0;
  background: #333;
  color: #ddd;
  text-align: center;
  cursor: pointer;
  opacity: 0.7;
  font-size: 50px;
}
li.active {
  opacity: 1;
}

<div class="wrap">
  <div class="frame" id="basic">
    <ul class="clearfix">
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://darsa.in/sly/examples/js/vendor/plugins.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.6.1/sly.min.js"></script>

Answer 1

通过使用active 事件。

循环所有子项并添加类以应用不透明样式。

jQuery(function($) {
  'use strict';

  // -------------------------------------------------------------
  //   Basic Navigation
  // -------------------------------------------------------------
  (function() {
    var $frame = $('#basic');
    var $slidee = $frame.children('ul').eq(0);
    var $wrap = $frame.parent();

    // Call Sly on frame
    $frame.sly({
      horizontal: 1,
      itemNav: 'forceCentered',
      smart: 1,
      activateMiddle: true,
      activateOn: 'click',
      mouseDragging: 1,
      touchDragging: 1,
      releaseSwing: 1,
      startAt: 3,
      scrollBar: $wrap.find('.scrollbar'),
      scrollBy: 1,
      pagesBar: $wrap.find('.pages'),
      activatePageOn: 'click',
      speed: 300,
      elasticBounds: 1,
      easing: 'easeOutExpo',
      dragHandle: 1,
      dynamicHandle: 1,
      clickBar: 1
    });

    $frame.sly('on', 'active', active);
    active(null, 3);
    
    function active(e, idx) {
      $("#ul").find('li').removeClass();
      $("#ul").find('li').each(function(i, elem) {
        setOpacityClass(Math.abs(i - idx), elem);
        if (i == idx) {
          $(elem).addClass('active');
        }
      })
    }

    function setOpacityClass(grad, elem) {
      $(elem).addClass('op-' + grad);
    }

  }());
});

.wrap {
  position: relative;
}
.frame {
  overflow: hidden;
}
.clearfix {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
li {
  float: left;
  width: 227px;
  height: 100%;
  margin: 0 1px 0 0;
  padding: 0;
  background: #333;
  color: #ddd;
  text-align: center;
  cursor: pointer;
  opacity: 0.7;
  font-size: 50px;
}

li.active {
  opacity: 1;
}

li.op-0 {
  opacity: 1;
}
li.op-1 {
  opacity: 0.7;
}
li.op-2 {
  opacity: 0.5;
}
li.op-3 {
  opacity: 0.3;
}
li.op-4 {
  opacity: 0.2;
}
li.op-5 {
  opacity: 0.1;
}

<div class="wrap">
  <div class="frame" id="basic">
    <ul id="ul" class="clearfix">
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://darsa.in/sly/examples/js/vendor/plugins.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.6.1/sly.min.js"></script>