当前位置：网站首页>PC side web page special effects (offset series, obtain the coordinates of the mouse in the box, pop-up drag effect, magnifying glass effect)
PC side web page special effects (offset series, obtain the coordinates of the mouse in the box, pop-up drag effect, magnifying glass effect)
2022-07-28 22:37:00 【Green hedgerow bamboo maple】
1. Element offset offset series
offset The position of the element can be obtained dynamically by series related attributes （ The offset ）, Size, etc
（1） The position of the obtained element from the parent element with positioning
（2） The size of the obtained element itself （ Width height ）
Be careful , Returns a value without units
2.offset Series of common properties
| offset Series properties | effect |
| element.offsetParent | Returns the parent element with positioning as the element , If the parent element is not located, it returns body |
| element.offsetTop | Returns the offset above the parent element with relative positioning |
| element.offsetLeft | Returns the offset of the left border of the parent element with relative positioning |
| element.offsetWidth | Returning to itself includes padding, Frame , Width of content , Return value without unit |
| element.offsetHeight | Returning to itself includes padding, Frame , Height of content area , Return value without unit |
<style>
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 150px;
}
.son {
width: 150px;
height: 150px;
background-color: grey;
margin-left: 20px;
}
</style><body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
console.log(father.offsetTop);//150
console.log(father.offsetLeft);//150
//father No positioning or none father,offsetLeft according to body Calculate , Get the results 170
//father When there is relative positioning ,offsetLeft according to father Calculation , Get the results 20
console.log(son.offsetLeft);
console.log(father.offsetWidth);//200
console.log(father.offsetHeight);//200
console.log(son.offsetWidth);//150
console.log(son.offsetHeight);//150
// Returns the parent element with the location
console.log(son.offsetParent);//<div></div>
console.log(father.offsetParent);//<body></body>
</script>
</body>offset And style The difference between
| offset | style |
| offset You can get the style values in any style sheet | style You can only get the style values in the in line style sheet |
| offset The values obtained by the series have no units | style.width What you get is a string with units |
| offsetWidth contain padding+border+width | style.width Get bad content padding and border Value |
| offsetWidth And so on are read-only properties | style.Width read-write |
| It is suitable for getting only the size of elements | Suitable for changing element values |
Get the coordinates of the mouse in the box
Ideas ： Click... In the box , Want to get the distance between the mouse and the box , First get the coordinates of the mouse in the page (e.pageX,e.pageY), Second, get the distance of the box in the page (box.offsetLeft,box.offsetTop), Subtract the distance of the box from the coordinates of the mouse on the page to get the coordinates of the mouse in the box
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 100px;
}
</style><body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
box.addEventListener('mouseover', function (e) {
// console.log(e.pageX);
// console.log(e.pageY);
// console.log(box.offsetLeft);
// console.log(box.offsetTop);
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = "x The value of is " + x + " y The value of is " + y;
})
</script>
</body>Drag module box
Ideas ： Drag and drop effects include mouse clicks (mousedown), Mouse movement (mousemove), Release the mouse (mouseup), While the mouse is moving , Assign the obtained latest mouse coordinate value to the... Of the modal box left and top value , In this way, the modal box can follow the mouse
Subtract the coordinates of the mouse in the box from the coordinates of the mouse , That's where the modal box really is
<style>
.link {
text-align: center;
font-size: 30px;
color: green;
}
* {
margin: 0;
padding: 0;
}
.mask {
display: none;
padding-top: 200px;
width: 100%;
height: 3000px;
background-color: #DDDDDD;
}
.login {
position: absolute;
float: left;
left: 100px;
top: 200px;
width: 600px;
height: 400px;
background-color: #fff;
}
.login p {
width: 100%;
height: 35px;
/* background-color: pink; */
font-size: 14px;
line-height: 35px;
text-align: center;
}
.login .msg {
width: 100%;
height: 240px;
/* background-color: skyblue; */
text-align: center;
}
.login .msg input {
width: 500px;
height: 30px;
margin-top: 50px;
outline: none;
}
.login .button {
width: 100%;
text-align: center;
}
button {
margin-top: 30px;
width: 300px;
height: 50px;
background-color: #FFFF00;
}
.logout {
float: left;
width: 50px;
height: 50px;
background-color: #FF8888;
border-radius: 50%;
margin-left: -25px;
margin-top: -25px;
text-align: center;
font-size: 14px;
line-height: 50px;
color: #fff
}
</style><body>
<div class="link"> Click login </div>
<div class="mask">
<div class="login">
<p id="title"> Login member </p>
<div class="msg">
user name ：<input type="text"><br>
The secret code ：<input type="password">
</div>
<div class="button">
<button> Login member </button>
</div>
</div>
<div class="logout">x</div>
</div>
</body>
<script>
var link = document.querySelector('.link');
var mask = document.querySelector('.mask');
var logout = document.querySelector('.logout');
var title = document.querySelector('#title');
var login = document.querySelector('.login');
// Click to close the hidden login interface
logout.addEventListener('click', function () {
mask.style.display = 'none';
})
link.addEventListener('click', function () {
mask.style.display = 'block';
link.style.display = 'none';
});
//(1) The mouse click , You get the coordinates of the mouse in the box
title.addEventListener('mousedown', function (e) {
// console.log(e.pageX);
// console.log(e.pageY);
//x coordinate
var x = e.pageX - login.offsetLeft;
//y coordinate
var y = e.pageY - login.offsetTop;
// console.log(x, y);
// When the mouse is moving , Subtracting the coordinates of the mouse in the box from the coordinates of the mouse in the page is the coordinates of the modal box left and top value
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// The mouse pop-up , Remove the mouse movement event
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move)
})
})
</script>
Imitation Jingdong magnifying glass
Ideas ： The mouse passes through the box of small pictures , Show the occlusion layer and large box , When the mouse leaves, two boxes are hidden
The occlusion layer follows the mouse , Big picture follows occlusion
Occlusion layer follows the mouse ： Get the coordinates of the mouse in the box , Then give the value to the occlusion layer as left and top Value
The shielding layer cannot exceed the scope of the small box , If it is less than 0, The nine eight coordinates are set to 0
The function of big picture following occlusion layer ： The formula of the moving distance of the large picture is that the ratio of the moving distance of the occlusion layer to the maximum moving distance of the occlusion layer is equal to the ratio of the moving distance of the large picture to the maximum moving distance of the large picture
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1500px;
height: 1500px;
background-color: pink;
}
.small {
position: relative;
top: 0px;
left: 0px;
width: 900px;
height: 900px;
border: 1px solid grey;
overflow: hidden;
}
.pic {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: yellow;
opacity: .5;
border: 1px solid #ccc;
cursor: move;
}
.sMig {
width: 900px;
height: 900px;
}
.big {
display: none;
position: absolute;
top: 0;
left: 910px;
width: 1000px;
height: 1000px;
background-color: blueviolet;
border: 1px solid #ccc;
overflow: hidden;
}
.bMig {
position: absolute;
top: 0;
height: 0;
width: 2000px;
height: 2000px;
}
</style><div class="box">
<div class="small">
<img class="sMig"
src="https://img2.baidu.com/it/u=4273417027,1062450597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
<div class="pic"></div>
</div>
<!-- <div class="pic"></div> -->
<div class="big">
<img class="bMig"
src="https://img2.baidu.com/it/u=4273417027,1062450597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
</div>
</div> <script>
// After loading, execute js
window.addEventListener('load', function () {
// Get the outermost box
var small = document.querySelector('.small');
// Get occlusion
var pic = document.querySelector('.pic');
// Get the big box
var big = document.querySelector('.big');
var bMig = document.querySelector('.bMig')
//1. When the mouse passes box when , Show and hide pic and big
small.addEventListener('mousemove', function () {
pic.style.display = 'block';
big.style.display = 'block';
})
small.addEventListener('mouseout', function () {
pic.style.display = 'none';
big.style.display = 'none';
})
//2. Occlusion layer follows the mouse
small.addEventListener('mousemove', function (e) {
// Calculate the coordinates of the mouse in the box
// console.log(e.pageX);
// console.log(e.pageY);
// Get mouse coordinates
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// console.log(x, y);
// Mouse coordinates to the box , And place the mouse in the center of the mask layer
// pic.style.left = x - pic.offsetWidth / 2 + 'px';
// pic.style.top = y - pic.offsetHeight / 2 + 'px';
var picX = x - pic.offsetWidth / 2;
var picY = y - pic.offsetHeight / 2;
// If x Coordinates less than 0 Just stop at 0 The location of , Greater than 0, Stop at the position where the width of the small box minus the width of the mask layer , Because the position calculation is always related to the left
if (picX < 0) {
picX = 0;
} else if (picX >= small.offsetWidth - pic.offsetWidth) {
picX = small.offsetWidth - pic.offsetWidth;
}
pic.style.left = picX + 'px';
if (picY < 0) {
picY = 0;
} else if (picY > small.offsetHeight - pic.offsetHeight) {
picY = small.offsetHeight - pic.offsetHeight;
}
pic.style.top = picY + 'px';
// Large picture moving distance = The moving distance of the occlusion layer * Maximum moving distance of large picture / Maximum movement distance of occlusion layer
// The moving distance of the occlusion layer picX and picY, Maximum movement distance of occlusion layer small.offsetWidth - pic.offsetWidth
var picMaxX = small.offsetWidth - pic.offsetWidth;
var picMaxY = small.offsetHeight - pic.offsetHeight;
// Big picture
var bigMaxX = big.offsetWidth - bMig.offsetWidth;
var bigMaxY = big.offsetHeight - bMig.offsetHeight;
// Large picture moving distance
var bigX = picX * bigMaxX / picMaxX;
var bigY = picY * bigMaxY / picMaxY;
bMig.style.left = bigX + 'px';
bMig.style.top = bigY + 'px';
})
})
</script>边栏推荐
- [CS231N]Lecture_ 2:Image Classification pipelin
- Tensorflow serving high performance machine learning model service system
- 职场pua但有道理
- gprs网络指的是什么
- fatal error: io. h: No such file or directory
- 【转载】token令牌在登录场景使用
- Lvs+keepalived high availability deployment practical application
- Att & CK Threat Intelligence
- Solve various problems of sudo rosdep init and rosdep update
- Common commands of NPM
猜你喜欢
SQL injection less42 (post stack injection)
What are the main functions and uses of LCR tester
Netease Yunxin 2022q2 product supply station, come and get your product supply plan!
SQL injection less38 (Stack Injection)
微信小程序剪切图片的功能
【CVPR 2021】Cylinder3D：用于LiDAR点云分割的圆柱体非对称3D卷积网络
2021 mathematical modeling group B exercise
Ngrok intranet penetration
Idea generate class diagram plug-in UML (super detailed)
使用PCL批量显示PCD点云数据流
随机推荐
JS array merging, de duplication, dimensionality reduction (es6: extended operator, set)
网易云信 2022Q2 产品补给站，快来获取你的产品补给计划吧！
Excel-VBA 快速上手（十三、日期的常见用法）
Ecmasript 5/6 notes
Target segmentation learning
[virtual machine _2]-hyper-v and vmware/virtualbox cannot coexist
Ruiji takeout project - development of business development function Day2
imx6q gpio复用
Use webworker to perform background tasks
ngx+sql环境离线安装日志(rpm安装)
Common commands of NPM
Sword finger offer II 066. sum of words (medium prefix tree design string)
32. Longest valid bracket (difficult stack string)
JMeter installs third-party plug-ins plugins Manager
Paddlenlp text classification based on ernir3.0: take wos dataset as an example (hierarchical classification)
mysql8.0无法给用户授权或提示You are not allowed to create a user with GRANT的问题
Solve Jupiter: the term 'Jupiter' is not recognized as the name of a cmdlet, function, script file
使用webWorker执行后台任务
近期bug总结
JVM——自定义类加载器