jQuery滑动条插件

查看演示立即下载

插件描述：jQuery的滑块插件源码

实现代码

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/">
<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>

(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);

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery旋转插件jqueryrotate
下一个特效： jQuery超平滑的CSS3转换和过渡插件jquery.transit