jQuery achieves the effect of advertisement scrolling up and down

jQuery achieves the effect of advertisement scrolling up and down

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:
  • jQuery implements the detailed code of the up and down scrolling bulletin board
  • News scroll up and down jQuery super simple (must read)
  • How to use jQuery to achieve text scrolling effect
  • Jquery digital scroll up and down dynamic switching plug-in
  • jQuery code that scrolls up and down with the mouse
  • jQuery sample code to achieve up and down scrolling effect
  • How to implement jquery text scrolling up and down
  • A small example of clicking and scrolling up and down written in JQuery
  • jquery up and down scrolling ads

<<:  How to configure Java environment variables in Linux system

>>:  Summary of common optimization operations of MySQL database (experience sharing)

Recommend

Use of MySQL truncate table statement

The Truncate table statement is used to delete/tr...

CSS implements the web component function of sliding the message panel

Hello everyone, I wonder if you have the same con...

How to expand the disk space of Linux server

Table of contents Preface step Preface Today I fo...

vue+el-upload realizes dynamic upload of multiple files

vue+el-upload multiple files dynamic upload, for ...

Example verification MySQL | update field with the same value will record binlog

1. Introduction A few days ago, a development col...

How to deploy hbase using docker

Standalone hbase, let’s talk about it first. Inst...

Vue implements file upload and download

This article example shares the specific code of ...

CSS to achieve scrolling image bar example code

On some websites, you can often see some pictures...

How to store false or true in MySQL

MySQL Boolean value, stores false or true In shor...

Implementation of LNMP for separate deployment of Docker containers

1. Environmental Preparation The IP address of ea...

How familiar are you with pure HTML tags?

The following HTML tags basically include all exis...

Tips for writing concise React components

Table of contents Avoid using the spread operator...

MySQL 5.6 root password modification tutorial

1. After installing MySQL 5.6, it cannot be enabl...

The whole process of implementing the summary pop-up window with Vue+Element UI

Scenario: An inspection document has n inspection...