jQuery缩略图插件jQThumb

来源:https://www.sucaihuo.com/js/2819.html 2017-08-23 23:15浏览(722) 收藏

一款jQuery缩略图插件jQThumb,可以在Image URL的输入框里面设置图片的路径,可以自由设置图片的宽度和高度的像素、位置、缩放比例等多项参数,然后点击“Generate”按钮即可查看效果,不满意可以点击“Kill”来删除效果。
jQuery缩略图插件jQThumb
分类:图片代码 > 缩略图 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2