js学习笔记10（PC端网页特效及相关案例）

最新推荐文章于 2024-09-14 18:52:56 发布

bbh181

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量654

点赞数 18

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/qq_63130842/article/details/137977472

版权

<!-- <div class="father">

</div>

var father = document.querySelector('.father');

var son = document.querySelector('.son');

console.log(father.offsetTop); //100

console.log(son.offsetTop); //0

console.log(son.offsetLeft); //50

console.log(father.offsetWidth); //包括padding、边框

console.log(son.offsetParent); //返回father(要带定位，没有定位就返回body)

console.log(son.parentNode); //返回亲爸爸，无论有没有定位

</script> -->

<!-- offset可以得到任意样式表的样式值，style只能得到行内样式表的值；

offset系列获取到数值是没有单位的，style获取到是带有单位的字符串；

offsetWidth包含padding、边框和宽度，style不包含

offsetWidth等属性是只读属性，只能获取不能赋值，style是可读写属性，可以获取也可以赋值

所以，我们想要获取元素大小位置用offset更合适，想要给元素更改值，则需要使用style -->

<!-- <div class="box" style="width: 200px;height:200px;background-color:aqua;"></div>

var box=document.querySelector('.box');

box.addEventListener('mousemove',function(e){

var x = e.pageX - this.offsetLeft;

var y = e.pageY - this.offsetTop;

box.innerHTML = 'x坐标为'+x+'y坐标为'+y;

})

</script> -->

<!-- element.clentTop返回元素上边框大小

element.clientLeft返回元素左边框大小

element.clientWidth 返回自身包括padding、内容区的宽度，！不含边框！返回数值不带单位

element.clientHeight 返回自身包括padding、内容区的高度，不含边框！返回数值不带单位-->

<!-- <script>

//写法

//(function(){}()) 或者 (function(){})()

(function(){

console.log(1); //1

})();//当有多个立即执行函数时，要用分号隔开，否则会报错

//立即执行函数也可以传递参数

(function sum(a,b){ //也可以给函数取名

console.log(a+b); //3

}(1,2))//第二个小括号可以看成调用函数的意思，参数写在里面

//主要作用：创建一个独立作用域，避免了命名冲突问题，因为每个立即执行函数里的变量都是局部变量

</script> -->

<!-- resize 重新设置字体大小

pageshow 是我们重新加载页面触发的事件 -->

<!-- <script>

window.addEventListener('pageshow',function(){ //pageshow和load差不多，只是load在火狐中有一个历史页面缓存，当回退页面时不会重新缓存，而pageshow可以每次都重新缓存

alert(1);

})

</script>

-->

<!-- <div style="width: 200px;height:150px;background-color:aqua;overflow: auto;">

我是内容<br>

</div>

var div = document.querySelector('div');

div.addEventListener('scroll',function(){

console.log(div.scrollTop); //返回内容超出的部分

})

</script> -->

<!-- 当鼠标移动到元素上时就会触发mouseenter事件，它类似于mouseover ; 但它们有区别：mouseover鼠标经过自身盒子会触发，经过子盒子也会触发，而mouseenter只会经过自身盒子触发

之所以会这样：是因为mouseenter不会冒泡 -->

</div>

var father = document.querySelector('.father');

var son = document.querySelector('.son');

father.addEventListener('mouseenter',function(){

console.log(1); //只有经过父盒子时才打印出1，经过子盒子时没有打印

})

father.addEventListener('mouseover',function(){

console.log(2); //经过父盒子和子盒子时都打印了2

})

</script>

案例:

<style>

padding:0 ;

margin: 0;

}

.login-header{

width: 100%;

text-align: center;

height: 30px;

font-size: 24px;

line-height: 30px;

}

.login{

display: none;

width: 500px;

height: 300px;

position: fixed;

border: 1px solid #ebebeb;

left: 50%;

top: 50%;

background: #ffffff;

box-shadow: 0px 0px 20px #ddd;

z-index: 9999; /*层叠属性，可以覆盖比它低的元素 */

transform: translate(-50%,-50%);/*将元素移动到中间位置 */

}

.login-title{

width: 100%;

margin: 10px 0px 0px 0px;

text-align: center;

line-height: 40px;

font-size: 18px;

position: relative;

cursor: move;

}

.login-input-content{

margin-top: 20px;

}

.login-button{

width: 50%;

margin: 30px auto 0px auto;

line-height: 40px;

border: 1px solid #ebebeb;

font-size: 14px;

}

.login-bg{

display: none;

width: 100%;

height: 100%;

position: fixed;

top: 0px;

left: 0px;

background: rgba(0, 0, 0, 0.3);

}

text-decoration: none;

color: #000000;

}

.login-button a{

display: block;

text-align: center;

}

.login-input .list-input{

float: left;

line-height: 35px;

height: 35px;

width: 350px;

border: 1px solid #ebebeb;

text-indent: 5px;/* 缩进 */

}

.login-input{

overflow: hidden;/* 溢出隐藏*/

margin: 0px 0px 20px 0px;

}

