<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<script src="lib/modernizr-2.7.2.js"></script>
<title>jQuery烟雾背景发生器 - 网页模板</title>
<link rel="stylesheet" href="css/colpick.css">
<link rel="stylesheet" href="css/jquery.nouislider.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wavybg-wrapper" style="width: 100%; height: 100%;">
<canvas>Your browser does not support HTML5 canvas.</canvas>
</div>
<div class="sidebar-wrapper">
<div class="intro">
<h1>waterpipe.js</h1>
<div class="created-by">by dragdropsite.com </div>
</div>
<div style="clear:both"></div>
<div class="generator-form-wrap">
<form class="generator-params">
<h2>Smoke style</h2>
<div class="input-group">
<label for="gradientStart">Gradient start:</label>
<input type="text" id="gradientStart" name="gradientStart" value="#000000" class="color-picker gradient-start"></input>
</div>
<div class="input-group">
<label for="gradientEnd">Gradient end:</label>
<input type="text" id="gradientEnd" name="gradientEnd" class="color-picker gradient-end" value="#222222"></input>
</div>
<div class="input-group">
<label for="smokeOpacity">Opacity: <span class="value">10%</span></label>
<div class="smokeOpacity-slider"></div>
<input type="hidden" id="smokeOpacity" name="smokeOpacity" value="10" class="slider"></input>
</div>
<div class="input-group">
<label for="radiusSize">Smoke size: <span class="value">100%</span></label>
<div class="radiusSize-slider"></div>
<input type="hidden" id="radiusSize" name="radiusSize" value="100" class=""></input>
</div>
<div class="input-group">
<label for="lineWidth">Line width: <span class="value">2px</span></label>
<div class="lineWidth-slider"></div>
<input type="hidden" id="lineWidth" name="lineWidth" value="2" class=""></input>
</div>
<div class="input-group">
<label for="numCircles">Smokes #: <span class="value">1</span></label>
<div class="numCircles-slider"></div>
<input type="hidden" id="numCircles" name="numCircles" value="1" class=""></input>
</div>
<h2>Background style</h2>
<div class="input-group">
<label for="bgColorOuter">Outer color:</label>
<input type="text" id="bgColorOuter" name="bgColorOuter" class="color-picker color-outer" value="#666666"></input>
</div>
<div class="input-group">
<label for="bgColorInner">Inner color:</label>
<input type="text" id="bgColorInner" name="bgColorInner" class="color-picker color-inner" value="#ffffff"></input>
</div>
<h2>Download size</h2>
<div class="input-group">
<label for="downloadWidth">Width (px):</label>
<input type="text" id="downloadWidth" name="downloadWidth"></input>
</div>
<div class="input-group">
<label for="downloadHeight">Height (px):</label>
<input type="text" id="downloadHeight" name="downloadHeight"></input>
</div>
<h2 id="samples-section">Samples (click to generate)</h2>
<div class="input-group samples">
<a href="#" class="sample-smoke" data-id="0"><img src="img/samples/small/sample-1.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="1"><img src="img/samples/small/sample-2.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="2"><img src="img/samples/small/sample-3.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="3"><img src="img/samples/small/sample-4.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="4"><img src="img/samples/small/sample-5.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="5"><img src="img/samples/small/sample-6.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="6"><img src="img/samples/small/sample-7.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="7"><img src="img/samples/small/sample-8.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="8"><img src="img/samples/small/sample-9.jpg" alt=""</a>
<a href="#" class="sample-smoke" data-id="9"><img src="img/samples/small/sample-10.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="10"><img src="img/samples/small/sample-11.jpg" alt=""></a>
<a href="#" class="sample-smoke" data-id="11"><img src="img/samples/small/sample-12.jpg" alt=""></a>
</div>
</form>
</div>
<div style="clear:both"></div>
<div class="buttons-wrap">
<div class="btn btn-grey btn-samples">Samples</div>
<div class="btn btn-grey btn-generate">Generate</div>
<div class="btn btn-grey btn-download">Download</div>
</div>
</div>
<script src="lib/jquery-1.11.0.min.js"></script>
<script src="lib/colpick.js"></script>
<script src="lib/jquery.nouislider.min.js"></script>
<script src="lib/jquery.nicescroll.min.js"></script>
<script src="lib/builder_scripts.js"></script>
<script src="waterpipe.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery烟雾背景发生器.zip
版权申诉
8 浏览量
2022-11-22
17:15:42
上传
评论
收藏 1.09MB ZIP 举报
jQuery烟雾背景发生器.zip （37个子文件） 
jQuery烟雾背景发生器 
jQuery烟雾背景发生器.jpg 53KB jiaoben2347 css 
jquery.nouislider.css 3KB colpick.css 9KB style.css 4KB img samples sample-7.jpg 69KB sample-2.jpg 62KB sample-1.jpg 75KB sample-10.jpg 92KB sample-3.jpg 76KB sample-4.jpg 45KB sample-9.jpg 44KB small sample-7.jpg 10KB sample-2.jpg 12KB sample-1.jpg 11KB sample-10.jpg 11KB sample-3.jpg 11KB sample-4.jpg 10KB sample-9.jpg 9KB sample-12.jpg 10KB sample-11.jpg 13KB sample-6.jpg 10KB sample-8.jpg 11KB sample-5.jpg 12KB sample-12.jpg 74KB sample-11.jpg 114KB sample-6.jpg 63KB sample-8.jpg 36KB sample-5.jpg 51KB screenshot.jpg 86KB
index.html 5KB lib jquery-1.11.0.min.js 94KB modernizr-2.7.2.js 50KB colpick.js 20KB builder_scripts.js 9KB jquery.nouislider.min.js 13KB jquery.nicescroll.min.js 56KB waterpipe.js 20KB资源评论
