背景：APP页面位置有限，列表形式展示，需要做一个悬浮按钮进行切换列表，并给切换的列表添加水印便于区分。
孙叫兽，前端全栈程序员，java程序员，微信公众号：电商程序员
目录
悬浮按钮的实现；
body:
<!-- 在首页添加一个悬浮按钮 -->
<div id="topBtn">切换</div>
css:
#topBtn {
position: fixed;
bottom: 50px;
right: 50px;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
color: #FFF;
z-index: 999;
background: #FF5722;
cursor: pointer;
border-radius: 30px;
box-shadow: 0px 0px 20px #000;
}
js:(根据自己的业务进行实现，这里不做展示，jquery操作即可)
//添加悬浮按钮切换保全列表功能。
$(function () {
$("#topBtn").click(function () {
// $("html,body").animate({scrollTop: $("body").offset().top}, 600);
});
});
页面效果：这个让它固定在右下角，自己根据需求调整样式即可，每个页面都可以复制这个功能，如果有需要。
水印功能的实现：
目录结构：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>孙叫兽测试水印功能</title>
</head>
<body>
<script type="text/javascript" src="js/waterMark.js" ></script>
欢迎来到孙叫兽的博客
</body>
</html>
javascript:
(function waterMark(){
function textBecomeImg(text,fontsize,fontcolor){
var canvas = document.createElement('canvas');
$buHeight = 0;
if(fontsize <= 32){ $buHeight = 99; }
else if(fontsize > 32 && fontsize <= 60 ){ $buHeight = 2;}
else if(fontsize > 60 && fontsize <= 80 ){ $buHeight = 4;}
else if(fontsize > 80 && fontsize <= 100 ){ $buHeight = 6;}
else if(fontsize > 100 ){ $buHeight = 10;}
canvas.height=fontsize + $buHeight ;
canvas.padding=30;
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width*2, canvas.height);
context.fillStyle = fontcolor;
context.font=fontsize+"px Arial";
context.textAlign = "center";
context.textBaseline = 'middle';
context.fillText(text,0,fontsize/2);
var canvasWidth = canvas.width/99;
canvasWidth = context.measureText(text).width;
canvas.width = 450;
canvas.height = 200;
context.fillStyle = fontcolor;
context.font=fontsize+"px Arial";
context.textBaseline = 'middle';
context.fillText(text,0,fontsize/2);
var dataUrl = canvas.toDataURL('image/png');
return dataUrl;
}
// var text = new Date()+'111';
var text ='保全';
var shuiyinDiv = document.createElement('div');
var style = shuiyinDiv.style;
style.position = 'fixed';
style.left = 0;
style.top = '-10%';
style.width = '200%';
style.height = '200%';
style.opacity = '0.1';
style.background = "url("+textBecomeImg(text,52,"red")+")";
style.zIndex = 9999999991;
style.transform = "translateX(-100px) rotate(-30deg)";
style.pointerEvents = "none";
document.body.appendChild(shuiyinDiv);
})();
效果：
好啦，今天的内容就分享到这里，有啥问题请留言！
