多个按钮的移入、移出、点击的三种变换样式

贴上自己的代码,这回真是原创

<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个图片,我放在资源里自己下载吧

上传文档还在审核中。。。

终于审核完了。

这是源代码:

 

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