本文实例为大家分享了jquery实现广告上下滚动效果的具体代码,供大家参考,具体内容如下
一、jquery上下滚动预约记录
jquery广告上下滚动效果,直接上代码
代码如下(示例):
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
< 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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>
|
二、效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/qq_43209524/article/details/114256908