jquery达成上下滚动广告效果代码实例
发布时间:2022-04-20 09:43:26 所属栏目:语言 来源:互联网
导读:我们在浏览网站时,经常会看到滚动广告,那么这是怎么样实现的呢?这篇文章就给大家介绍一下jquery实现上下滚动的效果,文章中有详细的代码示例,对此感兴趣的朋友就继续往下看吧。 jquery广告上下滚动效果,直接上代码 代码如下(示例): CSS: style /* ---
我们在浏览网站时,经常会看到滚动广告,那么这是怎么样实现的呢?这篇文章就给大家介绍一下jquery实现上下滚动的效果,文章中有详细的代码示例,对此感兴趣的朋友就继续往下看吧。 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; 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') (编辑:济南站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |