This article shares the specific code of jQuery to achieve the effect of scrolling up and down advertisements for your reference. The specific content is as follows 1. Scroll up and down the appointment record with jQuery jQuery ads scroll up and down, just put the code The code is as follows (example): CSS: <style> /* -------------------------Appointment Records----------------------------------- */ .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 people have viewed the house</p><p class="titleds">Appointment records</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 minutes ago</div></li> <li><div>张三2</div><div>131****121</div><div>10 minutes ago</div></li> <li><div>张三3</div><div>131****121</div><div>10 minutes ago</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> 2. Effect The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to configure Java environment variables in Linux system
>>: Summary of common optimization operations of MySQL database (experience sharing)
The Truncate table statement is used to delete/tr...
Hello everyone, I wonder if you have the same con...
Table of contents Preface step Preface Today I fo...
vue+el-upload multiple files dynamic upload, for ...
1. When the mobile terminal processes the list sl...
1. Introduction A few days ago, a development col...
Standalone hbase, let’s talk about it first. Inst...
This article example shares the specific code of ...
On some websites, you can often see some pictures...
MySQL Boolean value, stores false or true In shor...
1. Environmental Preparation The IP address of ea...
The following HTML tags basically include all exis...
Table of contents Avoid using the spread operator...
1. After installing MySQL 5.6, it cannot be enabl...
Scenario: An inspection document has n inspection...