码迷,mamicode.com
首页 > 其他好文 > 详细

拖动滑块评分

时间:2015-08-18 11:47:19      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

var slider = {
                init: function () {
                    slider.pc();
                    slider.phone();
                },
                //回调
                callback: function (_doc, val) {
                    var _item = _doc.find("span"); //拖拽元素
                    //格式化数值
                    var _max = parseInt(_doc.attr(‘data-max‘));
                    _max = !!_max ? _max : 100;
                    var _min = parseInt(_doc.attr(‘data-min‘));
                    _min = !!_min ? _max : 0;
                    var proportion = (_doc.width() - _item.width()) / (_max - _min);
                    //显示结果
                    var maxVal = _doc.width() - _item.width();
                    var minVal = 0;

                    val = val >= maxVal ? maxVal : val;
                    val = val <= minVal ? minVal : val;

                    var temp = parseInt((val) / proportion);
                    temp = temp < 0 ? 0 : temp;
                     //以下可以自定义 temp为实际数值,val为滑块移动的像素(相对拖拽区域的偏移量)
                    _doc.closest(‘span‘).siblings(‘i‘).text(temp);
                    _item.css(‘left‘, val + "px");
                },
                //pc端事件
                pc: function () {
                    $(".round").mousedown(function () {
                        var _doc = $(this);
                        document.onmousemove = function (e) {
                            e = e || window.event;
                            var val = e.clientX - _doc.offset().left;
                            slider.callback(_doc, val);
                        }
                        document.onselectstart = function () { return false; }
                        document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }
                    });
                },
                phone: function (e) {
                    $(‘body‘).on(‘touchmove‘, ".round", function (e) {
                        e.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
                        var _doc = $(this);
                        var val = e.originalEvent.touches[0].clientX - _doc.offset().left;
                        slider.callback(_doc, val);
                    });
                }
            };

            slider.init();

 

拖动滑块评分

标签:

原文地址:http://www.cnblogs.com/muwei/p/4738823.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!