One.HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="module"> import ZoomMenu from "./js/ZoomMenu.js"; // import CarouselMenu from "./js/CarouselMenu.js"; //Array of small round casts var list=["a_icon.jpg","b_icon.jpg","c_icon.jpg","d_icon.jpg","e_icon.jpg","f_icon.jpg","g_icon.jpg","h_icon.jpg","i_icon.jpg","j_icon.jpg"] //Instantiate ZoomMenu passed in array let zoomMenu=new ZoomMenu(list); //Execute the zoomMenu method zoomMenu.appendTo(document.body); // let carouselMenu=new CarouselMenu(list); // carouselMenu.appendTo(document.body); </script> </body> </html>
Two. js
js object-oriented development: there are three modules:
- Zoom. JS is the package of magnifier
- Encapsulation of CarouselMenu.js carouselmenu
- ZoomMenu.js is the implementation of connection 1 and 2
- Used. Utils.js utility class
2.1 zoom. JS is the package of magnifier
import Utils from "./Utils.js"; export default class CarouselMenu { smallWidth = 450;//The width of the small container maskWidth = 303.75;// mask container width zoomWidth = 540;//zoom container width constructor() { //this.elem: save the div returned by createElem() as all the elements created this.elem = this.createElem(); } //Create container div > (DIV × small > div × mask) + div × zoom createElem() { //Judge this.elsm. If there are stored values, jump out directly and do not perform the following code performance optimization if (this.elem) return this.elem; //Create div container let div = Utils.ce("div", { position: "absolute", }); //Add the following under the div container div.innerHTML = "<div class='small' id='small'>" + "<div class='mask' id='mask'></div>" + "</div>" + "<div class='zoom' id='zoom'></div>" ; //Add css style functions this.setStyle(); //This method will put all the elements with id in the current object //If the column id is a small div, it can be obtained directly through this.small after execution Utils.getIdElem(div, this);//this is the current class //Store this event function in mouseHanlder, which is good for closing the event after execution this.mouseHanlder=e=>this.smallMouseHandler(e); //small container add event this.small.addEventListener("mouseenter", this.mouseHanlder);//Mouse in event //Receive / / add the event CarouselMenu.js to the thumbnail of the thumbnail document.addEventListener("Change_Menu_Img",e=>this.setImage(e.src)); return div; } //div style small: container for storing mask: small container for moving zoom: container for magnifying glass effect setStyle() { Utils.insertCss(".small", { width: this.smallWidth + "px", height: this.smallWidth + "px", position: "absolute", border: "1px solid #000000", }); Utils.insertCss(".mask", { width: this.maskWidth + "px", height: this.maskWidth + "px", backgroundColor: "rgba(200,170,0,0.3)", position: "absolute", display: "none" }); Utils.insertCss(".zoom", { width: this.zoomWidth + "px", height: this.zoomWidth + "px", border: "1px solid #CCCCCC", position: "absolute", left: this.smallWidth + 2 + "px", display: "none" }); } //Execute zoom. Addento (document. Body); appendTo(parent) { parent.appendChild(this.elem); } //Mouse event event method smallMouseHandler(e) { //Event type switch (e.type) { //Mouse in event case "mouseenter": //If this.rect does not have the value this.small, the element position of this div is assigned to this.rect //e.currentTarget is always the listener, that is, the node that directly calls addEventlistener document if (!this.rect) this.rect = this.small.getBoundingClientRect();//getBoundingClientRect() gets the element location. This method has no parameters e.currentTarget.addEventListener("mousemove", this.mouseHanlder);//The mouse move event triggers the execution function to enter case "mousemove": e.currentTarget.addEventListener("mouseleave", this.mouseHanlder);//The mouse leaves the event to trigger the execution function to enter the case "mouseleave": //This.mask.this.zoom. These two div s are displayed this.mask.style.display = "block"; this.zoom.style.display = "block"; break; //Mouse movement case "mousemove": //Execute method masKMove(); this.masKMove(e.clientX,e.clientY);//Current mouse click position coordinates break; //Mouse off remove event listening zoom mask element setting hidden case "mouseleave": e.currentTarget.removeEventListener("mousemove", this.mouseHanlder); e.currentTarget.removeEventListener("mouseleave", this.mouseHanlder); this.mask.style.display = "none" this.zoom.style.display = "none" break; } } // Mouse movement magnifier effect masKMove(_x,_y){ //Center of drag element //this.rect.x:this.small the abscissa of the element position of this div maskWidth: mask container width var x=_x-this.rect.x-this.maskWidth/2; var y = _y - this.rect.y - this.maskWidth / 2; //Drag events can only be dragged in the area of the parent container if(x<0) x=0; if(y<0) y=0; //small the horizontal and vertical coordinates of the distance between the element position of this div and the sub container mask if (x > this.rect.width - this.maskWidth) x = this.rect.width - this.maskWidth; if (y > this.rect.height - this.maskWidth) y = this.rect.height - this.maskWidth; //The location change of this.mask sub container Object.assign(this.mask.style,{ left:x+"px", top:y+"px" }); //A container for this.zoom magnification Object.assign(this.zoom.style,{ //The position of the background image and the opposite direction of the mask mouse movement calculate the scale between the size image to achieve the magnifying glass effect backgroundPositionX:-x*this.zoomWidth/this.maskWidth+"px", backgroundPositionY: -y * this.zoomWidth / this.maskWidth + "px", }); } //Execution method of throwing event setImage(src) { Object.assign(this.small.style, { backgroundImage: "url(" + src + ")", backgroundSize: "100% 100%" }); Object.assign(this.zoom.style, { backgroundImage: "url(" + src + ")", }); } }
2.2 encapsulation of carouselmenu.js carouselmenu
import Utils from "./Utils.js";//Reference Utils.js tool class export default class CarouselMenu{ num=5;//Number of displays number of small charts of the carousel chart position=0;//The number of pages rre;//Save the current e.target element //arr: array, width: the parameter is stored as global. If no parameter is passed, the initial value is 450 * x / / the x-axis of the carousel container: the y-axis of the carousel container constructor(arr,_width=450,_x=0,_y=0){ this.x=_x;//The x-axis of the container of the rotograms this.y=_y;//The y-axis of the container of the rotograms this.menuWidth=_width;//The parameter is saved as global. If no parameter is transferred, the initial value is 450 this.list=arr;//Save the array to the list property this.elem=this.createElem(arr);//The result of executing the function createElem (arr) is stored in this.elem property } createElem(arr) { //Prevent duplicate creation if this.elem ends the method run if(this.elem) return this.elem; let div=Utils.ce("div");//Utils.js tool class to create a div div.className="carousel";//Add a carousel class to div //Add the following under the div container //The string template is used, along with the array method of arr.reduce //img div>div>img*10 img div.innerHTML = ` <img src='./img/prev.png' class='prev' id='prev'> <div class='carouselDiv'> <div class='imgCon' id='imgCon'> ${arr.reduce((value, item) => { value += '<img src=./img/' + item + ' class=imgs>' return value }, '')} </div> </div> <img src='./img/next.png' class='next' id='next'> `; //Execute method add style this.setStyle(arr); Utils.getIdElem(div,this);//Get the global attribute of the div containing the child element id attribute added to this class //Get id to add event to element this.prev.addEventListener("click", e => this.bnClickHandler(e));//Left Icon binding click event of small round robin this.next.addEventListener("click", e => this.bnClickHandler(e));//Right icon binding click event of small round robin this.imgCon.addEventListener("mouseover", e => this.mouseHandler(e));//Adding mouse passing events to the thumbnail of the thumbnail return div; } //Append execution after element appendTo(parent) { parent.appendChild(this.elem); } //How to add css Style setStyle(arr){ //top:this.y+2+"px", distance from the top of the magnifier Utils.insertCss(".carousel",{ width: this.menuWidth + "px", height: "58px", position: "absolute", top:this.y+2+"px", }); //Left and right icons of the little wheel map Utils.insertCss(".prev,.next", { position: "absolute", top: "0px", bottom: "0px", height: "32px", margin: "auto" }) //Set left and right position of Icon Utils.insertCss(".prev", { left: "5px" }); Utils.insertCss(".next", { right: "5px" }); //Width of left and right icons var w=this.menuWidth-64; // Parent element of the parent element of the carousel Utils.insertCss(".carouselDiv", { width: w + "px", height: "58px", position: "absolute", left: "32px", overflow: "hidden", }); //Spacing between rotation charts 19.2 var gap = (w - 58 * this.num) / this.num; //The length of the rotation chart 772 var conW = arr.reduce(value => { return value + 58 + gap; }, 0); //Parent element of a rotation chart Utils.insertCss(".imgCon", { position: "absolute", width: conW + "px", height: "58px", left: 0, transition: "all 0.5s" }); //The style of rotation chart Utils.insertCss(".imgs", { width: "54px", height: "54px", border: `2px solid rgba(255,0,0,0)`, marginRight: gap + "px" }) } //Left and right click event execution of small wheel map bnClickHandler(e){ //Regular expression to find the SRC of prev e.target.src if(/prev/.test(e.target.src)){ this.position--; if(this.position<0) this.position=0; // if (this.position < 0) this.position = Math.ceil(this.list.length / this.num) - 1; }else{ this.position++; if (this.position > Math.ceil(this.list.length / this.num) - 1) this.position = Math.ceil(this.list.length / this.num) - 1; // if (this.position > Math.ceil(this.list.length / this.num) - 1) this.position = 0; } //Is the width of the calculated rotation chart var w=this.menuWidth-64; //After calculation, click the left and right buttons to move the width this.imgCon.style.left = -this.position * w + "px" } //Adding mouse passing events to the thumbnail of the thumbnail //e.target the currently clicked element mouseHandler(e){ if (e.target.nodeName !== "IMG") return; if (this.pre) { this.pre.style.border = "2px solid rgba(255,0,0,0)"; } this.pre = e.target; this.pre.style.border = "2px solid rgba(255,0,0,1)"; //Throw event replace replace replace icon with empty string var evt=new Event("Change_Menu_Img"); evt.src=e.target.src.replace("_icon",""); document.dispatchEvent(evt); } }
2.3 ZoomMenu.js is the implementation of connection 1 and 2
import Zoom from "./Zoom.js"; import CarouselMenu from "./CarouselMenu.js"; import Utils from "./Utils.js"; export default class ZoomMenu{ constructor(arr){ this.elem=this.createElem(arr);//Execution method stores the returned content (div) as a global } //Execution method createElem(arr){ if(this.elem) return this.elem;//Single instance mode prevents duplicate creation //Creating a div is the parent container of magnifier and carousel let div=Utils.ce("div",{ width:"1200px", margin: "0 auto", border: "1px solid slategrey", position:"relative" }); //Zoom is the package of magnifier //shilihua instantiation let zoom=new Zoom(); //Pass in the new div as a parameter zoom.appendTo(div); //Encapsulation of CarouselMenu carousel map // //arr: array, width: the parameter is stored as global. If no parameter is passed, the initial value is 450 * x / / the x-axis of the carousel container: the y-axis of the carousel container let carousel=new CarouselMenu(arr,450,0,450); carousel.appendTo(div); return div; } //Execute this.elem) to append to the body [zoomMenu.appendTo(document.body);] appendTo(parent){ parent.appendChild(this.elem); console.log(this.elem); } }
3, Knowledge points
1. styleSheetsdocument.styleSheets
This interface can get the link stylesheet introduced on the web page and the style stylesheet document.styleSheets.length get the length of the stylesheet on the page toLowerCase() method to convert the string to lowercase.
2. cssRules returns a set of rules. The rules in the specified location can be obtained through the index.
**3. Insert before (newitem, existingitem); * * method can insert a new child node before the existing child node. InsertBefore (inserted element, inserted position)
4. The innerHTML property sets or returns the HTML between the start and end tags of the table row. HTML tag events can be written directly
5. Events used
- mousemove mouse move
- mouseover mouse over
- mouseout mouse out
- mouseenter mouse in
- mouseleave mouse away
6. getBoundingClientRect() gets the element location. This method has no parameters
7.currentTarget and targetcurrentTarget
It is always the listener, that is, the node that calls addEventlistener directly, and target is the real sender of the event, that is, the node that triggers the event, and the clicked node in the click event.
8. Current click position coordinates of clientx and clientY mouse click position x, y coordinates from the current body visible area
9. The reduce () method receives a function as an accumulator. Reduce performs a callback function for each element in the array in turn, excluding the elements deleted or never assigned in the array. It accepts four parameters: initial value (the return value of the last callback), current element value, current index, and original array.
arr.reduce(value=>{ return value+58+gap; },0)
10. The regular expression test() method is used to detect whether a string matches a pattern
11 incident release
EventTarget is called Event target object, and the object of Event instance is called Event object. Listening and dispatching objects can be DOM elements, EventTarget, or classes that inherit EventTarget.
- //If you listen for a function call (addEventListener is used), the store is added in memory
- //Minimize the listening of events, so the event will be delegated to the parent container for listening, so as to reduce the storage of event listening
- //e.currentTarget is the event listening event object (which object executes the addEventListener function is who)
- //Target object of e.target event the last object of the target stage triggered by the event. e.srcElement is compatible with IE
- //this in the event function is equal to e.currentTarget by default
- usage
Drop the event in CarouselMenu.js
//Throw event replace replace replace icon with empty string var evt=new Event("Change_Menu_Img"); evt.src=e.target.src.replace("_icon",""); document.dispatchEvent(evt);
- Receiving events
Receive events in Zoom.js
//Receive / / add the event CarouselMenu.js to the thumbnail of the thumbnail document.addEventListener("Change_Menu_Img",e=>this.setImage(e.src));
12. The replace () method is used to replace some characters in a string, or a substring that matches a regular expression.
13. Add label:
div.innerHTML = ` <img src ='./ img / prev.png'class ='prev'id ='prev'> <div class ='carouselDiv'> <div class ='imgCon'id ='imgCon'> $ {arr.reduce((value，item)=> { value + ='<img src =. / img /'+ item +'class = imgs> </ img>' }，'')} < / div> </ div> <img src ='./ img / next.png'class ='next'id ='next'> ` ;
- The effect is as follows:
