1. Review of knowledge points
Parent element: parent node
Get style # getComputedStyle # ele Currentstyle (IE compatible)
The difference between className # and classList
className is a string and classList is an array
className: sets or returns the class attribute of an element. It returns a string. If I want to delete or add and replace the class attribute, I must process the returned value. Because className returns a string, I must modify the value of the string. A class value is OK. If there are multiple class values, it will be a little troublesome, To convert the array first, then add elements, and finally return to the string.
classList: attribute returns the class name of the element as a DOMTokenList object. This method can be specifically used to delete, add, or replace the class attribute.
Method to prevent event bubbling: e.stopPropagation() e.cancelbubble = true (ie compatible)
Event listener addEventListener
Event delegation
What is event delegation: delegate events of the same type from child elements to parent elements
Event based bubbling - events of the same type of the child element will trigger events of the same type of the parent element
Why event delegation: reduce event handling functions and add event bindings to future objects
Mouse coordinates
e.x / e.y = e.clientX / e.clientY} coordinates from browser
e.pageX / e.pageY # coordinates from the actual page
e.offsetX / e.offsetY coordinates from the target source coordinates of the box closest to the mouse
Disable events: pointer events: none
offsetLeft / offsetTop = the nearest ancestor element with positioning
2. The mouse follows in the box
css Style:
<style>
*{
padding: 0;
margin: 0;
}
body{
height: 3000px;
}
.b{
width: 600px;
height: 600px;
background-color: gray;
border: 15px solid #000;
margin: 100px auto;
position: relative;
}
.b1{
width: 100px;
height: 100px;
background-color: skyblue;
border: 15px solid yellowgreen;
position: absolute;
/* Event disabling is equivalent to the disabled property on the button*/
pointer-events: none;
cursor: move;
}
</style>body content:
<div class="b">
<div class="b1"></div>
</div>
<script>
var oB = document.querySelector('.b');
var oB1 = document.querySelector('.b1');
console.log(oB.offsetLeft);
console.log(oB1.offsetLeft);
//Maximum movable range
// Content width of large box - entire width of small box
var maxX = oB.clientWidth - oB1.offsetWidth ;
var maxY = oB.clientHeight - oB1.offsetHeight ;
oB.onmousemove = function(e) {
// x. Y gets the coordinates
var x = e.x - oB.offsetLeft - oB1.offsetWidth / 2 - parseInt(css(oB , 'border-left-width'));
var y = e.pageY - oB.offsetTop - oB1.offsetHeight / 2 - parseInt(css(oB , 'border-top-width'));
if(x > maxX) x = maxX ;
if(y > maxY) y = maxY ;
if(x < 0) x = 0 ;
if(y < 0) y = 0 ;
oB1.style.cssText = `left:${x}px;top:${y}px`;
}
function css(ele , prop) {
if(window.getComputedStyle) {
return getComputedStyle(ele)[prop] ;
}
return ele.currentStyle[prop] ;
}
</script>3. The width and height of the box
Three widths of the box itself
offsetWidth b+p+w(border + padding + width)
clientWidth p+w (padding + width)
getComputedStyle(ele).width w (width)
Because the id is unique on the page, you can access the element directly through the id without obtaining the element. It is generally recommended to obtain the element first
css Style:
<style>
.a{
width: 100px;
height: 100px;
border: 10px solid #000;
padding: 20px;
margin: 30px;
}
</style>body content:
<div class="a" id="div"></div>
<script>
var oDiv = document.querySelector('.a') ;
console.log(oDiv.offsetWidth); // Border + inside margin + content
console.log(oDiv.clientWidth); // Inner margin + content
console.log(getComputedStyle(oDiv).width); //Width of content
</script>4. Mouse track
css Style:
<style>
.a{
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
position: absolute;
}
</style>
body content:
<!-- <div class="a"></div> -->
<script>
var fragment = document.createDocumentFragment() ;
for(var i = 0 ; i < 50 ; i++) {
var oDiv = document.createElement('div');
oDiv.innerHTML = i + 1 ;
oDiv.className = 'a' ;
fragment.appendChild(oDiv)
}
document.body.appendChild(fragment)
var oDivs = document.querySelectorAll('.a') ;
document.onmousemove = function (e) {
var x = e.x - oDivs[0].offsetWidth / 2 ;
var y = e.y - oDivs[0].offsetHeight / 2 ;
oDivs[0].style.cssText = `left:${x}px;top:${y}px`;
for(var i = oDivs.length - 1 ; i > 0 ; i--) {
oDivs[i].style.left = css(oDivs[i-1] , 'left') ;
oDivs[i].style.top = css(oDivs[i-1] , 'top') ;
}
}
function css(ele , prop) {
if(window.getComputedStyle) {
return getComputedStyle(ele)[prop]
}
return ele.currentStyle[prop]
}
</script>5. Magnifying glass
css Style:
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
}
.left{
width: 400px;
height: 400px;
/* border: 1px solid #000; */
}
.left1 {
width: 400px;
height: 400px;
/* border: 1px solid #000; */
position: relative;
}
.left2{
width: 400px;
border: 1px solid #000;
display: flex ;
}
.left2 img{
width: 100px;
height: 100px;
}
.left1 img {
width: 400px;
height: 400px;
}
.cover{
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
opacity: 0;
cursor: pointer;
}
.right{
width: 600px;
height: 600px;
position: relative ;
overflow: hidden;
opacity: 0;
}
.right img{
width: 1200px;
height: 1200px;
position: absolute;
}
body{
height: 3000px;
}
</style>body content:
<!-- Magnifying glass module -->
<div class="big">
<div class="left">
<div class="left1">
<img src="images/04.jpg" alt="">
<div class="cover"></div>
</div>
<div class="left2">
<img src="images/01.jpg" alt="" class="img1">
<img src="images/02.jpg" alt="" class="img2">
<img src="images/03.jpg" alt="" class="img3">
<img src="images/04.jpg" alt="" class="img4">
</div>
</div>
<!-- Right enlarged part -->
<div class="right">
<img src="images/4.jpg" alt="">
</div>
</div>
<script>
// Preconditions for realizing magnifying glass:
// Ratio of left picture to mask layer = ratio of right large picture to box
// Moving scale: the moving range of the large image on the right / the moving range of the mask layer on the left
function $ (selecctor){
return document.querySelector(selecctor) ;
}
var oBig = $('.big') ;
var oLeft = $('.left') ;
var oLeft1 = $('.left1');
var oCover = $('.cover');
var oRight = $('.right');
var oRightImg = $('.right img');
// The distance from the big box to the left
var left00 = oLeft.offsetLeft ;
console.log(left00);
var top00 = oLeft.offsetTop ;
// The width of the mask layer
var a = oCover.offsetWidth / 2 ;
//Maximum movement range of mask layer
var maxX = oLeft1.clientWidth - oCover.offsetWidth ;
var maxY = oLeft1.clientHeight - oCover.offsetHeight ;
//Large moving range on the right
var maxX2 = oRightImg.clientWidth - oRight.offsetWidth ;
var scale = maxX2 / maxX ;
//Mouse in
oLeft1.addEventListener('mouseover' , function() {
oCover.style.opacity = 1 ;
oRight.style.opacity = 1 ;
//Mouse movement event
document.addEventListener('mousemove' , function (e) {
var x = e.x - left00 - a ;
var y = e.pageY - top00 - a ;
if(x < 0) x = 0;
if(y < 0) y = 0 ;
if(x > maxX) x = maxX ;
if(y > maxY) y = maxY ;
//cssText overrides inline styles
oCover.style.cssText += `left:${x}px ; top:${y}px` ;
oRightImg.style.cssText += `left:${-x * scale}px ; top:${-y * scale}px` ;
})
})
//Event delegation
var oLeft2 = $('.left2');
oLeft2.addEventListener('click' ,function(e){
e = e || event ;
var target = e.target ;
console.log(999);
if(target.className === 'img1'){
oLeft1.firstElementChild.src = target.src ;
oRight.children[0].src = 'images/1.jpg';
}
if(target.className === 'img2'){
oLeft1.firstElementChild.src = target.src ;
oRight.children[0].src = 'images/2.jpg';
}
if(target.className === 'img3'){
oLeft1.firstElementChild.src = target.src ;
oRight.children[0].src = 'images/3.jpg';
}
if(target.className === 'img4'){
oLeft1.firstElementChild.src = target.src ;
oRight.children[0].src = 'images/4.jpg';
}
})
// Mouse out
oLeft1.addEventListener('mouseout' , function() {
oCover.style.opacity = 0 ;
oRight.style.opacity = 0 ;
})
</script>6. Picture switching
css Style:
<style>
img{
width: 400px;
height: 400px;
}
p img{
width: 100px;
height: 100px;
}
</style>body content:
<img class="leftImg" src="" alt="">
<p>
</p>
<script>
var smallArr = ['../images/01.jpg' , '../images/02.jpg' , '../images/03.jpg' , '../images/04.jpg'] ;
var bigArr = ['../images/1.jpg' , '../images/2.jpg' , '../images/3.jpg' , '../images/4.jpg'] ;
// Dynamically generate pictures
var oLeftImg = document.querySelector('.leftImg') ;
// The left figure shows the first one by default
oLeftImg.src = bigArr[0] ;
var oP = document.querySelector('p') ;
// Generate multiple small graphs
var fragment = document.createDocumentFragment() ;
smallArr.forEach(function (v , i) {
var oImg = document.createElement('img') ;
oImg.src = v ;
// oImg.setAttribute('bigSrc' , bigArr[i]);
oImg.bigSrc = bigArr[i] ;
fragment.appendChild(oImg);
})
oP.appendChild(fragment) ;
// Bind events to each small graph -- delegate to p
oP.addEventListener('mouseover' , function (e) {
e = e || event ;
var target = e.target ;
if(target.tagName === 'IMG') {
// oLeftImg.src = target.getAttribute('bigSrc')
oLeftImg.src = target.bigSrc ;
}
})
</script>