手动--拖动条--改变字体大小

Posted 雅昕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手动--拖动条--改变字体大小相关的知识,希望对你有一定的参考价值。

一个多月的加班,终于熬到头了,领导说下午休息一下,我就把自己工作中途写的一个简短的小demo拿出来,说是分享一下,其实还是有一些小bug,希望有人能找出,并给指错,一起进步,一起成长,想想这一个多月,过的又充实,又慌乱,希望一会会振作一些把,其他的不多说了,代码如下,自己实现效果!

 实现思想: 三个div,当鼠标拖动小按钮的时候,计算出左边的div class=‘scroll‘ 的宽度不断的变化,而 设置的字体最大为50px, 拖动条的宽度为200px, 由此可见,当拖动的宽度为100px的时候,字体的大小为25px,以此类推,当然为了能看的=看到字体,为p 标签加了一个判断,如果小于10px,就不再 随拖动条减小了。

技术分享

 

<!DOCTYPE html >  
<html >  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style>
   .dragbar{height:20px;background:#ddd;position: relative;}  
.draghandle{height:18px;width:28px;border:1px solid #444;overflow:hidden;background:#3d642d;position:absolute;top:0px;left:0px;z-index:10;cursor:pointer;}
.scroll{
    height: 20px;
    position: absolute;
    top:0;
    left: 0;
    background: green;
    width: 30px;
} 
</style>
</head>  
<body>  
<div class="dragbar">
    <div class=‘scroll‘></div>  
    <div class="draghandle"></div>  
 </div>  
 <span><b>10</b>px</span><br>
 <p>字体段落</p>
<script src=‘js/jquery-1.11.1.min.js‘></script>
<script>
 var percent=0;  
$(function(){  
    var handle=$(".draghandle");  
    var dragbar=$(".dragbar");  
    dragbar.css("width","200px");
    handle.css({"width":"10px","top":0,"left":30});  
    var maxlen=parseInt(dragbar.width())-parseInt(handle.outerWidth());  
    handle.bind("mousedown",function(e){  
        var x=e.pageX;  
        var hx=parseInt(handle.offset().left);
        $(document).bind("mousemove",function(e){  
            var left=e.pageX-x+hx<0?0:(e.pageX-x+hx>=maxlen?maxlen:e.pageX-x+hx); 
        // 宽度的变化  
            $(.scroll).css(width,left<=3?0:left);
        // 字体的大小
            $(p).css(fontSize,parseInt((left+12)/4)<=3?0:parseInt((left+12)/4)<10?10:parseInt((left+12)/4)<=3?0:parseInt((left+12)/4));
            $(span b).text(parseInt((left+12)/4)<=3?0:parseInt((left+12)/4));
            handle.css({left:left,top:0});  
          percent=(left/maxlen*100).toFixed(0);  
          return false;  
        });  
        $(document).bind("mouseup",function(){  
            $(this).unbind("mousemove");  
        })  
    })  
    function move(percent){  
        var handle_left=maxlen*percent+dragbar.offset().left;  
        handle.animate({  
            left:handle_left,top:dragbar.offset().top         
        },{duration:1500 , queue:false});  
    }  
});    
</script>
</body>  
</html>  

 

以上是关于手动--拖动条--改变字体大小的主要内容,如果未能解决你的问题,请参考以下文章

vb中如何改变对话框的字体

根据步进值动态改变字体大小

html中写入啥代码使浏览器不能被拖动,就是左右拖动!

Android项目实战(二十三):仿QQ设置App全局字体大小

cad怎么修改字体的大小和颜色

安卓的手机字体怎么放大