js程式碼學習19---網頁換面板

阿新 • • 發佈：2019-01-31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/skin_0.css" 
 rel="stylesheet" type="text/css" id="cssfile" />
    <!--   ����jQuery -->
    <script src="../../scripts/jquery.js" type="text/javascript"></script>
    <!--   ����jQuery��cookie��� -->
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script 
 type="text/javascript">
        //<![CDATA[
        $(function(){
            var $li =$("#skin li");
            $li.click(function(){
                switchSkin( this.id );
            });
            var cookie_skin = $.cookie( "MyCssSkin");
            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>
</head>
<body>
    <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>

</body>
</html>

defulat.css

    margin:0px;
    padding:0px;
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#div_side_0,#div_side_1
{
    float:left;
    width:120px;
    height:450px;
    }
#skin
{
    margin:10px;
    padding:5px;
    width:210px;
    padding-right:0px;
    list-style:none;
    border: 1px solid #CCCCCC;
    overflow:hidden;
    }
#skin li{
    float:left;
    margin-right:5px;
    width:15px;
    height:15px;
    text-indent:-999px;
    overflow:hidden;
    display:block;
    cursor:pointer;
    background-image:url(theme.gif);
}
#skin_0{
    background-position:0px 0px;
}
#skin_1{
    background-position:15px 0px;
}
#skin_2{
    background-position:35px 0px;
}
#skin_3{
    background-position:55px 0px;
}
#skin_4{
    background-position:75px 0px;
}
#skin_5{
    background-position:95px 0px;
}
#skin_0.selected{
    background-position:0px 15px !important;
}
#skin_1.selected{
    background-position:15px 15px !important;
}
#skin_2.selected{
    background-position:35px 15px !important;
}
#skin_3.selected{
    background-position:55px 15px !important;
}
#skin_4.selected{
    background-position:75px 15px !important;
}
#skin_5.selected{
    background-position:95px 15px !important;
}
.title
{
    cursor:pointer;}
h1{
   margin:10px;
   padding:10px 20px;
   width:60px;
   color:#ffffff;
   font-size:14px;
}
a:link {
    text-decoration: none;
    color: #333333;
}
a:visited {
    color: #333333;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: underline;
}

skin_0.css

h1{
   background:#999999;
}

skin_1.css

h1{
   background:#BB3BD9;
}

skin_2.css

h1{
   background:#E31559;
}

skin_3.css

h1{
   background:#08BECE;
}

skin_4.css

h1{
   background:#FBA60A;
}

skin_5.css

h1{
   background:#AFD400;
}

theme.gif
這裡寫圖片描述

js程式碼學習19---網頁換面板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

jq程式碼學習19----- jq中的ajax全域性事件

jq簡化AJAX操作不僅體現在呼叫AJAX方法和處理響應方面，而且還體現在對呼叫AJAX方法的過程中的http請求的控制，通過jq提供的一些自定義全域性函式，能能夠為各種與ajax請求結束時，會觸發ajaxStop（）方法的回撥函式。這些方法都是全域性函式，因此

js程式碼學習16--表格內容過濾

