jquery 點擊應用

  1. 放大/縮小網頁字體大小


<script type="text/javascript">
    $(function(){
        $("span").click(function(){
            var thisEle = $("#para").css("font-size"); 
            var textFontSize = parseInt(thisEle , 10);
            var unit = thisEle.slice(-2); //獲取單位
            var cName = $(this).attr("class");
            if(cName == "bigger"){
                   if( textFontSize <= 22 ){
                        textFontSize += 2;
                    }
            }else if(cName == "smaller"){
                   if( textFontSize >= 12  ){
                        textFontSize -= 2;
                    }
            }
            $("#para").css("font-size",  textFontSize + unit);
        });
    });
  </script>
<div class="msg">
    <div class="msg_caption">
        <span class="bigger" >放大</span>
        <span class="smaller" >縮小</span>
    </div>
    <div>
        <p id="para">
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text. This is some text. This is some text. This is some
        text. This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text.
        </p>
    </div>
</div>

網頁換皮膚/背景


<script type="text/javascript">
        //<![CDATA[
        $(function(){
            var $li =$("#skin li");
            $li.click(function(){
                switchSkin( this.id );
            });
            var cookie_skin = $.cookie( "MyCssSkin");  //獲取cookie的值
            if (cookie_skin) {
                switchSkin( cookie_skin );
            }
        });
        function switchSkin(skinName){
                 $("#"+skinName).addClass("selected")                 //當前<li>元素選中
                              .siblings().removeClass("selected");  //去掉其它同輩<li>元素的選中
                $("#cssfile").attr("href","css/"+ skinName +".css"); //設置不同皮膚
                $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
        }
        //]]>
</script>
<ul id="skin">
        <li id="skin_0" title="灰色" class="selected">灰色</li>
        <li id="skin_1" title="紫色">紫色</li>
        <li id="skin_2" title="紅色">紅色</li>
        <li id="skin_3" title="天藍色">天藍色</li>
        <li id="skin_4" title="橙色">橙色</li>
        <li id="skin_5" title="淡綠色">淡綠色</li>
    </ul>

    <div id="div_side_0">
        <div id="news">
            <h1 class="title">時事新聞</h1>
        </div>
    </div>
    <div id="div_side_1">
        <div id="game">
            <h1 class="title">娛樂新聞</h1>
        </div>
    </div>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容