HTML/JQuery/CSS实现滚动公告特效组件(可配置)

文章目录

• 1 需求
• 2 js插件

1 需求

需求是需要在几个页面上去滚动，可经过后端可配置

2 js插件

本人自己写了个插件，首先先在页面上去创建一个div和引入一个js

<div id="main"></div>
<script src="js/welcom.js"></script>

js插件内容

$(function(){
	//获取首次url中的参数
	speech_init();
	//获取数据
	getNoteData();
	//开启定时获取数据
	initSpeech();
})



var speech_config ={
	"postion":	"left", // 方向  left、right
	"speed":100,        // 速度  慢：50、正常：100、加快：800 
	"list":[] ,         // 数据集合 属性:content  字体大小:fontSize 字体颜色:fontColor
	"timeout":60000	    // 请求时间间隔 60000 = 1分钟
};

//尺寸
var speech_size = {
	 big : "3rem",
	 mid : "2rem",
	 sml : "1rem"
};

//用来存储业务变量
var speech_info = {
    tenantId : "",
	id : ""
};



//首次进入获取url中的参数
function speech_init(){
	var url = window.location.search;
	//定义一个空对象
	var urlObj = {};
	//如果字符串里面存在?
	if(url.indexOf("?") != -1){
		//从url的索引1开始提取字符串
		var str = url.substring(1);
		//如果存在&符号，则再以&符号进行分割
		var arr = str.split("&");
		//遍历数组
		for(var i=0; i<arr.length; i++){
			urlObj[arr[i].split("=")[0]] = unescape(arr[i].split("=")[1]);
		}
	}
	if(urlObj.tenantId == null && urlObj.tenantId == ''){
		console.warn("tenantId参数为空");
		return false;
	}
	if(urlObj.id == null && urlObj.id == ''){
		console.warn("id参数为空");
		return false;
	}
	speech_info.tenantId = urlObj.tenantId;
	speech_info.id = urlObj.id;
}


//请求数据
function getNoteData(){
	//先完全清空，防止重复追加
	$("#note").html('');
	//参数
	let param = {
		"tenantId":speech_info.tenantId,
		"bigscreenId":speech_info.id
	}
	//请求自己的后端服务去获取数据
	//数据结构如下
	//{
	//"content":"内容",
	//"fontSize":"大",
	//"fontColor":"red"
	//}
	btwApiUtil.post('getXXX',param,
	function(resp) {
		var configs = new Object();
		configs = speech_config;
		var tip = [];
		//循环插入到集合里面
		for(var i = 0;i<resp.data.length;i++){
			tip.push(resp.data[i]);
		}
		configs.list = tip;
		console.log("准备开始滚动")
		//生成滚动内容
		roll(configs);
	});
}




/*初始化方法*/
function initSpeech(){
	$("#main").html('<div style="position: fixed;z-index: 999999999;width: 100%;">'+
	'				 <marquee class="noticeText ng-binding" direction="left"'+
	'			 	 scrollamount="100" '+
	'			 	 scrolldelay="1000" loop="0" width="100%"'+
	'			 	  οnmοuseοver="this.stop();" '+
	'			 	  οnmοuseοut="this.start();"  '+
	'			 	  style="width: 100%;color:yellow" id="note"></marquee>'+
	'			</div>');
	
	console.log("[welcom]欢迎语初始化成功");
	//定时任务，每隔一分钟刷新一次
	setInterval(function(){
		getNoteData();
	},speech_config.timeout)
}

/*
 * 开始滚动
 * 参数 configs 对象
 */
function roll(configs){
	//设置样式
	$("#note").attr("direction",configs.postion);
	$("#note").attr("scrollamount",configs.speed);
	//请求数据
	var dom = "";
	console.log(dom)
	let dataList = configs.list;
	
//	dataList =  getMock();
	
	for(var i = 0;i<dataList.length;i++){
		var obj = new Object();
		obj.fontColor = dataList[i].fontColor;
		obj.fontSize = dataList[i].fontSize;
		obj.content = dataList[i].content;
		let genderDom = createNote(obj);
		dom = dom + genderDom;
	}
	var flag = addNote(dom);
	if(flag){
		console.log("[welcom]欢迎语渲染完成")
	}
}



/*追加元素*/
function addNote(dom){
	if(dom!="" && dom!=null){
		$("#note").append(dom.toString());
		return true;
	}else{
		console.warn("未查找到数据！");
		return false;
	}
}

/*创建元素*/
function createNote(obj){
	if(obj.fontSize == '大'){
		obj.fontSize = speech_size.big;
	}else if(obj.fontSize == '中'){
		obj.fontSize = speech_size.mid;
	}else if(obj.fontSize == '小'){
		obj.fontSize = speech_size.sml;
	}
	
	var domStr = '<span style="color:'+obj.fontColor+';font-size:'+obj.fontSize+'">'
	+ obj.content
	+'</span>'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	return domStr;	
}

/*
 * 鼠标悬停禁止效果开关
 * desc: 默认是开启的
 */
function closeStop(){
	$("#note").removeAttr("onmouseover");
	$("#note").removeAttr("onmouseout");
}
function openStop(){
	$("#note").attr("onmouseover","this.stop();");
	$("#note").attr("onmouseout","this.start();");
}


function getMock(){
	let dataList = [
		{
			"fontColor":"yellow",
			"content":"[小]欢迎某某!",
			"fontSize":"小"
		},
		{
			"fontColor":"red",
			"content":"[中]欢迎某某!",
			"fontSize":"中"
		},
		{
			"fontColor":"blue",
			"content":"[大]热烈欢迎某某某",
			"fontSize":"大"
		},
	];
	return dataList;
}

更多干货，关注微信公众号