JQuery 公告滚动(跑马灯特效)

短命女 2021-09-13 14:48 383阅读 0赞

一.公告向左滚动

![20170713135450828][]

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> html,body,div,ul,li{ margin: 0; padding: 0; } a{text-decoration: none;} .noticelist{ width: 730px; white-space: nowrap; overflow: hidden; background: #ccc; margin: 20px auto; padding: 0px 10px; } .noticelist ul{ display: inline-block; *display:inline; _zoom:1; *zoom:1; } .noticelist li{ margin-right: 25px; display: inline-block; line-height: 60px; *display:inline; _zoom:1; *zoom:1; } .noticelist>ul>li>a{ color: #fff; } .noticelist>ul>li:hover a{ color: #f00; } .noticelist>ul>li>a>span{ margin-left: 20px; } </style> </head> <body> <div class="noticelist" id="noticelist"> <ul id="noticetext"> <li><a href="info-info.php">这里是公告的内容1 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容2 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容3 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容4 <span>[2016.01.01] </span> </a></li> </ul> </div> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var area = document.getElementById('noticelist'), len=$(area).find('li').length, con = document.getElementById('noticetext'), cju = document.createElement("ul");//创建一个ul来存放内容 if(len>=4){//内容大于4个菜滚动 area.appendChild(cju);//创建的ul放在con1的后面 cju.innerHTML = con.innerHTML;//把内容1复制给内容2 var myScroll =setInterval(function(){ if(cju.offsetWidth-area.scrollLeft<=0)//offsetWidth 是对象的可见宽度 area.scrollLeft-=con.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度 else{ area.scrollLeft++ } },50); area.onmouseover = function(){ clearInterval(myScroll); } area.onmouseout = function(){ myScroll =setInterval(function(){ if(cju.offsetWidth-area.scrollLeft<=0)//offsetWidth 是对象的可见宽度 area.scrollLeft-=con.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度 else{ area.scrollLeft++ } },50); } } }); </script> </body> </html>

二.向上滚动

![20170713142606132][]

1.js方式

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> html,body,div,ul,li{ margin: 0; padding: 0; } a{text-decoration: none;} .noticelist{ width: 730px; white-space: nowrap; overflow: hidden; background: #ccc; margin: 20px auto; padding: 0px 10px; height:200px; } .noticelist ul{ zoom:1; *zoom:1; } .noticelist ul:after{ content: " "; height: 0; visibility: hidden; display: block; clear: both; } .noticelist li{ float: left; width: 100%; line-height: 60px; } .noticelist>ul>li>a{ color: #fff; } .noticelist>ul>li:hover a{ color: #f00; } .noticelist>ul>li>a>span{ margin-left: 20px; } </style> </head> <body> <div class="noticelist" id="noticelist"> <ul id="noticetext"> <li><a href="info-info.php">这里是公告的内容1 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容2 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容3 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容4 <span>[2016.01.01] </span> </a></li> </ul> </div> <script type="text/javascript"> var area = document.getElementById('noticelist'); var con1 = document.getElementById('noticetext'); var con2 = document.createElement("ul");//创建一个ul来存放内容 con2.setAttribute("class", "cjul");//给新的元素ul添加class area.appendChild(con2);//创建的ul放在con1的后面 var speed = 50; area.scrollTop = 0; con2.innerHTML = con1.innerHTML;//把内容1复制给内容2 var myScroll = setInterval("scrollUp()",speed); area.onmouseover = function(){ clearInterval(myScroll); } area.onmouseout = function(){ myScroll = setInterval("scrollUp()",speed); } function scrollUp(){ if(area.scrollTop >= con1.scrollHeight) { area.scrollTop = 0; }else{ area.scrollTop ++; } } </script> </body> </html>

2.有间歇性的滚动（滚动一个，然后暂停下，再继续滚）

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> html,body,div,ul,li{ margin: 0; padding: 0; } a{text-decoration: none;} .noticelist{ width: 730px; white-space: nowrap; overflow: hidden; background: #ccc; margin: 20px auto; padding: 0px 10px; height:200px; } .noticelist ul{ zoom:1; *zoom:1; } .noticelist ul:after{ content: " "; height: 0; visibility: hidden; display: block; clear: both; } .noticelist li{ float: left; width: 100%; line-height: 60px; } .noticelist>ul>li>a{ color: #fff; } .noticelist>ul>li:hover a{ color: #f00; } .noticelist>ul>li>a>span{ margin-left: 20px; } </style> </head> <body> <div class="noticelist" id="noticelist"> <ul id="noticetext"> <li><a href="info-info.php">这里是公告的内容1 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容2 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容3 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容4 <span>[2016.01.01] </span> </a></li> </ul> </div> <script type="text/javascript"> var area = document.getElementById('noticelist'); var iliHeight = 60;//单行滚动的高度 var speed = 50;//滚动的速度 var time; var delay= 2000; area.scrollTop=0; area.innerHTML+=area.innerHTML;//克隆一份一样的内容 function startScroll(){ time=setInterval("scrollUp()",speed); area.scrollTop++; } function scrollUp(){ if(area.scrollTop % iliHeight==0){ clearInterval(time); setTimeout(startScroll,delay); }else{ area.scrollTop++; if(area.scrollTop >= area.scrollHeight/2){ area.scrollTop =0; } } } setTimeout(startScroll,delay) </script> </body> </html>

3.JQuery方式

![20170713150745326][]

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> html,body,div,ul,li{ margin: 0; padding: 0; } a{text-decoration: none;} .noticelist{ width: 730px; white-space: nowrap; overflow: hidden; background: #ccc; margin: 20px auto; padding: 0px 10px; height:60px; } .noticelist ul{ zoom:1; *zoom:1; } .noticelist ul:after{ content: " "; height: 0; visibility: hidden; display: block; clear: both; } .noticelist li{ float: left; width: 100%; line-height: 60px; } .noticelist>ul>li>a{ color: #fff; } .noticelist>ul>li:hover a{ color: #f00; } .noticelist>ul>li>a>span{ margin-left: 20px; } </style> </head> <body> <div class="noticelist" id="noticelist"> <ul id="noticetext"> <li><a href="info-info.php">这里是公告的内容1 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容2 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容3 <span>[2016.01.01] </span> </a></li> <li><a href="info-info.php">这里是公告的内容4 <span>[2016.01.01] </span> </a></li> </ul> </div> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ setInterval(gun,5000); function gun(){ $('#noticetext li').first().slideUp();//向上滚动 $('#noticetext').append('<li>'+$('#noticetext li').first().html()+'</li>'); setTimeout(function(){ $('#noticetext li').first().remove(); },500); } }); </script> </body> </html>

或是

function gun()\{  
  var first = $('\#noticetext li:first');  
   $('\#noticetext').append($(first).clone(true));//在gga类里克隆并追加一个first 元素：  
   $(first).slideUp(500,function()\{  
     first.remove();  
   \});//移除 first  
\}

setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次   
而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式   
将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的 .  
 这样,函数外的setTimeout在执行函数时再次触发setTimeout从而形成周而复始的定时效果

[20170713135450828]: /images/20210813/efbcac38da444979b84debebca45c24c.png
[20170713142606132]: /images/20210813/390705b1e380493e916c2115592e11f5.png
[20170713150745326]: /images/20210813/3b7a2467d0174a53bab9d34e2fb58b0c.png