移动端的jQuery手指滑动刻度尺选择值的特效

来源:https://www.sucaihuo.com/js/2668.html 2017-08-08 22:47浏览(2069) 收藏

一款移动端的jQuery手指滑动刻度尺选择值的特效,请扫描二维码在手机端查看效果,只需要触屏左右滑动即可切换选择的数值,还是比较实用的功能,喜欢的童鞋请收下吧。
移动端的jQuery手指滑动刻度尺选择值的特效
查看演示 下载资源 下载积分: 20 积分

页面的head部分,引入一个CSS样式文件,调用jQuery库和一个JS文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/in01.js"></script>

页面的body部分,3种模式的刻度选择效果放入不同的div容器里,代码如下:

<div class="page" data-page='profile1'>
    <div class="page-main">
        <input type="hidden" name="first_screen" value="30##150##50">
        <div class="row">
            <label for="" class="label">您的年龄 <span class="number age-num" initial-value="12" value="30">30</span><span class="letter">岁</span></label>
            <div class="ruler ruler-age">
                <div class="main" value="-1">
                    <ul data-initial='true'>
                        <li><span class="num">18</span></li>
                        <li><span class="num">19</span></li>
                        <li><span class="num">20</span></li>
                        <li><span class="num">21</span></li>
                        <li><span class="num">22</span></li>
                        <li><span class="num">23</span></li>
                        <li><span class="num">24</span></li>
                        <li><span class="num">25</span></li>
                        <li><span class="num">26</span></li>
                        <li><span class="num">27</span></li>
                        <li><span class="num">28</span></li>
                        <li><span class="num">29</span></li>
                        <li><span class="num">30</span></li>
                        <li><span class="num">31</span></li>
                        <li><span class="num">32</span></li>
                        <li><span class="num">33</span></li>
                        <li><span class="num">34</span></li>
                        <li><span class="num">35</span></li>
                        <li><span class="num">36</span></li>
                        <li><span class="num">37</span></li>
                        <li><span class="num">38</span></li>
                        <li><span class="num">39</span></li>
                        <li><span class="num">40</span></li>
                        <li><span class="num">41</span></li>
                        <li><span class="num">42</span></li>
                        <li><span class="num">43</span></li>
                        <li><span class="num">44</span></li>
                        <li><span class="num">45</span></li>
                        <li><span class="num">46</span></li>
                        <li><span class="num">47</span></li>
                        <li><span class="num">48</span></li>
                        <li><span class="num">49</span></li>
                        <li><span class="num">50</span></li>
                    </ul>
                </div>
                <div class="arrow"></div>
            </div>
        </div>

        <div class="row">
            <label for="" class="label">您的身高 <span class="number height-num" initial-value="10" value="150">150</span><span class="letter">cm</span></label>
            <div class="ruler ruler-height">
                <div class="main" value="-1">
                    <ul data-initial='true'>
                        <li><span class="num">140</span></li>
                        <li><span class="num">150</span></li>
                        <li><span class="num">160</span></li>
                        <li><span class="num">170</span></li>
                        <li><span class="num">180</span></li>
                        <li><span class="num">190</span></li>
                        <li><span class="num">200</span></li>
                    </ul>
                </div>
                <div class="arrow"></div>
            </div>
        </div>

        <div class="row">
            <label for="" class="label">您的体重 <span class="number width-num" initial-value="8" value="50">50</span><span class="letter">kg</span></label>
            <div class="ruler ruler-weight">
                <div class="main" value="0">
                    <ul data-initial='true'>
                        <li><span class="num">30</span></li>
                        <li><span class="num">35</span></li>
                        <li><span class="num">40</span></li>
                        <li><span class="num">45</span></li>
                        <li><span class="num">50</span></li>
                        <li><span class="num">55</span></li>
                        <li><span class="num">60</span></li>
                        <li><span class="num">65</span></li>
                        <li><span class="num">70</span></li>
                        <li><span class="num">75</span></li>
                        <li><span class="num">80</span></li>
                        <li><span class="num">85</span></li>
                        <li><span class="num">90</span></li>
                        <li><span class="num">95</span></li>
                        <li><span class="num">100</span></li>
                    </ul>
                </div>
                <div class="arrow"></div>
            </div>
        </div>
    </div>
</div>
评论2
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 椅子
    12-14 16:47
    李***祥
    厉害!居然还有移动端的东西
  • 头像 沙发
    08-16 22:21
    阿***泡
    不太实用·哦
1 2