<!DOCTYPE html>
<html>
<head>
<title>JQuery Referencing</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>window.jQuery || document.write('<script src="jquery-3.3.1.js">\x3C/script>')</script>
<style type="text/css">
body{
width: 400px;
margin: 0px auto;
}
.ticker{
background-color: khaki;
width: 480px;
height: 180px;
border: 3px solid darkred;
overflow: hidden;
border-radius: 15px;
padding: 10px;
}
ul{
margin: 1px;
padding: 1px;
}
li{
text-align: justify;
list-style: none;
padding: 10px;
border-bottom: 1px dashed blue;
}
</style>
<script>
var interval;
function startTicker()
{
$("#news li:first").slideUp(function(){
$(this).appendTo($("#news")).slideDown();
});
}
interval = setInterval(startTicker, 3000);
function stopTicker(){
clearInterval(interval);
}
$(document).ready(function(){
$("#news").hover(function(){
stopTicker()
}, function(){
interval = setInterval(startTicker, 2000);
})
});
</script>
</head>
<body>
<div class="ticker">
<ul id="news">
<li>1 This is first news. 1This is first news. This is first news. 1This is first news. This is first news. This is first news. This is first news. </li>
<li>2 This is first news. T2his is first news. This is first news. T2his is first news. This is first news. This is first news. This is first news. </li>
<li>3 This is first news. Th3is is first news. This is first news. Th3is is first news. This is first news. This is first news. This is first news. </li>
<li>4 This is first news. Thi4s is first news. This is first news. Thi4s is first news. This is first news. This is first news. This is first news. </li>
<li>5 This is first news. This5 is first news. This is first news. This5 is first news. This is first news. This is first news. This is first news. </li>
<li>6 This is first news. This 6is first news. This is first news. This 6is first news. This is first news. This is first news. This is first news. </li>
</ul>
</div>
</body>
</html>
Comments
0 B
|0 👍
/0 👎
0 B
|👍
/👎