通过html5的range属性动态改变图片的大小

range属性已经是很成熟的属性了，我们可以使用这个属性进行动态调整图片的宽度，其中原理在于通过不断获取range的值，并赋予给所需要的图片，进而达到动态改变图片的效果。下面贴出具体的代码，主要参照了别人的风格，加以改装。

1.这部分主要是整个页面的css代码，这一部分没有什么需要说明的，直接引用过来。

.dialog_container {
            display: none;
            width: 100%;
            width: 100vw;
            height: 100%;
            height: 100vh;
            background-color: rgba(0,0,0,.35);
            text-align: center;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
        }
        .dialog_container:after {
            display: inline-block;
            content: '';
            width: 0;
            height: 100%;
            vertical-align: middle;
        }
        .dialog_box {
            display: inline-block;
            border: 1px solid #ccc;
            text-align: left;
            vertical-align: middle;
            position: relative;
        }

        .dialog_title {
            line-height: 28px;
            padding-left: 5px;
            padding-right: 5px;
            border-bottom: 1px solid #ccc;
            background-color: #eee;
            font-size: 12px;
            text-align: left;
        }

        .dialog_close {
            position: absolute;
            top: 5px;
            right: 5px;
        }

        .dialog_body {
            background-color: #fff;
        }


        .demo_image {
            -webkit-transition: width .5s;
            -moz-transition: width .5s;
            transition: width .5s;
        }

　　接下来就是主要的html代码了，这里进行了一些小的修改

<p>图片宽度 :<span class="img-width"></span></p>
<p style="position: relative;z-index: 666">200<input type="range" name="range" min="200" max="1000" step="1" value="300"/>1000</p>
<button>点击弹出图片</button>

<div id="dialogContainer" class="dialog_container">
    <div id="dialogBox" class="dialog_box">
        <div id="dialogTitle" class="dialog_title">尺寸动态可变图片</div>
        <a href="javascript:" id="dialogClose" class="dialog_close">[关闭]</a>
        <div id="dialogBody" class="dialog_body">
            <img src="../img/new.png" class="demo_image" />
        </div>
    </div>
</div>

最后是经过改装的js代码，重要的一点不能忘记了，一定要记得引入jquery的库。

 (function() {



            var eleW= $(".img-width"), eleR = $("input[type='range']"), eleB = $("button"),w= $("input[type='range']").val();
                    eleDialog = $("#dialogContainer");

            eleB.on("click", function() {
                $("#dialogBody img").css({
                    width:w
                });
                eleDialog.show();
            });

            eleR.on("click", function() {
                eleW.html(this.value);
                $("#dialogBody img").css({
                    width:this.value
                })
            });

            $("#dialogClose").on("click", function() {
                eleDialog.hide();
                return false;
            });
    })();

以上就是整个动态实现图片宽度弹窗的实现,其中的原理就在于动态获取到range的值，并赋值给元素的宽，再加上一个平滑的国度使得该效果更加的逼真。其主要目的在于学习和使用range的功能用法。