一款jQuery缩略图插件jQThumb,可以在Image URL的输入框里面设置图片的路径,可以自由设置图片的宽度和高度的像素、位置、缩放比例等多项参数,然后点击“Generate”按钮即可查看效果,不满意可以点击“Kill”来删除效果。
页面的head部分,需引入一个CSS样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="src/style.css">
页面的body部分,分为两大块:一个是上面的图片演示效果区域,另一个是下面的缩略图设置区域,代码如下:
<h1 class="tc">jQuery缩略图插件jQThumb</h1>
<div class="container centerize">
<div class="ptb screenshot-area">
<div class="row mg screenshot-area">
<div class="span6 tc">
<div class="plr">
<div class="frame">
<div class="frame-pad"><div class="original" attr-src="src/picture.jpg"></div></div>
</div>
</div>
</div>
<div class="span6">
<div class="plr mb">
<div class="frame">
<div class="frame-pad"><div class="example1" attr-src="src/picture.jpg"></div></div>
</div>
</div>
</div>
<div class="span6">
<div class="plr mb">
<div class="frame">
<div class="frame-pad"><div class="example2" attr-src="src/picture.jpg"></div></div>
</div>
</div>
</div>
<div class="span4">
<div class="plr">
<div class="frame">
<div class="frame-pad"><div class="example3" attr-src="src/picture.jpg"></div></div>
</div>
</div>
</div>
<div class="span3">
<div class="plr">
<div class="frame">
<div class="frame-pad"><div class="example4" attr-src="src/picture.jpg"></div></div>
</div>
</div>
</div>
<div class="span3">
<div class="plr">
<div class="frame">
<div class="frame-pad"><div class="example5" attr-src="src/picture.jpg"></div></div>
</div>
</div>
</div>
<div class="span2">
<div class="plr mb">
<div class="frame">
<div class="frame-pad"><div class="example6" attr-src="src/picture.jpg"></div></div>
</div>
</div>
</div>
<div class="span2">
<div class="plr">
<div class="frame">
<div class="frame-pad"><div class="example7" attr-src="src/picture.jpg"></div></div>
</div>
</div>
</div>
</div>
</div>
<hr/>
<h2 class="tc">Play Ground</h2>
<div id="playground" class="row mg">
<div class="span6">
<form class="plr">
<div class="row">
<label class="tr">Image URL:</label>
<div class="input"><div class="plr"><input type="text" id="url" placeholder="picture.jpg" value="src/picture.jpg" /></div></div>
</div>
<div class="row">
<label class="tr">Width:</label>
<div class="input">
<div class="plr">
<div class="row">
<div class="span8">
<div class="pr">
<input type="text" id="width" placeholder="100px" value="200" />
</div>
</div>
<div class="span4">
<div class="pr">
<select id="width-type">
<option value="px" selected>PX</option>
<option value="%">%</option>
<option value="auto">Auto (full width)</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="tr">Height:</label>
<div class="input">
<div class="plr">
<div class="row">
<div class="span8">
<div class="pr">
<input type="text" id="height" placeholder="100px" value="200" />
</div>
</div>
<div class="span4">
<div class="pr">
<select id="height-type">
<option value="px" selected>PX</option>
<option value="%">%</option>
<option value="auto">Auto (full height)</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="tr">Y Position:</label>
<div class="input">
<div class="plr">
<div class="row">
<div class="span8">
<div class="pr">
<input type="text" id="y" placeholder="50" value="50" />
</div>
</div>
<div class="span4">
<div class="pr">
<select id="y-type">
<option value="px">PX</option>
<option value="%" selected>%</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="tr">X Position:</label>
<div class="input">
<div class="plr">
<div class="row">
<div class="span8">
<div class="pr">
<input type="text" id="x" placeholder="50" value="50" />
</div>
</div>
<div class="span4">
<div class="pr">
<select id="x-type">
<option value="px">PX</option>
<option value="%" selected>%</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="tr">Zoom:</label>
<div class="input"><div class="plr"><input type="text" id="zoom" placeholder="1" value="1" /></div></div>
</div>
<div class="row">
<label class="tr">Render Position:</label>
<div class="input"><div class="plr">
<select id="renderPosition">
<option value="before" selected="selected">Before</option>
<option value="after">After</option>
</select>
</div></div>
</div>
<div class="row">
<label class="tr">On Demand:</label>
<div class="input"><div class="plr">
<select id="ondemand">
<option value="false" selected="selected">False</option>
<option value="true">True</option>
</select>
</div></div>
</div>
<div class="row">
<label class="tr">On Demand Event:</label>
<div class="input"><div class="plr">
<select id="ondemandevent" disabled>
<option value="scroll" selected="selected">scroll</option>
<option value="click">click</option>
<option value="mouseenter">mouseenter</option>
</select>
</div></div>
</div>
<div class="row">
<label class="tr">Threshold:</label>
<div class="input"><div class="plr"><input disabled type="text" id="threshold" placeholder="0" value="0" /></div></div>
</div>
<div class="row">
<label class="tr">Method:</label>
<div class="input"><div class="plr">
<select id="method">
<option value="auto" selected="selected">Auto</option>
<option value="modern">CSS3 (modern browsers that support CSS3)</option>
<option value="native">Native (older browsers)</option>
</select>
</div></div>
</div>
<div class="row">
<label class="tr"></label>
<div class="input">
<div class="plr tr">
<button id="generate" type="button">Generate</button>
<button id="kill" type="button">Kill</button>
</div>
</div>
</div>
</form>
</div>
<div class="span6 tc">
<div class="plr tc">
<div class="frame">
<div class="frame-pad"><img src="src/picture.jpg" id="demo" /></div>
</div>
</div>
</div>
</div>
</div>
页面的底部,需引入jQuery库和另外两个JS文件,代码如下:
<script type="text/javascript" src="src/jquery.min.js"></script>
<script type="text/javascript" src="src/jqthumb.js"></script>
<script type="text/javascript" src="src/main.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791