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>