(function(){("#filterName").keyup(function(){ ("tabletbodytr").hide().filter(":contain

HEVC程式碼學習19：MV、MVD、MVP概念解析

在程式碼閱讀中，可以看到MV、MVD、MVP三個概念，在開始學習的時候就很糊塗，一直買具體來看下，也找不到具體在哪裡有講解，現在來關注學習一下。先來逗比一下，名詞解析： MVP——most valuable player，那MVD是什麼呢？most val

JS學習筆記 - fgm練習 - 網頁換膚

自己做的：總結： 1. 點選按鈕，div內部變色，邊框保持顏色不變。實現原理：其實本來就把background 和 border 分別設定了同一個顏色，看似是一個整體，其實本來就是分開的。那麼點選的時候，只需要更改background 的顏色。 border 部分不需

js/jquery去掉空格,回車,換行示例程式碼

js/jquery去掉空格,回車,換行示例程式碼。需要的朋友可以過來參考下，希望對大家有所幫助 Jquery: $("#accuracy").val($("#accuracy").val().replace(/\ +/

連結到網頁中最常用的JS程式碼（js禁止右鍵、禁止複製）

<body oncontextmenu=”return false”></body> <!– 禁用右鍵: –> <script> function stop(){ return false; } document.oncontextmenu=st

通過網頁的JS程式碼啟動移動APP

少扯淡，直接上程式碼： <script> function startAPP(){ window.location = "**://**.**/**"; } function downloadAPP(){ window.location = "http://IP/**/**.ap

利用js自動檢測pc端和移動端，js程式碼，需要寫兩個網頁，一個pc，一個移動端

假設pc/index.html是pc端的網頁，mobile/index.html是移動端的網頁在外部設定一個html進行判斷，分別跳轉； //判斷如果是pc端，自動跳到pc/index.html //安卓手機自動跳到mobile/

(一)、JS 程式碼轉換-Babel (持續學習更新ing……)

一、Babel 的簡介 [待完善] 二、Babel 的配置 [待完善] 三、Babel 的配置檔案 .babelrc { "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] } 四、Babel 的Plugi

微信網頁新增分享到朋友圈、傳送好友JS程式碼

微信公眾平臺開始支援前端網頁，大家可能看到很多網頁上都有分享到朋友圈，關注微信等按鈕，點選它們都會彈出一個視窗讓你分享和關注，這個是怎麼實現的呢？今天就給大家講解下如何在微信公眾平臺前端網頁上新增分享到朋友圈，關注微訊號等按鈕。微信內嵌瀏覽器通過 Mac 遠端除

用php過濾網頁中所有的html,css,js程式碼

<?php $search = array ( "'<script[^>]*?>.*?</script>'si", // 去掉 javascript "'<style[^>]*?>.*?</style>'si

網頁中最常用的JS程式碼（js禁止右鍵、禁止複製）

第一種也是簡單的新增事件：【【<body oncopy="returnfalse"> 禁止複製 <input type=""name=""id=""value=""onpaste="returnfalse"/> 禁止貼上 <body

手機端網頁返回頂部js程式碼

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

js中建立桌面網頁快捷方式程式碼

有些時候，我們編寫軟體需要建立桌面的快捷方式，有很多種方式實現，這裡有我測試過已經實現的js程式碼，程式碼如下： function toDesktop(sUrl, sName) { try { v

如何在網頁中通過js程式碼將直接關注某個微信賬號

var addWxContact = function(wxid, cb) { if (typeof WeixinJSBridge == 'undefined') return false; WeixinJSBridge.invoke('addContact', {

webpack 學習（5）--- 使用uglify-js 壓縮打包JS程式碼

一、webpack 外掛機制介紹：外掛可以完成更多loader不能完成的功能。外掛的使用一般是在webpack的配置資訊 plugins選定中指定。Webpack本身內建了一些常用的外掛，還可以通過npm安裝第三方外掛。二、uglify-js介紹： ugligy-j

js學習之——網頁側邊欄廣告效果

側邊欄廣告就是指我們在瀏覽網站的時候在網頁的右邊中間部分顯示的那個div，無論我們是拖動滾動條，還是放大縮小視窗，廣告始終顯示在右邊的中間。這裡主要是提供兩種方法的實現。方法一：就是使用純粹的佈局來實現，比較簡單，即是使用 position:fixed;

可以線上編輯任何網頁的JS程式碼

功能介紹：第一段程式碼可以使任何網頁進入線上編輯狀態，第二段程式碼退出編輯狀態使用方法：先在IE中開啟要編輯的網頁，然後在該頁位址列上輸入第一段程式碼，就可以編輯該網頁了，編輯結束後，在位址列上輸入第二段程式碼，就可以退出編輯狀態了。

如何讓網頁大小自適應的JS程式碼

其原理是比較簡單的，也就是根據當前視口的大小自動計算跟元素的fontSize值： ! function(a) { function b() { //為window物件添加了re

js程式碼學習19---網頁換面板

相關推薦