光棒效果&展开面板

一、光棒效果

  <style type ="text/css">
        .mover {
             background-color:yellow;
        }
    </style>
    <script src="Script/jquery-1.7.1.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("#GridView1 tr:gt(0)").mouseover(function () {
                $(this).addClass("mover");
            }).mouseout(function () {
                $(this).removeClass("mover");
            });
        });
    </script>

给奇数行和偶数行分别定义两种颜色

　　　　
//把odd放在设计界面GridView属性里的样式RowStyle里的CssClass属性上，把even放在样式AlternatingRowStyle里的CssClass属性上
 　　　　
　　　　 .odd {
            background-color:#9dc2be;
        }
        .even {
            background-color:#e1e586;
        }

 二、展开面板

 <style type="text/css">
        ul {
            list-style-type:none;
            width:400px;
        }

        .titlebar {
            padding:5px;
            background-color:navy;
            color:white;
            margin-top:1px;
        }
        .contentpanl {
            padding:5px;
            background-color:#ccffff;
            display:none;
        }
    </style>
    <script src="Script/jquery-1.7.1.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $(".titlebar").click(function () {
                var s = $(this).next().css("display");
                if (s == "none") {
                    //$(this).next().show();//无任何效果
                    // $(this).next().fadeIn(3000);//渐变
                    $(this).next().slideDown(3000);//下拉
                }
                else {
                    //$(this).next().hide();
                    //$(this).next().fadeOut(3000);
                    $(this).next().slideUp(3000);
                }
            });
        });
    </script>

 

转载于:https://www.cnblogs.com/qianxiaojinnian/p/4749901.html