? <Script type = "text/javascript">
/**
@ Development: Yang Yong
@ Function: Zoom in on details, switch between images, customize css styles, and freely overlay the view.
@ Note: the jQ-based magnifier plug-in allows you to adjust the layout as needed to adapt to various design effects.
*/
(Function (){
Function Zoom (object ){
This. zoomArea = $ (". zoom", object); // Save the area of the boost and zoom effect.
This. moveArea = $ (". move", object); // Save the moving area
This. zoomDetail = $ (". zoomDetail", object); // Save the magnifier Area
This. zoomDetailImg = $ ("img", this. zoomDetail); // Save the figure in the magnifier
This. zoomAreaWidth = this. zoomArea. width ();
This. moveAreaWidth = this. moveArea. width ();
This. zoomAreaHeight = this. zoomArea. height ();
This. moveAreaHeight = this. moveArea. height ();
This. zoomDetailWidth = this. zoomDetail. width ();
This. zoomDetailHeight = this. zoomDetail. height ();
This. zoomAreaOffset = this. zoomArea. offset (); // initialize the relative offset of the enlarged area in the viewport;
This. XY = null; // initialize the Offset Value of the mouse relative to the enlarged area
This. moveBili = null ;//
Var _ this _ = this;
This. zoomArea. mousemove (function (e) {// execute when the mouse moves in the enlarged area
_ This _. move (e. pageX, e. pageY );
}). Mouseover (function (){
_ This _. moveArea. show ();
_ This _. zoomDetail. show ();
}). Mouseout (function (){
_ This _. moveArea. hide ();
_ This _. zoomDetail. hide ();
});
This. calculate (); // initialize and calculate the required ratio value.
// The following is the function implementation of the thumbnail.
This. l = 0;
This. scrolobj = $ (". slideMain ul", object); // Save the ul scrolling object
This. lis = this. scrolobj. children (); // Save the small image list
This. btnR = $ (". btnR", object); // Save the button on the right
This. btnL = $ (". btnL", object); // Save the left button
This. lis. click (function (){
_ This _. changeImgSrc (this );
});
If (this. lis. length> 6) {// if the number of images exceeds the display area, the scroll event is registered.
This. s = this. lis. length-6; // gets the number of excess images.
This. scrolobj. width (60 * this. lis. length + "px"); // when the number of images exceeds the default value, set the ul width.
This. btnL. click (function () {_ this _. scrollRight ();}). mouseover (function () {$ (this ). addClass ("hover ")}). mouseout (function () {$ (this ). removeClass ("hover ");});
This. btnR. click (function () {_ this _. scrollLeft ();}). mouseover (function () {$ (this ). addClass ("hover ")}). mouseout (function () {$ (this ). removeClass ("hover ");});;
}
};
Zoom. prototype = {
ScrollLeft: function (){
If (Math. abs (this. l) = this. s) {return };
This. l --;
This. scrolobj. animate ({left: this. l * 58 + "px"}, "fast ");
},
ScrollRight: function (){
If (this. l = 0) {return };
This. l ++;
This. scrolobj. animate ({left: this. l * 58 + "px"}, "fast ");
},
ChangeImgSrc: function (o ){
// Change the logo Style
$ (O). addClass ("selected"). siblings (). removeClass ("selected ");
This. zoomArea. find ("img"). attr ("src", $ (o). find ("img"). attr ("medium-img "));
This. zoomDetailImg. attr ("src", $ (o). find ("img"). attr ("medium-img "));
},
Move: function (x, y) {// function executed when the mouse moves in the enlarged area
This. XY = this. mousePosAndSetPos (x, y); // calculates the x and y values of the mouse relative to the enlarged area.
// Set the slider position
This.moveArea.css ({
Left: this. XY. offsetX + "px ",
Top: this. XY. offsetY + "px"
});
// Set the details of a large image.
This.zoomDetailImg.css ({
MarginLeft:-this. XY. offsetX * this. moveBili + "px ",
MarginTop:-this. XY. offsetY * this. moveBili + "px"
});
},
MousePosAndSetPos: function (x, y) {// calculate and set the slider position in real time
X = x-this.zoomAreaOffset.left-this.moveArea.width ()/2;
Y = y-this.zoomAreaOffset.top-this.moveArea.height ()/2;
X = x <0? 0: x;
Y = y <0? 0: y;
X = x> (this. zoomAreaWidth-this.moveAreaWidth )? This. zoomAreaWidth-this.moveAreaWidth: x;
Y = y> (this. zoomAreaHeight-this.moveAreaHeight )? This. zoomAreaHeight-this.moveAreaHeight: y;
Return {
OffsetX: x,
OffsetY: y
};
},
Calculate: function () {// calculate a function
Var widthBili, heightBili;
// Calculate the ratio and height of the slider to the display of the magnifier.
WidthBili = (this. zoomAreaWidth * this. zoomDetailWidth)/this. moveAreaWidth;
HeightBili = (this. zoomAreaHeight * this. zoomDetailHeight)/this. moveAreaHeight;
// Compare the width and height
This.zoomDetailImg.css ({width: widthBili + "px", height: heightBili + "px "});
// Returns the ratio of the move.
This. moveBili = (widthBili-this.zoomDetailWidth)/(this. zoomAreaWidth-this.moveAreaWidth );
}
};
Var zoom = new Zoom ($ (". ZoomMain"). eq (0 ));
})();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
