多個按鈕的移入、移出、點擊的三種變換樣式

貼上自己的代碼,這回真是原創

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../../jquery.min.js"></script>
    <style type="text/css">
        /**查看樣式***/
        .class1 {
            background-image: url(./image/eye-a.png);
            margin: 7px 10px 0 0; 
            width: 26px;
            height: 26px;
            float: left;
        }

        .class1:hover {
            background-image: url(./image/eye-b.png);
        }
        .class1-click{
            background-image: url(./image/eye-c.png);
        }
        .class1-click:hover{
            background-image: url(./image/eye-c.png);
        }


        /**關聯樣式**/
        .class2 {
            background-image: url(./image/relevance-a.png);
            margin: 7px 10px 0 0; 
            width: 26px;
            height: 26px;
            float: left;

        }
        .class2:hover {
            background-image: url(./image/relevance-b.png);
        }
        .class2-click{
            background-image: url(./image/relevance-c.png);
        }
        .class2-click:hover {
            background-image: url(./image/relevance-c.png);
        }

        /**編輯樣式**/
        .class3 {
            background-image: url(./image/edit-a.png);
            margin: 7px 10px 0 0; 
            width: 26px;
            height: 26px;
            float: left;
        }
        .class3:hover {
            background-image: url(./image/edit-b.png);
        }
        .class3-click{
            background-image: url(./image/edit-c.png);
        }
        .class3-click:hover{
            background-image: url(./image/edit-c.png);
        }
        
    </style>
</head>

<body>
    <div>
        <div class="class1" onmousedown="cssfunctionStyle(1,3)"></div>
        <div class="class2" onmousedown="cssfunctionStyle(2,3)"></div>
        <div class="class3"  onmousedown="cssfunctionStyle(3,3)"></div>

    </div>
    

</body>
<script >


//該函數是下面三個函數封裝後的結果,沒啥特殊的東西
function cssfunctionStyle(index,count){
    $('.class'+index).addClass('class'+index+'-click');
    for(var i =1;i<=count;i++){
    	if(i==index){
    		continue;
    	}
        $('.class'+i).removeClass('class'+i+'-click');

    }
}
/*
這三個函數樣子差不多,就封裝了一下,上面函數是封裝後的函數
function f1(){
    $('.class1').addClass('class1-click');
    $('.class2').removeClass('class2-click');
    $('.class3').removeClass('class3-click');
}
function f2(){
    $('.class1').removeClass('class1-click');
    $('.class2').addClass('class2-click');
    $('.class3').removeClass('class3-click');
}
function f3(){
    $('.class1').removeClass('class1-click');
    $('.class2').removeClass('class2-click');
    $('.class3').addClass('class3-click');
}
*/
</script>
</html>

代碼裏需要jquery和6個圖片,我放在資源裏自己下載吧

上傳文檔還在審覈中。。。

終於審覈完了。

這是源代碼:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章