Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use JavaScript to achieve the effect of imitating JD.com magnifying glass, the article is very detailed, has a certain reference value, interested friends must read it!

Function realization

1. The mouse passes over the small picture box, the yellow masking layer and the large picture display, and the two box functions are hidden when you leave.

2. The yellow masking layer follows the mouse

Give the coordinates of the mouse to the box and assign values constantly.

It is not appropriate to assign the mouse coordinates to the occlusion layer, because the occlusion layer coordinates are subject to the parent box.

The first is to get the coordinates of the mouse in the interior of the box.

Then give the values to the left and top values of the shielding layer.

The mouse movement event is used at this time, but it is still moved in the small picture box.

It is found that the occlusion layer is in the wrong position, and it is necessary to subtract half of the height and width of the box itself.

The occlusion layer cannot go beyond the range of the small picture box.

If it is less than 0, set the coordinates to 0

If it is greater than the maximum moving distance of the occlusion layer, set the coordinates to the maximum moving distance.

Maximum moving distance of the occlusion layer: the width of the small picture box minus the width of the occlusion layer box

3. Move the yellow masking layer, and the big box follows the picture

It's too difficult.

Document .box {width: 300px; height: 300px; position: relative; border: 1px solid # ccc;} .tupian {width: 100%; height: 100% } / * cannot be 100% of all img in box, so it is impossible to move pictures in a big box * / .mask {display: none; width: 150px; height: 150px; background: rgba (228,248,138,0.3); position: absolute; top: 0px Left: 0px; cursor: move;} .big {display: none; width: 400px; height: 400px; position: absolute; top: 0px; left: 310px; background-color: pink; overflow: hidden } .big img {position: absolute; top: 0px; left: 400px}

/ / when the mouse is over the box, the arrow changes to move var tupian = document.querySelector ('.tupian') var mask = document.querySelector ('.mask') var big = document.querySelector ('.big') var box = document.querySelector ('.box') var bigimg = document.querySelector ('.bigimg') / / when the mouse is over the small picture Yellow occlusion layer display and large box display box.addEventListener ('mouseover', function () {/ / cannot be an event added to a picture, because mask will block the picture mask.style.display =' block' big.style.display = 'block'}) / / Mouse away from the small picture Hide box.addEventListener ('mouseout', function () {mask.style.display =' none' big.style.display = 'none'}) box.addEventListener (' mousemove') Function (e) {/ / first calculates the coordinates of the mouse in the interior of the box var x = e.pageX-box.offsetLeft var y = e.pageY-box.offsetTop / / minus 75 (general in the box) in order to keep the mouse in the center of the box / / mask moving distance var maskx = x-mask.offsetWidth / 2 var masky = y-mask.offsetHeight / 2 / / it's better to assign a value like this There is no need to consider the unit situation / / constraint in if-- set the moving range of the small box if (maskx = box.offsetWidth-mask.offsetWidth) {maskx = box.offsetWidth-mask.offsetWidth} if (masky = box.offsetHeight-mask.offsetHeight) {masky = box.offsetHeight-mask.offsetHeight } mask.style.left = maskx + 'px' mask.style.top = masky +' px' var maxMax = box.offsetWidth-mask.offsetWidth / / the maximum moving distance of the occlusion layer var bigMax = bigimg.offsetWidth-big.offsetWidth / / the maximum moving distance of the large picture / / the moving distance of the large picture var bigx = maskx * bigMax / maxMax var bigy = masky * bigMax / maxMax bigimg.style.left =-bigx + 'px' bigimg.style.top =-bigy +' px'}) / / tupian.addEventListener ('mouseover' Function () {/ / tupian.addEventListener ('mousemove' Function (E1) {/ / mask.style.display = 'block' / / var x = e1.pageX-tupian.offsetLeft / / var y = e1.pageY-tupian.offsetTop / / mask.style.left = x-75 +' px' / / mask.style.top = y-75 + 'px' / / if (mask.style.bottom

< -10) { // mask.style.bottom = 0 + 'px' // } // }) //让遮罩层跟随鼠标移动 // div.addEventListener('mousemove', function(e) { // var a = e.pageX - div.offsetLeft // var b = e.pageY - div.offsetTop // if (a >

75) {/ / mask.style.left = e.pageX-div.offsetLeft-x + 'px' / /} / / if (mask.style.left

< 0) { // mask.style.left = 0 // } // if (b >

75) {/ / mask.style.top = e.pageY-y + 'px' / /} / / if (mask.style.top

< 0) { // mask.style.top = 0 // } // mask.style.left = x - 75 + 'px' //鼠标并不一定要在mask的正中间 // mask.style.top = y - 75 + 'px' // div.addEventListener('mousemove', fn) // function fn(e) { //这个函数一定要写在mousedown函数里面才能取出x和y // //不能让白色遮罩层出box盒子 // mask.style.left = e.pageX - x - 75 + 'px' // mask.style.top = e.pageY - y - 75 + 'px' // } // }) //鼠标离开盒子就取消移动事件 // div.addEventListener('mouseout', function() { // div.removeEventListener('mousemove', fn) // }) // }) 复盘: Document .box { width: 300px; height: 300px; position: relative; } .pre { width: 100% } .mask { display: none; position: absolute; top: 0px; left: 0px; width: 100px; height: 150px; background-color: pink; opacity: 0.3; } .big { /* display: none; */ position: absolute; top: 0px; left: 310px; width: 400px; height: 400px; background-color: pink; overflow: hidden; /* 当大盒子里面地图片出来地时候，就将出来部分地图片进行隐藏 */ } /* 鼠标进入小盒子地时候，变为移动 */ .bigtu { position: absolute; top: 0px; left: 0px; } .box:hover { cursor: move }

/ / 1. Enter the small box with the mouse Mask layer, large box appears var box = document.querySelector ('.box') var mask = document.querySelector ('.mask') var big = document.querySelector ('.big') var bigtu = document.querySelector ('.bigtu') box.addEventListener ('mouseover'') Function () {mask.style.display = 'block' big.style.display =' block'}) / / 2, when the mouse leaves the small box Mask layer, big box hide box.addEventListener ('mouseout', function () {mask.style.display =' none' big.style.display = 'none'}) / / 3, add movement effect, mask layer follows mouse movement The coordinate of the mouse box is the location of the mask layer box.addEventListener ('mousemove') Function (e) {/ / find the mouse coordinates in the small box var x = e.pageX-box.offsetLeft var y = e.pageY-box.offsetTop / / give the mouse ground coordinates to the mask layer / / mask.style.left = x + 'px' / / mask.style.top = y +' px' / / the mouse should be located in the center of the mask layer var maskx = x-mask.offsetWidth / 2 var masky = y-mask.offsetHeight / 2 / / 4, The range of mask layer movement should be constrained That is, to constrain the position of the mouse, the maskx and masky should be greater than 0 and less than a value, and you cannot first go below the bottom or the right side of the if (maskx).

< 0) { maskx = 0 } if (maskx >

Box.offsetWidth-mask.offsetWidth) {maskx = box.offsetWidth-mask.offsetWidth} if (masky

< 0) { masky = 0 } if (masky >

Box.offsetHeight-mask.offsetHeight) {masky = box.offsetHeight-mask.offsetHeight} mask.style.left = maskx + 'px' mask.style.top = masky +' px' / / 5, to move the picture inside the big box, add relative positioning. In principle, the distance the mouse moves in the small box is proportional to the distance the mouse moves in the big box. In fact, it is the left of the picture in the small box, the top value and the left in the big box. The top value is proportionally important to clarify the proportional relationship var bigtux = maskx * (bigtu.offsetWidth-big.offsetWidth) / (box.offsetWidth-mask.offsetWidth) var bigtuy = masky * (bigtu.offsetHeight-big.offsetHeight) / (box.offsetHeight-mask.offsetHeight) bigtu.style.left =-bigtux + 'px' bigtu.style.top =-bigtuy + Px' / / should also restrict the range of movement of the picture inside the big box / / ignore one thing: the size of the bigtu is 450 to 450. So a big box can't be directly equal to 450 million 450. Should be less than 450mm 450 In this way, the picture has room for movement in the big box / / equivalent to the small box on the left. The picture has been scaled down, and the original picture needs to be displayed in the big box. The position corresponds to}) above is "how to use JavaScript to achieve the effect of imitating JD.com magnifying glass" all the content of this article, thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.