JavaScript網頁特效
目錄
- JavaScript網頁特效
- 一、元素偏移量offest系列
- 二、元素可視區client系列
- 三、元素滾動scroll系列
- 四、案例：放大鏡效果
一、元素偏移量offest系列
1、offest：offset的含義是偏移量，使用offset的相關屬性可以動態地獲取該元素的位置、大小等
2、獲取滑鼠位置:滑鼠指標在盒子內的坐標位置示意圖如下：
案例演示：獲取滑鼠指標在盒子內的坐標
<style>
#box {
background-color: aquamarine;
width: 200px;
height: 200px;
position: absolute;
left: 50px;
top: 20px;
}
</style>
<body>
<div id="box"></div>
<script>
console.log('寬度'+box.offsetWidth)
console.log('高度'+box.offsetHeight)
//給box系結滑鼠移動事件
box.onmousemove = function(e){ //引數e表示事件物件，在這里表示MouseEvent
//獲取box的偏移量
var left = box.offsetLeft
var top = box.offsetTop
// console.log('頂部偏移量'+top)
// console.log('左邊偏移量'+left)
//獲取滑鼠指標在盒子內部的坐標
var x = e.pageX - left
var y = e.pageY - top
console.log(x,y)
}
</script>
</body>
3、offest與style的區別
案例：模態框拖曳效果
<style>
/* 第1部分，遮罩層樣式 */
.login-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ccc;
display: none;
}
/* 第2部分，模態框樣式 */
.modal{
/* 模態框頁面居中顯示 */
width: 500px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
box-shadow: 0px 0px 20px #ddd;
z-index: 999;
cursor: move;
}
.modal form{
/* 表單結構 */
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.modal form .item1{
/* 表單標題 */
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.modal form .item2{
/* 表單輸入框 */
margin: 0 auto;
width: 70%;
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.username{
margin-left: 16px;
}
.vip{
border: 1px solid #ccc;
border-radius: 20px;
padding: 3px 40px;
background-color: orange;
color: #fff;
}
.close{
/* 關閉按鈕 */
position: absolute;
right: -10px;
top: -10px;
border: 1px solid #ccc;
width: 20px;
height: 20px;
text-align: center;
line-height: 17px;
border-radius: 50%;
background-color: white;
}
/* 第3部分，單擊彈出遮罩層部分樣式 */
.login-header{
width: 100%;
text-align: center;
font-size: 20pt;
position: absolute;
}
</style>
<body>
<div class="login-bg"></div> <!-- 遮罩層 -->
<!-- 模態框 -->
<div class="modal">
<form>
<div class="item1">登錄會員</div>
<div class="item2">
<div class="username">
<label for="username">用戶名</label>
<input type="text" name="username">
</div>
<div class="username">
<label for="password">登錄密碼</label>
<input type="text" name="password">
</div>
</div>
<div class="item1">
<div class="vip">登錄會員</div>
</div>
</form>
<!-- 模態框關閉按鈕 -->
<div class="close">x</div>
</div>
<!-- 單擊彈出遮罩層 -->
<div class="login-header">單擊，請登錄會員...</div>
<script>
// 獲取元素物件
var modal = document.querySelector('.modal');
var close = document.querySelector('.close');
var login = document.querySelector('.login-header');
var bg = document.querySelector('.login-bg');
// 單擊彈出遮罩層和模態框
login.addEventListener('click', function () {
modal.style.display = 'block';
bg.style.display = 'block';
modal.style.backgroundColor = 'white';
});
// 單擊關閉模態框
close.addEventListener('click', function () {
modal.style.display = 'none';
bg.style.display = 'none';
});
// 拖動模態框
modal.addEventListener('mousedown', function (e) {
// 當滑鼠按下，獲取滑鼠在模態框中的坐標；
var x = e.pageX - modal.offsetLeft;
var y = e.pageY - modal.offsetTop;
// 定義事件回呼函式
var move = function (e) {
modal.style.left = e.pageX - x + 'px';
modal.style.top = e.pageY - y + 'px';
};
// 滑鼠按下，觸發滑鼠移動事件
document.addEventListener('mousemove', move);
// 滑鼠抬起，移除滑鼠移動事件
document.addEventListener('mouseup', function (e) {
document.removeEventListener('mousemove', move);
});
});
</script>
</body>
二、元素可視區client系列
1、client：客戶端，通過使用client系列的相關屬性可以獲取元素可視區的相關資訊
2、獲取client元素
<div>我是內容．．．</div>
<style>．．．（省略了樣式代碼）</style>
<script>
var div = document.querySelector('div');
console.log(div.clientHeight);console.log(div.clientTop);
console.log(div.clientLeft);
</script>
三、元素滾動scroll系列
1、scroll含義：scroll的含義是滾動，使用scroll系列的相關屬性可以動態地獲取該元素的滾動距離、大小等
案例：固定側邊欄效果
<style>
div{
width: 200px;
height: 200px;
border: 5px solid red;
background-color: yellow;
overflow: auto;
padding: 10px;
color: violet;
}
</style>
<body>
<div>
北京大學北京大學北京大學北京大學
北京大學北京大學北京大學北京大學
北京大學北京大學北京大學北京大學
北京大學北京大學北京大學北京大學
北京大學北京大學北京大學北京大學
北京大學北京大學北京大學北京大學
北京大學北京大學北京大學北京大學
北京大學北京大學北京大學北京大學
北京大學北京大學北京大學北京大學
北京大學北京大學北京大學北京大學
</div>
<script>
var div = document.querySelector('div');
console.log('滾動條的高度：'+div.scrollHeight);
console.log('滾動條的寬度：'+div.scrollWidth);
console.log('被卷的左側距離：'+div.scrollLeft);
console.log('被卷的上方距離：'+div.scrollTop);
div.onscroll = function(){
console.log('被卷的左側距離'+div.scrollLeft)
console.log('被卷的上方距離'+div.scrollTop)
}
</script>
</body>
四、案例：放大鏡效果
<style>
/* 圖片預覽區域 */
.preview_img {
position: absolute;
border: 1px solid #ccc
}
/* 放大鏡 */
.mask {
display: none;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
opacity: 0.5; /*設定透明度*/
position: absolute;
}
/* 大圖片外部盒子 */
.big {
display: none;
width: 500px;
height: 600px;
position: absolute;
left: 600px;
top: 0;
border: 2px solid #ccc;
overflow: hidden;
}
/* 大圖片 */
.bigIMg {
position: absolute;
}
</style>
<body>
<!-- 圖片預覽區域 -->
<div class="preview_img">
<!-- 圖片 -->
<img src="../img/phone.png">
<!-- 放大鏡 -->
<div class="mask"></div>
<!-- 展示放大后圖片效果 -->
<div class="big">
<img src="../img/bigphone.png" class="bigIMg">
</div>
</div>
<script>
// 獲取元素物件
var mask = document.querySelector('.mask'); //放大鏡的div
var preview = document.querySelector('.preview_img'); //原始圖片所在的div
var big = document.querySelector('.big');//原始圖片
var bigIMg = document.querySelector('.bigIMg'); //大圖片
// 當滑鼠移動的時候
preview.onmousemove = function (event) {
mask.style.display = 'block'; //讓放大鏡顯示出來
// 獲得遮擋層(放大鏡)移動的距離
var maskX = event.clientX - preview.offsetLeft - mask.offsetWidth / 2;
var maskY = event.clientY - preview.offsetTop - mask.offsetHeight / 2;
// 遮擋層(放大鏡)最大的移動距離
var maskMaxX = preview.offsetWidth - mask.offsetWidth;
var maskMaxY = preview.offsetHeight - mask.offsetHeight;
// 限制遮擋層的移動范圍
if (maskX < 0) {
maskX = 0;
} else if (maskX > maskMaxX) {
maskX = maskMaxX;
}
if (maskY < 0) {
maskY = 0;
} else if (maskY >= maskMaxY) {
maskY = maskMaxY;
}
// 讓放大鏡跟隨滑鼠進行移動
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
big.style.display = 'block';
// 大圖片最大移動距離
var bigIMgMax = bigIMg.offsetWidth - big.offsetWidth;
// 大圖片的移動距離 = 遮擋層移動距離 * 大圖片的最大移動距離 / 遮擋層最大移動距離
var bigIMgX = maskX * bigIMgMax / maskMaxX;
var bigIMgY = maskY * bigIMgMax / maskMaxY;
// 大圖片移動的距離
bigIMg.style.left = -bigIMgX + 'px';
bigIMg.style.top = -bigIMgY + 'px';
};
// 滑鼠移出圖片關閉放大鏡效果
preview.onmouseout = function () {
big.style.display = 'none';
mask.style.display = 'none';
};
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289312.html
標籤：其他