jQuery缩略图插件jQThumb-聚优部落

jQuery缩略图插件jQThumb

添加时间：2021-03-20 02:54:39

站长推荐丨赞助论坛，可获取海量资源终身免费下载权限奥!

赞助一下

预览

当前位置：

前端特效

图片代码

一款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>

jQuery缩略图插件jQThumb

页面的head部分，需引入一个CSS样式文件，代码如下：

页面的body部分，分为两大块：一个是上面的图片演示效果区域，另一个是下面的缩略图设置区域，代码如下：

页面的底部，需引入jQuery库和另外两个JS文件，代码如下：

上一篇：一套实用的jQuery组件库包含多种常用的网页特效

下一篇：js图片画廊点击弹出遮罩背景大图切换代码

jQuery缩略图插件jQThumb

页面的head部分，需引入一个CSS样式文件，代码如下：

页面的body部分，分为两大块：一个是上面的图片演示效果区域，另一个是下面的缩略图设置区域，代码如下：

页面的底部，需引入jQuery库和另外两个JS文件，代码如下：

上一篇：一套实用的jQuery组件库包含多种常用的网页特效

下一篇：js图片画廊点击弹出遮罩背景大图切换代码

回帖

内容举报

举报类型：

说明：

附件下载

下载验证：

附件：

发帖找资源

回帖

会员登陆