基于js实现ios7滑块特效插件



27 105 36



特效描述:基于js实现 ios7滑块特效,基于js实现ios7滑块特效插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="dist/demo.css" />
<link rel="stylesheet" href="dist/powerange.css" />
<link href="http://fonts.googleapis.com/css?family=Maven+Pro:400" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=News+Cycle" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="dist/powerange.min.js"></script>

3. HTML代码

  <div class="container">
    <section class="content">
      <div class="box">
        <h2>Examples</h2>
        <div class="example">
          <h3>Basic style customization</h3>
          <p>You are free to customize the range slider as much as you wish, using only CSS.</p>
          <p>The width (for horizontal) or height (for vertical) of the slider, depends on the container in which it's placed and take 100%.</p>
          <p>Play around with the <strong>background-color</strong> of <strong>.range-bar</strong> and <strong>.range-quantity</strong>, add a <strong>background-image</strong> to <strong>.range-handle</strong>, add some nice <strong>background-image</strong> to <strong>.range-min</strong> and <strong>.range-max</strong>, get use of the <strong>hideRange</strong> option and you may end up with something as fun as this:</p>
          <div class="slider-wrapper">
            <input type="text" class="js-customized" />
          </div>
          <p>The sky is the limit.</p>
          <p class="note">Hint: Use the <strong>klass</strong> option to add an additional class to the slider and apply different style to it</p>
        </div>
        <div class="example">
          <h3>Minimum, maximum and start values</h3>
          <p>Changing your default <strong>min</strong>, <strong>max</strong> and <strong>start</strong> values is pretty easy. The start value has to be a number in your min-max interval, otherwise it takes the value of either <strong>min</strong> or <strong>max</strong>, depending on which is closer. Negative values are supported as well.</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { min: <span class="boolean">16</span>, max: <span class="boolean">256</span>, start: <span class="boolean">128</span> });</div>
            </div>
          </pre>
          <div class="slider-wrapper">
            <input type="text" class="js-min-max-start" />
          </div>
        </div>
        <div class="example">
          <h3>Decimal</h3>
          <p>Display decimal number with 2 characters after the decimal point.</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { decimal: <span class="boolean">true</span> });</div>
            </div>
          </pre>
          <div class="slider-wrapper">
            <input type="text" class="js-decimal" />
            <label class="display-box-label">Value:</label>
            <div id="js-display-decimal" class="display-box"></div>
          </div>
        </div>
        <div class="example">
          <h3>Slider step</h3>
          <p>You can change the step with which the handle moves, using the <strong>step</strong> option.</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { step: <span class="boolean">10</span> });</div>
            </div>
          </pre>
          <div class="slider-wrapper">
            <input type="text" class="js-step" />
          </div>
        </div>
        <div class="example">
          <h3>Hide range values</h3>
          <p>You can hide the min and max values, by using the <strong>hideRange</strong> option.</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { hideRange: <span class="boolean">true</span> });</div>
            </div>
          </pre>
          <div class="slider-wrapper">
            <input type="text" class="js-hiderange" />
          </div>
        </div>
        <div class="example">
          <h3>Disabled</h3>
          <p>Disable the range slider and change it's default <strong>disabledOpacity</strong> if needeed.</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { disable: <span class="boolean">true</span>, disabledOpacity: <span class="boolean">0.75</span> });</div>
            </div>
          </pre>
          <div class="slider-wrapper">
            <input type="text" class="js-disabled" />
          </div>
        </div>
        <div class="example">
          <h3>Horizontal and vertical slider</h3>
          <p>The default Powerange slider is horizontal. However, you can make it vertical, by setting <strong>vertical: true</strong>.</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { vertical: <span class="boolean">true</span> });</div>
            </div>
          </pre>
          <div class="slider-wrapper vertical-wrapper">
            <input type="text" class="js-vertical" />
          </div>
        </div>
        <div class="example">
          <h3>Checking state</h3>
          <p>Check the current value of the range slider, by looking at the value of the text input element.</p>
          <p>On click:</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> clickInput <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-check-click'</span>)</div>
              <div>&nbsp;&nbsp;, clickButton <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-check-click-button'</span>)</div>
              <br />
              <div>clickButton.addEventListener(<span class="value">'click'</span>, <span class="specials">function</span>() {</div>
              <div>&nbsp;&nbsp;<span class="single">alert</span>(clickInput.<span class="boolean">value</span>);</div>
              <div>});</div>
            </div>
          </pre>
          <div class="slider-wrapper">
            <input type="text" class="js-check-click" />
            <button class="js-check-click-button button small-button">Check value</button>
          </div>
          <p>On change:</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> changeInput <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-check-change'</span>);</div>
              <br />
              <div><span class="single">changeInput</span>.<span class="name">onchange</span> = <span class="specials">function</span>() {</div>
              <div>&nbsp;&nbsp;<span class="single">document</span>.<span class="specials">getElementById</span>(<span class="value">'js-display-change'</span>).innerHTML = changeInput.<span class="boolean">value</span>;</div>
              <div>};</div>
            </div>
          </pre>
          <div class="slider-wrapper">
            <input type="text" class="js-check-change" />
            <label class="display-box-label">Value:</label>
            <div id="js-display-change" class="display-box"></div>
          </div>
        </div>
        <div class="example">
          <h3>Callback</h3>
          <p>The callback function is invoked on slider initialization and on slider handle movement. It's very appropriate for displaying the current value in another element.</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> elem <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-range'</span>);</div>
              <div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem);</div>
              <br />
              <div><span class="specials">function</span> <span class="name">displayValue</span>() {</div>
                <div>&nbsp;&nbsp;<span class="single">document</span>.<span class="specials">getElementById</span>(<span class="value">'display-box'</span>).innerHTML = elem.<span class="boolean">value</span>;</div>
              <div>}</div>
            </div>
          </pre>
          <div class="slider-wrapper">
            <input type="text" class="js-callback" />
            <label class="display-box-label">Value:</label>
            <div id="js-display-callback" class="display-box"></div>
          </div>
        </div>
        <div class="example">
          <h3>Interacting with another elements</h3>
          <p>Just a simple example of how you can interact with an element, when changing the slider value. In this case, we change the opacity of an awesome power ranger mask.</p>
          <pre>
            <div class="script">
              <div><span class="specials">var</span> elem <span class="sign">=</span> <span class="single">document</span>.querySelector(<span class="value">'.js-range'</span>);</div>
              <div><span class="specials">var</span> init <span class="sign">=</span> <span class="sign">new</span> <span class="name">Powerange</span>(elem, { callback: setOpacity, decimal: <span class="boolean">true</span>, min: <span class="boolean">0</span>, max: <span class="boolean">1</span>, start: <span class="boolean">1</span> });</div>
              <br />
              <div><span class="specials">function</span> <span class="name">setOpacity</span>() {</div>
                <div>&nbsp;&nbsp;<span class="single">document</span>.querySelector(<span class="value">'.js-change-opacity'</span>).<span class="boolean">style</span>.opacity = elem.<span class="boolean">value</span>;</div>
              <div>}</div>
            </div>
          </pre>
          <div class="slider-wrapper">
            <input type="text" class="js-opacity" />
            <div class="powerranger js-change-opacity"></div>
          </div>
        </div>
      </div>
  <script type="text/javascript">
    // Basic customization.
    var cust = document.querySelector('.js-customized');
    var initCust = new Powerange(cust, { hideRange: true, klass: 'power-ranger', start: 60 });
    // Min, max, start.
    var vals = document.querySelector('.js-min-max-start');
    var initVals = new Powerange(vals, { min: 16, max: 256, start: 128 });
    // Decimal.
    var dec = document.querySelector('.js-decimal');
    var initDec = new Powerange(dec, { decimal: true, callback: displayDecimalValue, max: 50, start: 19.12 });
    function displayDecimalValue() {
      document.getElementById('js-display-decimal').innerHTML = dec.value;
    }
    // Step.
    var stp = document.querySelector('.js-step');
    var initStp = new Powerange(stp, { start: 50, step: 10 });
    // Hide range.
    var hide = document.querySelector('.js-hiderange');
    var initHideRange = new Powerange(hide, { hideRange: true, start: 70 });
    // Disabled.
    var disabled = document.querySelector('.js-disabled');
    var initDisabled = new Powerange(disabled, { disable: true, disabledOpacity: 0.75, start: 30 });
    // Vertical.
    var vert = document.querySelector('.js-vertical');
    var initVert = new Powerange(vert, { start: 80, vertical: true });
    // Checking state.
    // On click.
    var clickInput = document.querySelector('.js-check-click')
      , clickButton = document.querySelector('.js-check-click-button')
      , initClickInput = new Powerange(clickInput, { start: 20 });
    clickButton.addEventListener('click', function() {
      alert(clickInput.value);
    });
    // On change.
    var changeInput = document.querySelector('.js-check-change')
      , initChangeInput = new Powerange(changeInput, { start: 70 });
    changeInput.onchange = function() {
      document.getElementById('js-display-change').innerHTML = changeInput.value;
    };
    // Callback.
    var clbk = document.querySelector('.js-callback');
    var initClbk = new Powerange(clbk, { callback: displayValue, start: 88 });
    function displayValue() {
      document.getElementById('js-display-callback').innerHTML = clbk.value;
    }
    // Interacting with elements.
    var opct = document.querySelector('.js-opacity');
    var initOpct = new Powerange(opct, { callback: setOpacity, decimal: true, min: 0, max: 1, start: 1 });
    function setOpacity() {
      document.querySelector('.js-change-opacity').style.opacity = opct.value;
    }
  </script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动选项卡 滑动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到