页面添加悬浮按钮进行切换并添加水印的方法

页面添加悬浮按钮进行切换并添加水印的方法

技术杂谈小彩虹2021-08-21 0:12:24250A+A-

背景: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);
})();

效果:

好啦,今天的内容就分享到这里,有啥问题请留言!

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们