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