.login-input label{

float: left;

width: 90px;

padding-right: 10px;

text-align: right;

line-height: 35px;

height: 35px;

font-size: 14px;

}

.login-title span{

position: absolute;

font-size: 12px;

right: -20px;

top: -30px;

background: #ffffff;

border: 1px solid #ebebeb;

width: 40px;

height: 40px;

border-radius: 20px;

}

</style>

</head>

<body>

<div class="login-header"><a href="javascript:;" id="link">点击，弹出登录框</a></div>

登录会员

<span>

</span>

</div>

</div>

</div>

</div>

var login = document.querySelector('.login');

var bg = document.querySelector('.login-bg');

var link = document.querySelector('#link');

var closeBtn = document.querySelector('#closeBtn');

var title = document.querySelector('#title');

//点击弹出层，显示模态框和遮盖层

link.addEventListener('click',function(){

bg.style.display = 'block';

})

//点击关闭按钮，隐藏模态框和遮盖层

closeBtn.addEventListener('click',function(){

bg.style.display = 'none';

})

//鼠标一按下，获得鼠标坐标(移动事件写到按下事件里)

title.addEventListener('mousedown',function(e){

var x = e.pageX - login.offsetLeft;

var y = e.pageY - login.offsetTop;

document.addEventListener('mousemove',move)

function move(e){

login.style.top = e.pageY - y +'px'; //注意：！！这里为什么不直接用offsetLeft或者offsetTop来得到盒子的距离？因为offset系列的属性只能获得值不能赋值，而在这里我们需要不断给盒子赋予新的模态框的距离值，所以不能直接使用offset，只能使用style

}

//鼠标弹起，解除鼠标移动事件

document.addEventListener('mouseup',function(){

document.removeEventListener('mousemove',move);

})

</script>

</body>

<style>

.preview_img{

height: 400px;

width: 400px;

position: relative;

border: 1px solid #ccc;

}

.mask{

width: 300px;

height: 300px;

background: #FEDE4F;

opacity: .5; /* 表示半透明*/

position: absolute;

top: 0px;

left: 0px;

border: 1px solid #ccc;

cursor: move;

display: none;

}

.big{

width: 500px;

height: 500px;

position: absolute;

top:0px;

left: 410px;

background-color: antiquewhite;

border: 1px solid #ccc;

overflow: hidden;

display: none;

}

.big img{

position:absolute;

top: 0;

left: 0;

}

</style>

</head>

<body>

</div>

</body>

js文件：

window.addEventListener('load',function(){ //先写加载完毕后再执行js代码

var preview_img = document.querySelector('.preview_img');

var mask = document.querySelector('.mask');

var big = document.querySelector('.big');

//鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开则隐藏

preview_img.addEventListener('mouseover',function(){

mask.style.display = 'block';

big.style.display = 'block';

})

preview_img.addEventListener('mouseout',function(){

mask.style.display = 'none';

big.style.display = 'none';

})

//黄色的遮挡层跟随鼠标功能

preview_img.addEventListener('mousemove',function(e){

var x = e.pageX - this.offsetLeft;

var y = e.pageY - this.offsetTop;

var maskX = x - mask.offsetWidth/2;//减去盒子宽度的一半是为了让鼠标对齐盒子最中央

var maskY = y - mask.offsetHeight/2;

if(maskX <=0){

maskX = 0;

}else if(maskX >= preview_img.offsetWidth - mask.offsetWidth){

maskX = preview_img.offsetWidth - mask.offsetWidth; //判断mask是否全在小盒子里面，如果超出则定死位置，不让他往外移动（left值小于0则定在0的位置，如果大于外盒子和mask之间的距离，则等于这个距离）（外盒子和;mask的距离是小图片盒子的宽度减去mask遮挡层的宽度）

}

if(maskY <=0){

maskY = 0;

}else if(maskY >= preview_img.offsetHeight - mask.offsetHeight){

maskY = preview_img.offsetHeight - mask.offsetHeight; //高度同理

}

mask.style.left =maskX +'px';

mask.style.top = maskY +'px';//别忘了单位px

//移动黄色遮挡层，大图片跟随鼠标移动功能

//因为大图片盒子宽高与小盒子遮挡层不同，所以移动距离也不同，可以利用比例来做，根据小图片遮挡层移动距离和小图片遮挡层最大移动距离的比值等于大图片移动距离和大图片最大移动距离的比值相同来做

//可以得出公式，小图片遮挡层移动距离*大图片最大移动距离/小图片遮挡层最大移动距离 = 大图片移动距离

var bigImg = document.querySelector('.bigImg');

var maskMax = preview_img.offsetWidth - mask.offsetWidth;

var bigMax = bigImg.offsetWidth - big.offsetWidth;

var bigX = maskX * bigMax / maskMax;

var bigY = maskY * bigMax / maskMax;

bigImg.style.left = -bigX + 'px'; // 注意！大图片是跟小图片相反移动的

bigImg.style.top = -bigY + 'px';

})

<style>

.header{

width: 1000px;

height: 200px;

background-color: aqua;

margin: 10px auto;

}

.banner{

width: 1000px;

height: 500px;

margin: 10px auto;

background-color: aquamarine;