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 |
