BreakingNews.js新闻滚动效果
这里是直观效果展示
使用这种效果我们需要三个包
jq.min.js
BreakingNews.css
breakingnews.js
breakingnews.js部分
(function(jQuery){ $.fn.BreakingNews = function(settings){ var defaults={ background :'#FFF', title :'NEWS', titlecolor :'#FFF', titlebgcolor :'#5aa628', linkcolor :'#333', linkhovercolor :'#5aa628', fonttextsize :16, isbold :false, border :'none', width :'100%', autoplay :true, timer :3000, modulid :'brekingnews', effect :'fade' //or slide }; var settings=$.extend(defaults,settings); return this.each(function(){ settings.modulid="#"+$(this).attr("id"); var timername=settings.modulid; var activenewsid=1; if (settings.isbold==true) fontw='bold'; else fontw='normal'; if (settings.effect=='slide') $(settings.modulid+' ul li').css({'display':'block'}); else $(settings.modulid+' ul li').css({'display':'none'}); $(settings.modulid+' .bn-title').html(settings.title); $(settings.modulid).css({'width':settings.width, 'background':settings.background, 'border':settings.border, 'font-size':settings.fonttextsize }); $(settings.modulid+' ul').css({'left':$(settings.modulid+' .bn-title').width()+40}); $(settings.modulid+' .bn-title').css({'background':settings.titlebgcolor,'color':settings.titlecolor,'font-weight':fontw}); $(settings.modulid+' ul li a').css({'color':settings.linkcolor,'font-weight':fontw,'height':parseInt(settings.fonttextsize)+6}); $(settings.modulid+' ul li').eq( parseInt(activenewsid-1) ).css({'display':'block'}); // Links hover events ...... $(settings.modulid+' ul li a').hover(function() { $(this).css({'color':settings.linkhovercolor}); }, function () { $(this).css({'color':settings.linkcolor}); } ); // Arrows Click Events ...... $(settings.modulid+' .bn-arrows span').click(function(e) { if ( $(this).attr('class')=="bn-arrows-left" ) BnAutoPlay('prev'); else BnAutoPlay('next'); }); // Timer events ............... if (settings.autoplay==true) { timername=setInterval(function(){BnAutoPlay('next')},settings.timer); $(settings.modulid).hover(function() { clearInterval(timername); }, function() { timername=setInterval(function(){BnAutoPlay('next')},settings.timer); } ); } else { clearInterval(timername); } //timer and click events function ........... function BnAutoPlay(pos) { if ( pos=="next" ) { if ( $(settings.modulid+' ul li').length>activenewsid ) activenewsid++; else activenewsid=1; } else { if (activenewsid-2==-1) activenewsid=$(settings.modulid+' ul li').length; else activenewsid=activenewsid-1; } if (settings.effect=='fade') { $(settings.modulid+' ul li').css({'display':'none'}); $(settings.modulid+' ul li').eq( parseInt(activenewsid-1) ).fadeIn(); } else { $(settings.modulid+' ul').animate({'marginTop':-($(settings.modulid+' ul li').height()+20)*(activenewsid-1)}); } } // links size calgulating function ........... $(window).resize(function(e) { if ( $(settings.modulid).width()<360 ) { $(settings.modulid+' .bn-title').html(' '); $(settings.modulid+' .bn-title').css({ 'width':'4px', 'padding':'10px 0px'}); $(settings.modulid+' ul').css({'left':4}); }else { $(settings.modulid+' .bn-title').html(settings.title); $(settings.modulid+' .bn-title').css({ 'width':'auto', 'padding':'10px 20px'}); $(settings.modulid+' ul').css({'left':$(settings.modulid+' .bn-title').width()+40}); } }); }); }; })(jQuery);
BreakingNews.css部分
.BreakingNewsController { width: 100%; overflow: hidden; background: #FFF; height: auto; position: relative; } .BreakingNewsController .bn-title { display: inline-block; float: left; padding: 10px 20px; background: #5aa628; color: #FFF; } .BreakingNewsController ul { padding: 0; margin: 0; display: block; list-style: none; position: absolute; left: 180px; right: 50px; } .BreakingNewsController ul li { list-style: none; padding: 10px 20px; display: none; } .BreakingNewsController ul li a { text-decoration: none; color: #333; display: inline-block; overflow: hidden; padding: 0; font-size: 16px; } .BreakingNewsController ul li a span { margin-left: 26px; color: #4b4b4b; opacity: 0.6; } .BreakingNewsController .more { display: inline-block; float: right; width: 120px; position: absolute; right: 0; top: 0; bottom: 0; margin-right: 30px; height: 38px; margin-top: 18px; } .BreakingNewsController .more a { display: inline-block; width: 100%; height: 100%; border: 1px solid #898989; text-align: center; line-height: 38px; border-radius: 20px; box-sizing: border-box; } .BreakingNewsController .more a:hover{ color: #fff; border: 1px solid #fff; background-color: #898989; } .BreakingNewsController .bn-arrows { display: inline-block; float: right; width: 120px; position: absolute; right: 0; top: 0; bottom: 0; margin-right: 30px; } .BreakingNewsController .bn-arrows span { display: block; width: 20px; position: absolute; top: 0; bottom: 0; cursor: pointer; opacity: 0.2; } .BreakingNewsController .bn-arrows span:hover { opacity: 1; } /* .BreakingNewsController .bn-arrows-left{ left:0; background:url(../img/bn-arrows.png) left center no-repeat;} .BreakingNewsController .bn-arrows-right{right:10px; background:url(../img/bn-arrows.png) right center no-repeat;} */ .easing a, .easing span { transition: .25s linear; -moz-transition: .25s linear; -webkit-transition: .25s linear; } .bn-title { font-size: 18px; font-weight: bold !important; text-align: center; } .border{ float: left; display: block; width: 1px; height: 15px; margin-top: 16px; opacity: 0.3; background: #898989; } .index_aside { position: absolute; top: 693px; z-index: 99; left: 50%; transform: translate(-50%, -50%); }
css部分可以自行调整
<aside class="index_aside wow zoomIn"> <div class="BreakingNewsController easing" id="breakingnews" style="width: 100%; background: rgb(255, 255, 255); border-radius: 4px; box-shadow: -8px 0px 107.8px 0.16px rgba(165,165,165,0.39); font-size: 16px;padding: 16px 0;"> <div class="bn-title" style=" font-weight: normal; width: 125px; padding: 10px 20px;"></div> <span class="border"></span> <ul style="left: 125px; "> <li><a href="###">【重要通知】xxxxxxxxxxxxxxxxxxxxxxxxxxxxx <span>2022-09-14</span></a></li> <li><a href="###">【重要通知】xxxxxxxxxxxxxxxxxxxxxxxxxxxxx <span>2022-09-14</span></a></li> <li><a href="###">【重要通知】xxxxxxxxxxxxxxxxxxxxxxxxxxxxx <span>2022-09-14</span></a></li> <li><a href="###">【重要通知】xxxxxxxxxxxxxxxxxxxxxxxxxxxxx <span>2022-09-14</span></a></li> <li><a href="###">【重要通知】xxxxxxxxxxxxxxxxxxxxxxxxxxxxx <span>2022-09-14</span></a></li> <li><a href="###">【重要通知】xxxxxxxxxxxxxxxxxxxxxxxxxxxxx <span>2022-09-14</span></a></li> </ul> <!-- 这里的bn-arrows就是点击切换事件，我这里默认给去掉了 --> <!-- <div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div> --> <div class="more"> <a href="javascript:;">MORE</a> </div> </div> </aside>
最后附上配置属性代码
$("#breakingnews").BreakingNews({ background: "#FFF", title: "新闻资讯", titlecolor: "#119853", titlebgcolor: "#fff", linkcolor: "#333", linkhovercolor: "#099", fonttextsize: 18, isbold: false, // border: "solid 2px #099", width: "1200px", timer: 3000, autoplay: true, effect: "slide", });
相关配置如下：
参数 描述 默认值
background 背景颜色 #FFF
title 标题文本 NEWS
titlecolor 标题字体颜色 #FFF
titlebgcolor 标题背景颜色 #5aa628
linkcolor 链接颜色 #333
linkhovercolor 链接 hover 颜色值 #5aa628
fonttextsize 字体大小，单位默认为 px，如果要使用其他单位，请用字符串，如 ’16pt’ 16
isbold 粗体 false
border 边框，例如 ‘1px solid #099′ none
width 宽度 100%
autoplay 自动播放 true
timer 滚动间隔，以毫秒为单位 3000
effect 动画过度方式，可选 fafde（淡入淡出）或 slide（向上滑动） fade
