range属性已经是很成熟的属性了，我们可以使用这个属性进行动态调整图片的宽度，其中原理在于通过不断获取range的值，并赋予给所需要的图片，进而达到动态改变图片的效果。下面贴出具体的代码，主要参照了别人的风格，加以改装。
1.这部分主要是整个页面的css代码，这一部分没有什么需要说明的，直接引用过来。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
.dialog_container {
display
:
none
;
width
:
100%
;
width
:
100
vw;
height
:
100%
;
height
:
100
vh;
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 .
5
s;
-moz-transition: width .
5
s;
transition: width .
5
s;
}
|
接下来就是主要的html代码了，这里进行了一些小的修改
1 <p>图片宽度 :<span class="img-width"></span></p> 2 <p style="position: relative;z-index: 666">200<input type="range" name="range" min="200" max="1000" step="1" value="300"/>1000</p> 3 <button>点击弹出图片</button> 4 5 <div id="dialogContainer" class="dialog_container"> 6 <div id="dialogBox" class="dialog_box"> 7 <div id="dialogTitle" class="dialog_title">尺寸动态可变图片</div> 8 <a href="javascript:" id="dialogClose" class="dialog_close">[关闭]</a> 9 <div id="dialogBody" class="dialog_body"> 10 <img src="../img/new.png" class="demo_image" /> 11 </div> 12 </div> 13 </div>
最后是经过改装的js代码，重要的一点不能忘记了，一定要记得引入jquery的库。
1 (function() { 2 3 4 5 var eleW= $(".img-width"), eleR = $("input[type='range']"), eleB = $("button"),w= $("input[type='range']").val(); 6 eleDialog = $("#dialogContainer"); 7 8 eleB.on("click", function() { 9 $("#dialogBody img").css({ 10 width:w 11 }); 12 eleDialog.show(); 13 }); 14 15 eleR.on("click", function() { 16 eleW.html(this.value); 17 $("#dialogBody img").css({ 18 width:this.value 19 }) 20 }); 21 22 $("#dialogClose").on("click", function() { 23 eleDialog.hide(); 24 return false; 25 }); 26 })();
以上就是整个动态实现图片宽度弹窗的实现,其中的原理就在于动态获取到range的值，并赋值给元素的宽，再加上一个平滑的国度使得该效果更加的逼真。其主要目的在于学习和使用range的功能用法。