欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

jQuery 水平 滑动条插件

星期二, 2018-11-27 01:34 — adminshiping1

jQuery滑动条插件

jQuery滑动条插件ie兼容6

  查看演示   立即下载 

实现代码

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type="text/javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript" src="jquery.jslider.js"></script>
         
        <style type="text/css">
             .defaultbar {
                margin-top: 10px;
                height: 5px;
                background-color: #FFFFE0;
                border: 1px solid #A9C9E2;
                position: relative;
            } .defaultbar .jquery-completed {
                height: 3px;
                background-color: #7d9edb;
                top: 1px;
                left: 1px;
                position: absolute;
            } .defaultbar .jquery-jslider {
                height: 15px;
                background-color: #E6E6FA;
                border: 1px solid #A5B6C8;
                top: -6px;
                display: block;
                cursor: pointer;
                position: absolute;
            } .defaultbar .jquery-jslider-hover {
                background-color: #000080;
            }
             
            fieldset {
                border: solid 1px #dedede;
                padding: 0 10px;
            }
             
            fieldset legend {
                background-color: #FFF5FA;
                border: 1px solid #F8B3D0;
                padding: 5px 10px;
            }
        </style>
        <script type="text/javascript">
            $().ready(function(){
                var maxFont = 30;
                var mf = $('#myFont').css('font-size', 30);
                $.fn.jSlider({
                    renderTo: '#slidercontainer1',
                    size: {
                        barWidth: 400,
                        sliderWidth: 5
                    },
                    onChanging: function(percentage, e){
                        mf.css('font-size', maxFont * percentage);
                        //在控制台输出信息
                        window.console && console.log('percentage: %s', percentage);
                    }
                });
            });
        </script>
    </head>
    <body>
        <fieldset>
            <dl>
                <div id="myFont">
                    Hello, world!
                </div>
                <div id="slidercontainer1">
                </div>
            </dl>
        </fieldset>
    </body>
</html>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
(function($){
    $.extend($.fn, {
        /*实现一个jquery滑动条插件*/
        jSlider: function(setting){
            var ps = $.extend({
                renderTo: $(document.body),
                enable: true,
                initPosition: 'max',
                size: {barWidth: 200,sliderWidth: 5},
                barCssName: 'defaultbar',
                completedCssName: 'jquery-completed',
                sliderCssName: 'jquery-jslider',
                sliderHover: 'jquery-jslider-hover',
                onChanging: function(){
                },
                onChanged: function(){
                }
            }, setting);
                          
            //强制将renderTo强制转换成jQuery对象
            ps.renderTo = (typeof ps.renderTo == 'string' ? $(ps.renderTo) : ps.renderTo);
             
            //渲染UI
            var sliderbar = $('<div><div>&nbsp;</div><div>&nbsp;</div></div>')
                            .attr('class', ps.barCssName)
                                .css('width', ps.size.barWidth)
                                    .appendTo(ps.renderTo);
             
            var completedbar = sliderbar.find('div:eq(0)')
                                    .attr('class', ps.completedCssName);
             
            var slider = sliderbar.find('div:eq(1)')
                        .attr('class', ps.sliderCssName)
                            .css('width', ps.size.sliderWidth);
                          
            var bw = sliderbar.width(), sw = slider.width();
             
            ps.limited = {min: 0, max: bw - sw};
             
            //定位completedbar的填充长度以及slider左侧距离
            if (typeof window.$sliderProcess == 'undefined') {
                window.$sliderProcess = new Function('obj1', 'obj2', 'left', 
                                                'obj1.css('left',left);obj2.css('width',left);');
            }
              
            //eval('ps.limited.' + ps.initPosition)来获取，从而避免switch操作
            //此处相当于调用 sliderProcess(xx,xx,xxx)   执行slider.css('left',value);completedbar.css('left',value)
            $sliderProcess(slider, completedbar, eval('ps.limited.' + ps.initPosition));
             
            /*jQuery拖拽功能*/
            var slide = {
                drag: function(e){
                    var d = e.data;
                     
                    var l=Math.min(Math.max(e.pageX - d.pageX + d.left, ps.limited.min), ps.limited.max);
                     
                    $sliderProcess(slider,completedbar,l);
                     
                    ps.onChanging(l/ps.limited.max,e);
                },
                 
                drop:function(e){
                    slider.removeClass(ps.sliderHover);
                     
                    ps.onChanged(parseInt(slider.css('left'))/ps.limited.max,e);
                    //去除绑定
                    $().unbind('mousemove',slide.drag).unbind('mouseup',slide.drop);
                }
            };
             
//          jSlider enable属性为true时，在end-user按下鼠标时绑定mousemove事件，在鼠标弹起时移除，我们只需要同步更新slider的left 属性和completedbar的width即可，同时在drag中绑定onChanging方法，在drop中绑定onChanged方法，向这两个方法推送的参数相同，1>百分比，即value值，介于0~1，2>event。
            if(ps.enable){
                slider.bind('mousedown',function(e){
                    var d={
                        left:parseInt(slider.css('left')),
                        pageX:e.pageX
                    }
                    $(this).addClass(ps.sliderHover);
                    $().bind('mousemove',d,slide.drag).bind('mouseup',d,slide.drop);
                });
            }
             
            slider.data = { bar: sliderbar, completed: completedbar };
            return slider;
        }
    });
})(jQuery);

来自  http://www.jq22.com/jquery-info376

普通分类: 
jquery
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2