js+html實現大屏公告滾動效果
阿新 • • 發佈：2020-08-20
效果如圖；
實現此效果的程式碼：
color.js
(function($){ $.fn.myLink = function(options){ var defaults = { 'color' : '#333', 'fontSize' : '14px' }; var settings = $.extend({},defaults,options); this.each(function(){ $(this).append(' ' + $(this).attr('href')); }); return this.css({ 'color': settings['color'], 'fontSize': settings['fontSize'] }); }; })(jQuery);
scroll.js
// JavaScript Document (function($){ $.fn.myScroll = function(options){ //預設配置 var defaults = { speed:40, //滾動速度,值越大速度越慢 rowHeight:30 //每行的高度 }; var opts = $.extend({}, defaults, options),intId = []; function marquee(obj, step){ obj.find("ul").animate({ marginTop: '-=1' },0,function(){ //若ul向上移動的距離大於一個li的高度，將第一個li放到末尾去，再將新ul的margin-top設為0 vars = Math.abs(parseInt($(this).css("margin-top"))); if(s >= step){ $(this).find("li").slice(0, 1).appendTo($(this)); $(this).css("margin-top", '0px'); } }); } //$(' ').myScroll this.each(function(i){ //this指jQuery物件的例項，也就是#(' ') var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); _this.hover(function(){ clearInterval(intId[i]); },function(){ intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); }); }); } })(jQuery);
bulletin.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src='js/scroll.js'></script> <script type="text/javascript" src='js/color.js'></script> <style type="text/css"> .bcon{ height: 270px; width: 350px; margin: 100px auto; border: 1px solid #ccc; } .bcon .title{ width: 100%; border-bottom: 1px solid #ccc; height: 35px; } .bcon b{ font-size: 16px; border-top:2px solid #63B8FF; padding:5px 10px; display:inline-block; } .bcon a{ float: right; font-size: 14px; line-height: 35px; color: rgb(170, 170, 170); text-decoration: none; } .bcon a:hover{ color: #63B8FF; } .list_lh{ height: 235px; width: 100%; overflow:hidden; } .list_lh ul{ padding-left: 0px; list-style:none; } .lieven{ background-color: #eee; } .list_lh li p{ padding-left: 10px; height:30px; line-height:30px; margin: 0; overflow: hidden; } .list_lh li p a{ float:left; text-decoration:none; color: #333; font-size: 14px; } .list_lh li p a:hover{ color: #63B8FF; } </style> </head> <body> <div class="bcon"> <div class="title"><b>辦件公示</b><a href="#">更多 ></a></div> <div class="list_lh"> <ul> <li><p><a target='_blank' href="http://baidu.com">武漢香華林商業發展有限公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢市海鼎置業有限責任公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢聯發瑞盛置業有限公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢綠地濱江置業有限公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢聯發瑞盛置業有限公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢泰天工程機械有限公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢三江航天嘉園房地產開發有限公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢雙龍木業發展有限責任公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢舜安工貿有限公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">鑫磊博覽城有限公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢市江漢區房地產公司</a></p></li> <li><p><a target='_blank' href="http://baidu.com">武漢運通置業有限公司</a></p></li> </ul> </div> </div> <script type="text/javascript"> $(function(){ $("div.list_lh").myScroll({ speed:40, //數值越大，速度越慢 rowHeight:30 //li的高度 }); $('li:even').addClass('lieven'); $('ul li a').myLink({ 'color': '#111', 'fontSize': '13px' }) }); </script> </body> </html>