z-smart-zoom-jquery.js图片缩放插件的使用以及点击复选框将其下的缩略图显示大图

最新推荐文章于 2021-08-04 07:52:52 发布

young63

最新推荐文章于 2021-08-04 07:52:52 发布

阅读量680

点赞数

文章标签： jquery checkbox

本文链接：https://blog.csdn.net/young63/article/details/105433146

版权

一、引入文件

<script src="./lib/jquery/jquery.js"></script>
<script src="./lib/smartJQueryZoom/src/e-smart-zoom-jquery.js"></script>

二、html

<div class="head">
        <div class="box">
            <ul class="clearfix">
                <li>
                    <p class="describe">
                        <input class="checkbox" type="checkbox" name='picture' value="picture1.jpeg" />
                        <span>好看的图片</span>
                    </p>
                    <p class="picture"><img src="images/picture1.jpeg" alt=""></p>
                </li>
                <li>
                    <p class="describe">
                        <input class="checkbox" type="checkbox" name='picture' value="picture2.jpeg" />
                        <span>好看的图片</span>
                    </p>
                    <p class="picture"><img src="images/picture2.jpeg" alt=""></p>
                </li>
                <li>
                    <p class="describe">
                        <input class="checkbox" type="checkbox" name='picture' value="picture3.jpeg" />
                        <span>好看的图片</span>
                    </p>
                    <p class="picture"><img src="images/picture3.jpeg" alt=""></p>
                </li>
                <li>
                    <p class="describe">
                        <input class="checkbox" type="checkbox" name='picture' value="picture4.jpeg" />
                        <span>好看的图片</span>
                    </p>
                    <p class="picture"><img src="images/picture4.jpeg" alt=""></p>
                </li>
                <li>
                    <p class="describe">
                        <input class="checkbox" type="checkbox" name='picture' value="picture5.jpeg" />
                        <span>好看的图片</span>
                    </p>
                    <p class="picture"><img src="images/picture5.jpeg" alt=""></p>
                </li>
            </ul>
        </div>
    </div>
    <div class="body">
        <div class="box">
            <div class="btns">
                <p>
                    <span id="enlarge">+</span>
                    <span id="reduce">-</span>
                </p>
            </div>
            <div class="images"></div>
        </div>
    </div>

三、jquery

$("input[type='checkbox']").click(function() {
        var picname = new Array;　　　　
        $("input[type='checkbox']:checked").each(function(key, value) {　
            picname[key] = $(value).val();　　　
        })
        if (picname[picname.length - 1] != undefined)　　 {
            $(".images").html('<img id=bigimg class=bigimg src=images/' + picname[picname.length - 1] + ' alt="图片">');
            // 缩放插件使用
            $(".images img").smartZoom()
        }　
        else {
            $(".images").empty();
        }
    })
    //放大按钮
    $("#enlarge").click(function() {
        var scaleToAdd = 0.6; 
        var img = $('.images img');
        if (img.length > 0)
            $('.images img').smartZoom('zoom', scaleToAdd);  
    })
    //缩小按钮
    $("#reduce").click(function() {
        var scaleToSub = -0.6; 
        var img = $('.images img');
        if (img.length > 0)
            $('.images img').smartZoom('zoom', scaleToSub);  
    })