注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

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

UI fishcity 1353浏览

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

转载请注明:jQ酷 » jQuery滑动条插件实现改变字体大小应用

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。