使用css做水印效果

/** @description添加水印* @param {Obj} settings水印配置参数*/function waterMark(markElement) {$('#' + markElement.waterMarkId).find('.markElement').remove();var settings = {waterMarkId:"t1",waterMarkContent:"我是水印内容",waterMarkX:-10,waterMarkY:40,waterMarkRows:10,waterMarkCols:20,waterMarkXSpace:0,waterMarkYSpace:0,waterMarkColor:'#B0C4DE',waterMarkAlpha:0.3,waterMarkFontSize:'25px',waterMarkFont:'微软雅黑',waterMarkWidth:100,waterMarkHeight:100,waterMarkAngle:15};if(arguments.length === 1 && typeof arguments[0] === "object" ) {var src = arguments[0]||{};for(key in src) {if(src[key]&&settings[key] && src[key] === settings[key])continue;else if(src[key])settings[key] = src[key];}}var obj = document.getElementById(settings.waterMarkId);var tmpObj = document.createDocumentFragment();var pageWidth = obj.offsetWidth; var pageHeight = obj.offsetHeight ;if (settings.waterMarkCols == 0 || (parseInt(settings.waterMarkX + settings.waterMarkWidth *settings.waterMarkCols + settings.waterMarkXSpace * (settings.waterMarkCols - 1)) > pageWidth)) {settings.waterMarkCols = parseInt((pageWidth-settings.waterMarkX+settings.waterMarkXSpace) / (settings.waterMarkWidth + settings.waterMarkXSpace));settings.waterMarkXSpace = parseInt((pageWidth - settings.waterMarkX - settings.waterMarkWidth * settings.waterMarkCols) / (settings.waterMarkCols - 1));}if (settings.waterMarkRows == 0 || (parseInt(settings.waterMarkY + settings.waterMarkHeight * settings.waterMarkRows + settings.waterMarkYSpace * (settings.waterMarkRows - 1)) > pageHeight)) {settings.waterMarkRows = parseInt((settings.waterMarkYSpace + pageHeight - settings.waterMarkY) / (settings.waterMarkHeight + settings.waterMarkYSpace));settings.waterMarkYSpace = parseInt(((pageHeight - settings.waterMarkY) - settings.waterMarkHeight * settings.waterMarkRows) / (settings.waterMarkRows - 1));}var x;var y;settings.waterMarkRows = settings.waterMarkRows == 0 ? 6 : settings.waterMarkRows; for (var i = 0; i < settings.waterMarkRows; i++) {y = settings.waterMarkY + (settings.waterMarkYSpace + settings.waterMarkHeight) * i;y = isNaN(y) ? 40 : y;for (var j = 0; j < settings.waterMarkCols; j++) {x = settings.waterMarkX + (settings.waterMarkWidth + settings.waterMarkXSpace) * j;var markElement = document.createElement('div');markElement.id = 'markElement' + i + j;markElement.appendChild(document.createTextNode(settings.waterMarkContent));//设置水印div倾斜显示markElement.style.webkitTransform = "rotate(-" + settings.waterMarkAngle + "deg)";markElement.style.MozTransform = "rotate(-" + settings.waterMarkAngle + "deg)";markElement.style.msTransform = "rotate(-" + settings.waterMarkAngle + "deg)";markElement.style.OTransform = "rotate(-" + settings.waterMarkAngle + "deg)";markElement.style.transform = "rotate(-" + settings.waterMarkAngle + "deg)";markElement.style.visibility = "";markElement.style.position = "absolute";markElement.style.left = x + 'px';markElement.style.top = y + 'px';markElement.style.overflow = "hidden";markElement.style.zIndex = "10";markElement.style.opacity = settings.waterMarkAlpha;markElement.style.fontSize = settings.waterMarkFontSize;markElement.style.fontFamily = settings.waterMarkFont;markElement.style.color = settings.waterMarkColor;markElement.style.textAlign = "center";markElement.style.width = settings.waterMarkWidth + 'px';markElement.style.height = settings.waterMarkHeight + 'px';markElement.style.display = "block";markElement.style.filter = "alpha(opacity="+ settings.waterMarkAlpha*100 +")";markElement.setAttribute("class","markElement");tmpObj.appendChild(markElement);};};obj.appendChild(tmpObj);
}

使用：

    waterMark({waterMarkContent:'我是水印内容',waterMarkId:'userTable'//需要做水印的元素的id});

也可以结合后台传过来的数据作为水印的内容：

        @RequestMapping(value = "/getShuiYinContent", method = RequestMethod.POST)public void getShuiYinContent(HttpServletRequest request, HttpServletResponse response) throws IOException {JSONArray arr = new JSONArray();response.setCharacterEncoding("UTF-8");response.addHeader("Access-Control-Allow-Origin", "*");PrintWriter pw = response.getWriter();String userName = getCurrentUser(request.getSession()).getRealName();arr.add(userName);pw.print(arr);pw.close();}

  $.ajax({type: 'post',                url:"${baseUrl}/user/getShuiYinContent",async:true,dataType: 'json',success: function(data){        waterMark({waterMarkContent : data,waterMarkId : 'userTable'//需要做水印的元素的id});},error: function(data){}});

使用css做水印效果相关推荐

HTML和CSS做优惠券效果
最近看到好几个花里胡哨的作品,不禁感叹,还是能人多.... 这是之前做小程序时候,QQ群里分享的一个代码就贴在下边了,顺便做一下记录 HTML: <body><div class= ...
用css做透明效果,CSS实现毛玻璃透明效果
其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到 ...
css 做幻灯片效果
设置一个div 盒子 <div class="ani"></div> 设置css 样式 .ani{width:480px;height:320px;mar ...
如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化. 若是只实现一个圆环的话,只用border和border-radius就能画出来. 但是这样的圆环不能动,产生进度条效果的重要 ...
css 友情链接效果,友链样式与位置很重要！
友链交换,是我们SEOER的日常工作.那么,关于友链的样式和位置,你又了解多少呢?下面就和小编一起来看看吧! 一.友链意味着什么? 友情链接,就是双方网站有一定相关性的前提下,互相在自己的网站上推荐对 ...
css 友情链接效果,SEO：友情链接是什么?友情链接检查样式方位排版
原标题:SEO:友情链接是什么?友情链接检查样式方位排版友情链接,也称为网站沟通链接.互利链接.沟通链接.联盟链接等,是具有必定资源互补优势的网站之间的简略协作方法,即分别在自己的网站上放置对方网站 ...
html魔方转动效果,简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
php鼠标经过显示文本,CSS_HTML和CSS做网页实例教程:鼠标滑过文字改变，关于HTML+CSS的实例效果很多， - phpStudy...
关于HTML+CSS的实例效果很多,下面举出常用的几列,供新手们学习参考. html+CSS实例效果(1):鼠标滑过改变文字鼠标经过变换文字 #Menu{ width:500px; margin:5 ...

使用css做水印效果

使用css做水印效果相关推荐

最新文章

热门文章