使用js给页面显示的图片添加水印效果
功能描述:使用Jquery 给页面的图片添加 版权信息水印。
这里的水印并不是真的把每一张图片上都添加了水印。而是在图片的上方添加了一个层,层中包含了水印图片效果就像是图片上加了水印。
功能原理:1,使用jquery 遍历页面的所有img标签,取得其位置信息
2,在body里边追加一个div,div中放水印图片,根据1中取得的位置,来确定水印div的相对位置。
代码:
$(function(){ $("img").each(function(){
// 特殊情况--过滤掉无关的图片
if($(this).attr("id") == "img1"){
return;
} var top = $(this).offset().top+10;//这里数字根据需要调,一般配在数据库中
var left = $(this).offset().left+10;
var styleString="width:250px;height:50px;display:block;position:absolute;left:"+left+"px;top:"+top+"px;";
var imageUrl="images/shuiyin.jpg";
//追加水印div
$(document.body).append('<div id="shuiyinDiv" style='+styleString+'><img src='+imageUrl+'></div>');
});
这里还有很多属性可以调,比如水印图片的透明度等。
html页面的代码略,效果如下:
使用js给页面显示的图片添加水印效果的更多相关文章
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...
- js控制页面显示和表单提交
早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...
- js前台页面显示中文,后台存对应的value值实现
field: 'rightType', title: '权益类型', //width: 100, align: 'left', valign: 'top', sortable: true, forma ...
- JS实现有点炫的图片展示效果-图片解体和组合
经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...
- [Xcode 实际操作]九、实用进阶-(16)给图片添加水印效果
目录:[Swift]Xcode实际操作 本文将演示如何截取屏幕画面,并将截取图片,存入系统相册. 在项目文件夹[DemoApp]上点击鼠标右键 ->[New File]创建一个扩展文件-> ...
- Java 图片添加水印效果
package com.xiaowu.drawwater.demo; import java.awt.AlphaComposite; import java.awt.Graphics2D; impor ...
随机推荐
- MYSQL 表级锁 行级锁 页面锁区别
myisam存储引擎默认是表级锁 innodb存储引擎默认是行级锁 DBD存储引擎默认是页面锁 表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发出锁冲突的概率最高,并发度最低.行级锁:开锁大, ...
- NOJ 1063 生活的烦恼
描述 生活的暑假刚集训开始,他要决心学好字典树,二叉树,线段树和各种树,但生活在OJ上刷题的时候就遇到了一个特别烦恼的问题.那当然就是他最喜欢的二二叉树咯!题目是这样的:给你一颗非空的二叉树,然后再给 ...
- C++ ASSERT() 断言机制
C++ ASSERT() 断言机制 ASSERT()是一个调试程序时经常使用的宏,在程序运行时它计算括号内的表达式,如果表达式为FALSE (0), 程序将报告错误,并终止执行.如果表达式不为0,则继 ...
- JAX-WS:背后的技术JAXB及传递Map
转载:http://www.programgo.com/article/98912703200/ 1.什么是JAX-WS JAX-WS (JavaTM API for XML-Based Web Se ...
- poj1113Wall(凸包)
链接 顺便整理出来一份自己看着比较顺眼的模板 #include <iostream> #include<cstdio> #include<cstring> #inc ...
- jQuery插件开发全解析,类级别与对象级别开发
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
- (四)linux网络编程
一.CS架构,BS架构 (1)CS架构介绍(client server,客户端服务器架构),例如:qq.360网盘(2)BS架构介绍(broswer server,浏览器服务器架构)例如:浏览器 二. ...
- POJ 3260 多重背包+完全背包
前几天刚回到家却发现家里没网线 && 路由器都被带走了,无奈之下只好铤而走险尝试蹭隔壁家的WiFi,不试不知道,一试吓一跳,用个手机软件简简单单就连上了,然后在浏览器输入192.168 ...
- Android开发面试经——3.常见Java基础笔试题
Android开发(29) 版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客:http:/ ...
- hdu 5755(高斯消元——模线性方程组模板)
PS. 看了大神的题解,发现确实可以用m个未知数的高斯消元做.因为确定了第一行的情况,之后所有行的情况都可以根据第一行推. 这样复杂度直接变成O(m*m*m) 知道了是高斯消元后,其实只要稍加处理,就 ...