<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5广告制作插件 - 网页模板</title>
</head>
<body>
<div id="adMakerWarp">
<div class="left">
<ul>
<li><label>图片上传:</label><input type="file" name="file" id="file"/></li>
<li class="line"></li>
<li>
<label>广告宽度:</label><input type="text" id="adWidth" class="short" value="670"/>
<label>广告高度:</label><input type="text" id="adHeight" class="short" value="240"/> px
</li>
<li class="line"></li>
<li><label>图片缩放:</label><input type="text" id="imgScale" class="short" value="1"/> 倍</li>
<li>
<label>图片左偏移:</label><input type="text" id="iLeft" class="short" value="0"/>
<label>图片顶偏移:</label><input type="text" id="iTop" class="short" value="0"/> px
</li>
<li class="line"></li>
<li id="colorWarp">
<label class="color">文字背景:</label>
<i class="white current" rgb="255,255,255"></i>
<i class="gray" rgb="37,37,37"></i>
<i class="yellow" rgb="244,179,0"></i>
<i class="green" rgb="120,186,0"></i>
<i class="blue" rgb="37,115,236"></i>
<i class="red" rgb="174,17,61"></i>
<i class="litter_coffe" rgb="99,47,0"></i>
<i class="coffe" rgb="46,23,0"></i>
<i class="orange" rgb="176,30,0"></i>
<i class="purple" rgb="114,0,172"></i>
<i class="yel" rgb="225,183,0"></i>
</li>
<li><label>背景透明度:</label><input type="text" id="bgOpacity" class="short" value="0.5"/>
<label>背景高度:</label><input type="text" id="bgHeight" class="short" value="60"/> px
</li>
<li class="line"></li>
<li><label>标题字号:</label><input type="text" id="titleFontSize" class="short" value="25"/>
<label>标题颜色:</label><input type="text" id="titleFontColor" class="short" value="#000"/></li>
<li><label>标题左偏移:</label><input type="text" id="titleLeft" class="short" value="10"/>
<label>标题顶偏移:</label><input type="text" id="titleTop" class="short" value="210"/></li>
<li><label>标题文字:</label><input type="text" id="title" class="long" value="标题文字写这里!!!"/></li>
<li><label>描述字号:</label><input type="text" id="desFontSize" class="short" value="15"/>
<label>描述颜色:</label><input type="text" id="desFontColor" class="short" value="#000"/></li>
<li><label>描述左偏移:</label><input type="text" id="desLeft" class="short" value="10"/>
<label>描述顶偏移:</label><input type="text" id="desTop" class="short" value="230"/></li>
<li><label>描述文字:</label><input type="text" id="description" class="long" value="描述性文字写这里,字号较小!!!!!!!!!"/></li>
<li><input type="button" value="输出图像格式" id="putOut" class="btn"></li>
</ul>
</div>
<div class="right" id="paper"><img src="images/0.png" id="placeholder"></div>
<div id="mb"></div><img id="MyPix">
</div>
<script type="text/javascript" src="js/admake.js"></script>
</body>
</html>
<style>#adMakerWarp{font-size: 13px;}
#adMakerWarp ul{margin: 0; padding: 0;}
#adMakerWarp li{list-style: none; line-height: 32px; overflow: hidden;}
#adMakerWarp li.line{height: 1px; background: #dcdcdc; margin: 8px 0;}
#adMakerWarp .left{float: left; width: 305px; padding: 15px; border: 1px solid #ccc; border-radius: 10px; background: #efefef;}
#adMakerWarp .right{float: left; display: inline; margin-left: 50px;}
#adMakerWarp canvas{border: 1px solid #ccc;}
#adMakerWarp input[type=text]{border-radius: 5px; border: 1px solid #ccc; height: 23px;padding-left: 3px;}
#adMakerWarp input.short{width:40px;}
#adMakerWarp hr{height: 1px; background: #ccc; border: none; margin: 5px 0;}
#adMakerWarp label{width: 80px; display: inline-block;}
#adMakerWarp label.color{float: left;}
#adMakerWarp input.long{width: 200px;}
#adMakerWarp input.btn{width: 150px;height: 35px; margin-top: 15px; margin-left: 75px;}
#adMakerWarp i{display: inline-block; width: 16px; height: 16px; float:left; margin-left: 2px;
border: 1px solid #fff; margin-top: 6px; cursor: pointer;}
#adMakerWarp i:first-child{margin-left: 0;}
#adMakerWarp i.gray{background: #252525;}
#adMakerWarp i.white{background: #ffffff;}
#adMakerWarp i.yellow{background: #f4b300;}
#adMakerWarp i.green{background: #78ba00;}
#adMakerWarp i.blue{background: #2673ec;}
#adMakerWarp i.red{background: #ae113d;}
#adMakerWarp i.litter_coffe{background: #632f00;}
#adMakerWarp i.coffe{background: #2e1700;}
#adMakerWarp i.orange{background: #b01e00;}
#adMakerWarp i.purple{background: #7200ac;}
#adMakerWarp i.yel{background: #e1b700;}
#adMakerWarp i.current{background-image: url(images/icon.png);background-repeat: no-repeat; background-position: 3px 3px;}
#mb{width: 100%; height: 100%; background: #000; opacity: 0.8; position:absolute; left: 0; top: 0; z-index: 1000; display: none;}
#MyPix{ position: absolute; left: 20%; top: 20%; z-index: 1001; display: none;}</style>
<script>
var Tool = {
$:function (arg, context) {
var tagAll, n, eles = [], i, sub = arg.substring(1);
context = context || document;
if (typeof arg == 'string') {
switch (arg.charAt(0)) {
case '#':
return document.getElementById(sub);
break;
case '.':
if (context.getElementsByClassName) return context.getElementsByClassName(sub);
tagAll = $('*', context);
n = tagAll.length;
for (i = 0; i < n; i++) {
if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
}
return eles;
break;
default:
return context.getElementsByTagName(arg);
break;
}
}
},
/* 添加样式名 */
addClass:function (c, node) {
if (!node)return;
node.className = this.hasClass(c, node) ? node.className : node.className + ' ' + c;
},
/* 移除样式名 */
removeClass:function (c, node) {
var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
if (!this.hasClass(c, node))return;
node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
},
/* 是否含有CLASS */
hasClass:function (c, node) {
if (!node || !node.className)return false;
return node.className.indexOf(c) > -1;
}
}
var AdMacker = function(){
var image,width,height,iLeft,iTop,bgRGBA,bgOpacity,bgHeight,
titleFontSize,titleFontColor,titleLeft,titleTop,title,
desFontSize,desFontColor,desLeft,desTop,description;
var bgRGB = '255,255,255';
var imgScale = 1;
var regex = {
reg1:/^([1-9]\d*)$/, // 验证正整数
reg2:/^-?(0|[1-9]\d*)$/, // 验证零正负整数
reg3:/^(0|0\.\d*|1)$/, // 验证透明度0-1
reg4:/^([1-9]|10|0\.\d*)$/, // 缩放比例0-10,不包含0
reg5:/^#([0-9a-zA-Z]{3}|[0-9a-zA-Z]{6})$/ // 验证颜色值
}
var tips = ['宽高只能为大于0的整数','偏移量只能为零和正负整数',
'透明度值在0-1之间,包括0和1','比例限制在0-10之间,不包含0',
'字号只能为�
没有合适的资源?快使用搜索试试~ 我知道了~
html5广告制作插件.zip
共4个文件
png:2个
jpg:1个
html:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 188 浏览量
2022-11-18
22:13:44
上传
评论
收藏 214KB ZIP 举报
温馨提示
html5广告制作插件.zip
资源推荐
资源详情
资源评论
收起资源包目录
html5广告制作插件.zip (4个子文件)
html5广告制作插件
html5广告制作插件.jpg 53KB
jiaoben710
images
icon.png 1KB
0.png 170KB
index.html 15KB
共 4 条
- 1
资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功