当前位置: 要听舞曲DJ网 MUSIC > DIVCSS教程 > jQuery图片自动添加水印插件
250*250广告位

jQuery图片自动添加水印插件

日期:2017-04-03 来源:要听舞曲DJ网 MUSIC 浏览:

JS脚本(jQuery)为图片加水印效果预览:
http://hovertree.com/texiao/jquery/94/




DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>jQuery图片自动添加水印插件 - 何问起title> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/94/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/94/css/demo.css" /> head> <body> <div class="zzsc-content"> <h3>默认图片h3> <img class="sample1" data-img2blob="img/1.png" /> <img class="sample1" data-img2blob="img/2.jpg" /> <hr /> <h3>添加水印之后的图片h3> <img class="sample2" data-img2blob="img/1.png" /> <img class="sample2" data-img2blob="img/2.jpg" /> <h3>原图h3> <img src="http://hovertree.com/texiao/jquery/94/img/1.png" /> <img src="http://hovertree.com/texiao/jquery/94/img/2.jpg" /> div> <script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js" type="text/javascript">script> <script src="http://hovertree.com/texiao/jquery/94/js/img2blob.js" type="text/javascript">script> <script type="text/javascript"> $(function() { // default $(".sample1").img2blob(); // with watermark $(".sample2").img2blob({ watermark: '@何问起', fontStyle: 'Microsoft YaHei,Arial', fontSize: '30', // px fontColor: 'red', // default 'black' fontX: 20, // The x coordinate where to start painting the text fontY: 40 // The y coordinate where to start painting the text }); });script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:FireFox、Chrome、Opera、傲游、搜狗、360、世界之窗. 不支持Safari、E8及以下浏览器。p> <p>来源:<a href="http://hovertree.com/" target="_blank">何问起a> <a href="http://hovertree.com/h/bjag/kfq30wnj.htm" target="_blank">说明a>p> div> body> html>


上一篇:html字体大小、颜色、粗体、下划线代码(局部)

下一篇:jQuery点击图片弹出大图遮罩层

  • 售前咨询
  • 网站建设
  • 网站优化
  • 整合营销
  • 售后服务