Don't make me think

發表文章

目前顯示的是 11月, 2009的文章

jQuery - 如何用Slider控制字型大小

上一篇文章是用三個按鈕控制字型大小，感覺不太靈活，就到jQuery的官方網站，參考了這個 UI Slider - Snap to increments 修改，沒想到很順利的修改完成，以下是我做的Ｄemo，真是感謝有jQuery出現!! 讓網頁世界更加美好。 1.先嵌入jQuery 涵式庫 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 2.加入jQuery 程式 <script> $(document).ready(function(){ var $speech = $('div.speech'); var defaultSize = $speech.css('fontSize'); -->預設的字形大小12px var num= parseFloat(defaultSize, 10); -->只取12px的數字部份，並轉換成數字 $("#slider").slider({ value:num, min: 8, --> 字型大小最小值 max: 20, -->字型大小最大值 step: 1, slide: function(event, ui) { $("#amount").val( ui.value + 'px'); $speech.css('fontSize' , ui.value + 'px'); } }); $("#amount").val($("#slider").slider("value...

閱讀完整內容

運用jQuery修改文章字型大小

2006年 1 月 14日 John Resing 創造新的框架『jQuery』, 它的出現讓網頁更加『好用』，只要具備基本的html css 知識, 並熟希javascript 的語法，可以輕鬆的在網頁加入互動元素，他的出現對設計師來說是項福音。如何在網頁運用jQuery加入互動元素，以修改文章字型大小為例。 1.頁面上加入[ Default ] [ Bigger ] [ Smaller ] 三個按鈕 2.頁面上加入文章區域 3.頁面上加入適當的css <style type="text/css"> body { font:normal 12px Verdana, Geneva, sans-serif; } #switcher .selected{ background:red; } .button{ display:block; float:left; border:1px solid gray; background:#CCC; padding:5px 10px; margin:5px 5px 5px 0; cursor: pointer;} .speech{ clear:both; } </style> <title>jQuery - 字型加大</title> </head> <body> <div id="switcher"> <div class="label"> Style Switcher </div> <div class="button" id="sw_default"> Default </div> <div class="button" id="sw_large">Bigger</div> <div class="button"...

閱讀完整內容