工作中的jquery知识点

1.跑马灯效果代码

*{margin:0;padding:0;}
ul,li{list-style-type:none;}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}

<div id="scrollDiv">
        <ul>
            <li>这是公告标题的第一行</li>
            <li>这是公告标题的第二行</li>
            <li>这是公告标题的第三行</li>
        </ul>
    </div>

<script type="text/javascript">
function AutoScroll(obj){
    $(obj).find("ul:first").animate({
        marginTop:"-25px"
    },500,function(){
        //动画事件完成后触发的函数
//append,appendTo方法：能把页面上本来存在的对象添加到其他已存在的对象里面。其实就相当于把一个对象转移到另一个位置
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
    });
}
$(document).ready(function(){
//定时器
    setInterval('AutoScroll("#scrollDiv")',1000);
    
});
</script>

2.抽屉式效果

<div class="kefu">
            <div class="kefu_left"></div>
            
            <div class="kefu_right">
                <b>QQ:844455</b>
                <ul class='qq'>
                    <li><span class='txt'>kefu1</span></li>
                    <li><span class='txt'>kefu2</span></li>
                    <li><span class='txt'>kefu3</span></li>
                </ul>
                <b>QQ:844455</b>
                <b>QQ:844455</b>
                <b>QQ:844455</b>
        
            </div>
         </div>

 <style  type="text/css">
        * {margin:0px; padding:0px; font-family:'Arial';}
            .kefu{
                position : fixed;
                top: 100px;
                right: 0px;
                overflow: hidden;
                float: right;
            }
            .kefu_left{
                background: url(kefu.png)  no-repeat 0 -20px;
                width: 32px;
                height: 110px;
                margin-top: 70px;
                float: left;
                cursor: pointer;
            }
            .kefu_right{
                float: left; 
                width: 100px;
                border: 2px dotted red;
            }
            ul {
                list-style: none;
            }
        </style>

<script type="text/javascript">
    $(document).ready(function(e) {
        var t=true;
        $('.kefu_left').click(function(){
            if(t){
                $('.kefu').animate({right:'-100px'},300);
                $(this).css('background-position','-32px -20px');
                t= !t;
            } else{
                $('.kefu').animate({right:'0px'},300);
                $(this).css('background-position','0px -20px');
                t= !t;
            }
        });
    });
    </script>