首页 > Web开发 > 详细

工作中的jquery知识点

时间:2014-01-15 08:43:49      阅读:520      评论:0      收藏:0      [点我收藏+]

1.跑马灯效果代码

bubuko.com,布布扣
*{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;}
bubuko.com,布布扣

 

bubuko.com,布布扣
<div id="scrollDiv">
        <ul>
            <li>这是公告标题的第一行</li>
            <li>这是公告标题的第二行</li>
            <li>这是公告标题的第三行</li>
        </ul>
    </div>
bubuko.com,布布扣
bubuko.com,布布扣
<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>
bubuko.com,布布扣

2.抽屉式效果

bubuko.com,布布扣
<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>
bubuko.com,布布扣
bubuko.com,布布扣
 <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>
bubuko.com,布布扣
bubuko.com,布布扣
<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>
bubuko.com,布布扣

工作中的jquery知识点

原文:http://www.cnblogs.com/xiang1336/p/3513975.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!