jQuery滑动条插件实现改变字体大小应用

jQuery滑动条插件

这是一款基于jquery制作的滑动条插件应用,它可以通过定义回调函数来实现滑动来改变字体、图片大小或者是元素的宽高等,具体可通过函数来实现!下面,jQ酷和大家分享下它实现的方法。

首先引入jquery库和滑动插件

 <script type="text/javascript" src="jquery-1.2.6.js"></script>
 <script type="text/javascript" src="jquery.jslider.js"></script>

构建html

        <fieldset>
            <dl>
                <div id="myFont">
                    Hello, world!
                </div>
                <div id="slidercontainer1">
                </div>
            </dl>
        </fieldset>

写入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;
            }

写入JS

 $().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);
                    }
                });
            });

下载地址:本站下载 | 百度云

Comments are closed.