页面添加水印

最新推荐文章于 2024-07-09 09:00:05 发布

wcy10086

最新推荐文章于 2024-07-09 09:00:05 发布

阅读量1.9k

点赞数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="statics/libs/jquery.min.js"></script>
<style type="text/css">
body, html {
   background: #f5f7f9;
}

.layout {

}

.layout-logo {
   width: 100px;
   height: 40px;
   background: #5b6270;
   border-radius: 3px;
   float: left;
   position: relative;
   top: 15px;
   left: 20px;
}

.layout-content {
   position: absolute;
   right: 0;
   left: 0;
   top: 90px;
   bottom: 90px;
   margin: 15px;
   overflow: hidden;
   background: #fff;
   border-radius: 4px;
}

.layout-content-main {
   min-height: 400px;
   padding: 10px;
}

.layout-copy {
   text-align: center;
   padding: 5px 0 10px;
   color: #9ea7b4;
   position: absolute;
   bottom: 0;
   right: 0;
   left: 0;
   width: 100%;
   height: 90px;
}

.layout-top {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   width: 100%;
   height: 90px;
}
</style>
<style type="text/css" media="screen">
.cover {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 999999999999999;
   margin-right: 0px;
   margin-left: 0px;
   margin-top: 5px;
   margin-bottom: 140px;
   color: #fff;
   color: #ccc\0;
   display: block;
   padding: 2px 1px;
   font-family: '宋体';
   font-size: 16px;
   font-weight: bold;
   white-space: nowrap;
   text-shadow: 1px 0 0 #eee;
   transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -moz-opacity: 0.3;
   opacity: 0.3;
   -ms-filter:
       "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
}

.cover-Blink-area {
   position: absolute;
   text-align: center;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   display: block;
   z-index: 999999999999999;
   pointer-events: none;
   overflow: hidden;
}

.cover-Blink {
   display: inline-block;
   margin-right: 50px;
   margin-left: 50px;
   margin-top: 140px;
   margin-bottom: 140px;
   color: red;
   padding: 2px 1px;
   font-family: '宋体';
   font-size: 16px;
   font-weight: bold;
   color: pink;
   white-space: nowrap;
   text-shadow: 1px 0 0 rgba(0, 0, 0, .2);
   transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -o-transform: rotate(45deg);
}
</style>

<script type="text/javascript">
        $(function(){
            waterMark$();
        });
        function waterMark$(){
            if(navigator.appName == "Microsoft Internet Explorer"&& navigator.appVersion.match(/11./i)!="11."){
                $("p[name='p1$']").remove();
                var winwidth$ = document.body.scrollWidth-17;
                var winheight$ = document.body.scrollHeight;
                $("body").append("<p id='waterSum_11' name='p1$' class='cover_through cover js-click-to-alert'>测试张璐</p>");
                var fleft = Number($('#waterSum_11').css("margin-left").substring(0,$('#waterSum_11').css("margin-left").indexOf('p')));
                var ftop = Number($('#waterSum_11').css("margin-top").substring(0,$('#waterSum_11').css("margin-top").indexOf('p')));
                var perWidth = $("#waterSum_11").width();
                var perHeight = Number('140px'.substring(0,'140px'.indexOf('p')))+100;
                var lines = parseInt(winwidth$/(perWidth+fleft));
                var rows = Math.round(winheight$/(perHeight+ftop));
                var totalPWidth = perWidth*lines;
                var totalSpace = winwidth$-totalPWidth;
                var perSpace = parseInt(totalSpace/(lines+1));
                $('#waterSum_11').css("margin-left",perSpace);
                for(var i=1;i<=rows;i++) {
                    for(var j=1;j<=lines;j++){
                        if(i==1){
                            if(j<=lines-1){
                                var p = "<p id='waterSum_"+i+""+(j+1)+"' name='p1$' class='cover_through cover js-click-to-alert'>SK测试</p>";
                                var ileft = $('#waterSum_'+i+''+j).css("margin-left").substring(0,$('#waterSum_'+i+''+j).css("margin-left").indexOf('p'));
                                var itop = $('#waterSum_11').css("margin-top").substring(0,$('#waterSum_11').css("margin-top").indexOf('p'));
                                $("body").append(p);
                                $('#waterSum_'+i+''+(j+1)).css("margin-left",Number(ileft)+Number(perWidth)+perSpace);
                                $('#waterSum_'+i+''+(j+1)).css('margin-top',itop);
                            }
                        }else{
                            var p = "<p id='waterSum_"+i+""+j+"' name='p1$' class='cover_through cover js-click-to-alert'>${TmpContent}</p>";
                            var ileft = $('#waterSum_'+(i-1)+''+j).css("margin-left").substring(0,$('#waterSum_'+(i-1)+''+j).css("margin-left").indexOf('p'));
                            var itop = $('#waterSum_'+(i-1)+''+j).css("margin-top").substring(0,$('#waterSum_'+(i-1)+''+j).css("margin-top").indexOf('p'));
                            $("body").append(p);
                            $('#waterSum_'+i+''+j).css("margin-left",Number(ileft));
                            $('#waterSum_'+i+''+j).css('margin-top',Number(itop)+Number(perHeight));
                        }
                    }
                }
                passThrough();
            }else{
                waterMarkNotIe$();
            }
        }
        function waterMarkNotIe$(){
            var winwidth$ = document.body.clientWidth;
            var winheight$ = document.body.scrollHeight;
            var waterSum$ = 100;
            var oldleft$=0;
            var maxI$=0;
            var k$=0;
            $("body").append("<div class='cover-Blink-area'> </div>");
            $('.cover-Blink-area').css('height','500px');
            for( var i=1;i<=waterSum$;i++) {
                $(".cover-Blink-area").append("<p id='waterSum_" +i+"' class='cover_through cover-Blink js-click-to-alert'>SK测试</p>");
                var left = Number(document.getElementById("waterSum_" +i).offsetLeft);
                if(left>oldleft$) {
                    oldleft$ = left;
                    maxI$ = i;
                }
                if (left<oldleft$&&k$==0){
                    var top = $("#waterSum_1").css("margin-top").substring(0,$("#waterSum_1").css("margin-top").indexOf('p'));
                    var bottom = $("#waterSum_1").css("margin-bottom").substring(0,$("#waterSum_1").css("margin-bottom").indexOf('p'));
                    var pHeight = $("#waterSum_1").height();
                    var totalHeight = Number(top)+Number(pHeight)+Number(bottom);
                    var Hnum = Math.round(500/(totalHeight/1.3));
                    waterSum$ = Hnum*maxI$;
                    k$++;
                }
            }
        }
        window.onresize = function(){
            waterMark$();
        }
        function passThrough() {
            $(".cover").mouseenter(function(){
                $(this).stop(true).fadeOut().delay(1500).fadeIn(50);
            });
        }
    </script>
</head>
<body>
</body>
</html>