jquery实现广告上下滚动效果

本文实例为大家分享了jquery实现广告上下滚动效果的具体代码，供大家参考，具体内容如下

一、jquery上下滚动预约记录@H_126_4@

jquery广告上下滚动效果,直接上代码

代码如下（示例）：

CSS:

style>
 /* -------------------------预约记录----------------------------------- */ .Top_Record{
}
 .toPRec_List dl,.maquee{
     width:90%;
     overflow:hidden;
     margin:0 auto;
 color:#7C7C7C}
 .maquee{
     height:265px;
}
 .topRec_List ul{
     width:100%;
     height:195px;
}
 .topRec_List li{
     height:35px;
    font-Size:14px;
width: 100% }
 /*.topRec_List li:nth-child(2n){
 background:#077cd0}
*/ .topRec_List li div{
     float:left;
}
 .topRec_List li div:nth-child(1){
     width:35%;
}
 .topRec_List li div:nth-child(2){
     width:35%;
}
 .topRec_List li div:nth-child(3){
     width:20%;
}
 .maquee ul li{
float: left}
 .active{
     color: #fc6A13;
 }
    /style>
    

HTML:

div style="background: #ffffff;
    width: 100%;
    margin-top: 5pt;
    padding-bottom: 10pt;
    padding-top: 5pt">
     div class="tITled">
    p class="PErson">
    已有235人看房/p>
    p class="titleds">
    预约记录/p>
    /div>
     br>
     div class="Top_Record">
     div class="topRec_List">
     dl>
{
{
    -- dd>
     /dd>
--}
}
     /dl>
     div class="maquee">
     ul>
     li>
    div>
    张三1/div>
    div>
    131****121/div>
    div>
    10分钟前/div>
    /li>
     li>
    div>
    张三2/div>
    div>
    131****121/div>
    div>
    10分钟前/div>
    /li>
     li>
    div>
    张三3/div>
    div>
    131****121/div>
    div>
    10分钟前/div>
    /li>
     /ul>
     /div>
     /div>
     /div>
    /div>
    

JS:

script type="text/javascript">
     const index = ($(".maquee").height() / $(".maquee ul li").height());
 function autoScroll(obj){
 $(obj).find("ul").aniMATE({
 marginTop : "-35px" }
,1000,function(){
 $(this).css({
marginTop : "0px"}
    ).find("li:First").appendTo(this);
 }
    ) $(".maquee ul li").removeClass('active');
 $(".maquee ul li").eq(parseInt(index)+1).addClass('active') }
 $(function(){
     VAR scroll=setInterval('autoScroll(".maquee")',1500);
 }
    );
     $(".maquee ul li").eq(parseInt(index)+1).addClass('active')/script>
    

二、效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• jQuery实现上下滚动公告栏详细代码
• 新闻上下滚动jquery 超简洁(必看篇)
• 如何使用jquery实现文字上下滚动效果
• Jquery数字上下滚动动态切换插件
• 随鼠标上下滚动的jquery代码
• jquery 实现上下滚动效果示例代码
• jquery文字上下滚动的实现方法
• 一个JQuery写的点击上下滚动的小例子
• jquery 上下滚动广告

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！