JQuery——BreakingNews.js新闻滚动效果

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('&nbsp;');
						$(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",
});复制

JQuery——BreakingNews.js新闻滚动效果

BreakingNews.js新闻滚动效果

breakingnews.js部分

BreakingNews.css部分

纯js判断文件流格式类型：pdf,doc,docx,xls,xlsx,ppt,pptx一次搞定！

three.js 场景中如何彻底删除模型和性能优化

uniapp使用md5加密 js使用md5加密

Vue项目引入translate.js 国际化自动翻译组件

【筛选方法汇总】js简单实现多条件过滤数组对象，返回新的数组，根据一个数组内的元素，过滤另一个数组对象【持续更新】

华为OD机试 - 推荐多样性（Java & JS & Python & C）

自适应插件autofit.js使用(这里演示vue项目)

Error: module ‘pages下某.js‘ is not defined 微信小程序

【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建

Ajax学习（3rd）

前端哥

纯js判断文件流格式类型：pdf,doc,docx,xls,xlsx,ppt,pptx一次搞定！

three.js 场景中如何彻底删除模型和性能优化

uniapp使用md5加密 js使用md5加密

Vue项目引入translate.js 国际化自动翻译组件

【筛选方法汇总】js简单实现多条件过滤数组对象，返回新的数组，根据一个数组内的元素，过滤另一个数组对象【持续更新】

华为OD机试 - 推荐多样性（Java & JS & Python & C）

自适应插件autofit.js使用(这里演示vue项目)

Error: module ‘pages下某.js‘ is not defined 微信小程序

【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建

jQuery的表格插件jqGrid 使用记录

1
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

2
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

3
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

4
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

5
html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

6
导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994

7
Access-Control-Allow-Origin跨域解决及详细介绍

2024-02-03 12:02:13993

8
Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993

9
基于vue.js在线购物商城系统设计与实现(uni-app框架 PHP后台) 研究背景和意义、国内外现状

2024-02-04 11:02:02992

10
vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992

	(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);

	.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%);
	}

	<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

JQuery——BreakingNews.js新闻滚动效果

BreakingNews.js新闻滚动效果

breakingnews.js部分

BreakingNews.css部分

微信扫一扫：分享