Horizontal infinite loop newsticker

Developer
Laura Moraiti
Size
2,634 Kb
Views
125,488
  1. Horizontal infinite loop newsticker Previews
  2. Horizontal infinite loop newsticker HTML Codes
  3. Horizontal infinite loop newsticker CSS Codes
  4. Horizontal infinite loop newsticker JS Codes

How do I make an horizontal infinite loop newsticker?

Horizontal infinite loop newsticker to be used on news sites. What is a horizontal infinite loop newsticker? How do you make a horizontal infinite loop newsticker? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.

Horizontal infinite loop newsticker Previews
IQ Test

Horizontal infinite loop newsticker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Horizontal infinite loop newsticker</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="marquesina">	<ul> <li><span class="colgado">Libro</span>
Las mujeres de Tacuarembó</li> <li><span class="colgado">22 de marzo</span>
<a href="">Mónica Navarro en la Sala Zitarrosa</a></li> <li><span class="colgado">Confianza</span>
<a href="">Harnam Kaur, un ejemplo de amor propio</a></li> <li><span class="colgado">EXCLUSIVA LARED21 TV</span>
<a href="">La OPP mantendrá la misma asignación de recursos cuestionada por los intendentes blancos (economista Gabriel Frugoni, Director)</a></li> <li><span class="colgado">OPOSICIÓN</span>
Lacalle Pou califica a Cristina Fernández de “desequilibrada”; y cita a Almagro al Parlamento</li> <li><span class="colgado">ENFRENTADOS</span>
<a href="">Fuerte polémica entre Corte de Justicia y la Institución de DD.HH</a></li> </ul> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Horizontal infinite loop newsticker - Script Codes CSS Codes

* {box-sizing: border-box;}
ul { margin: 0; padding: 0; list-style: none;
}
ul li { line-height: 35px;	font-size: .8em;	display: inline-block;
}
.marquesina { height: 35px; overflow: hidden; background-color: #fff; padding: 0 1em;
}
.colgado { text-transform: uppercase; font-size: .8em; color: #999;	display: inline;
}
a {	text-decoration: none;	display: inline;
}
li:after { content: url(http://cero.lared21.com/wp-content/themes/lared21/images/arr.gif); padding: 0 1em;
}

Horizontal infinite loop newsticker - Script Codes JS Codes

$(document).ready(function($) {
// Ancho del ul
function width(li, ul) { var ulw = 0; $(li).each(function(){ w = $(this).width(); ulw = ulw + w + 20; }); $(ul).css('width', ulw);
}
width('.marquesina ul li', '.marquesina ul');
// Set interval
function marquesina(li, ul) { var first = $(li).first().width(); $(ul).animate({ 'marginLeft' : '-' + first}, { duration: 1000, complete: function() { $(this).css('marginLeft', '0'); one = $(li).first().detach(); $(li).last().parent().append(one); } });
}
myInter = setInterval(function() { marquesina('.marquesina ul li', '.marquesina ul');
}, 6000);
// Stop on hover and then resume
$('.marquesina').hover(function(){ clearInterval(myInter); }, function() { myInter = setInterval(function() { marquesina('.marquesina ul li', '.marquesina ul');
}, 6000); });
});
Horizontal infinite loop newsticker - Script Codes
Horizontal infinite loop newsticker - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3
Size 2,634 Kb
Views 125,488
Do you need developer help for Horizontal infinite loop newsticker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Laura Moraiti (Fixie) Script Codes
Name
Responsive and friendly table
Striped background for a container with more than one element
Two column of responsive height
User card
Poll
Breadcrumb made with jQuery
Simple gallery jquery
Unconventional slideshow
Text and headings flow for a health site, on the making
Responsive three column fixed layout
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!