This article mainly introduces how to use the slider to control the image size in javascript. The example analyzes the tips for using mouse events in javascript, which has some reference value, for more information about how to use the slider to control the image size, see the example in this article. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
Js drag the slider to control the image display size
<
>
=
Script
// Golbal
Var pv = null;
Var sd = null;
Window. onload = function (){
Pv = new PicView ("/images/m01.jpg ");
Sd = new Slider (
Function (p ){
Document. getElementById ("sliderBlock"). innerHTML = 2 * p + "% ";
Pv. expand (2 * p/100 );
}, Function (){});
}
Var PicView = function (url, alt ){
This. url = url;
This. obj = null;
This. alt = alt? Alt :"";
This. realWidth = null;
This. realHeight = null;
This. zoom = 1;
This. init ();
}
PicView. prototype. init = function (){
Var _ img = document. createElement ("img ");
_ Img. src = this. url;
_ Img. alt = this. alt;
_ Img. style. zoom = this. zoom;
Document. getElementById ("picViewPanel"). appendChild (_ img );
This. obj = _ img;
This. realWidth = _ img. offsetWidth;
This. realHeight = _ img. offsetHeight;
}
PicView. prototype. reBind = function (){
This. obj. style. width = this. realWidth * this. zoom + "px ";
This. obj. style. height = this. realHeight * this. zoom + "px ";
// This. obj. style. zoom = this. zoom;
}
PicView. prototype. expand = function (n ){
This. zoom = n;
This. reBind ();
}
Var Slider = function (ing, ed ){
This. block = document. getElementById ("sliderBlock ");
This. percent = 0;
This. value = 0;
This. ing = ing;
This. ed = ed;
This. init ();
}
Slider. prototype. init = function (){
Var _ sx = 0;
Var _ cx = 0;
Var o = this. block;
Var me = this;
O. onmousedown = function (e ){
Var e = window. event | e;
_ Sx = o. offsetLeft;
_ Cx = e. clientX-_ sx;
Document. body. onmousemove = move;
Document. body. onmouseup = up;
};
Function move (e ){
Var e = window. event | e;
Var pos_x = e. clientX-_ cx;
Pos_x = pos_x <13? 13: pos_x;
Pos_x = pos_x> 248 + 15-50? 248 + 15-50: pos_x;
O. style. left = pos_x + "px ";
Me. percent = (pos_x-13)/2;
Me. ing (me. percent );
}
Function up (){
Document. body. onmousemove = function (){};
Document. body. onmouseup = function (){};
}
}
Script
I hope this article will help you design javascript programs.
