前端入门小练习，JavaScript基础案例
今天分享三个适合前端新手入门，小白练习的几个案例
- 模仿电影院选座事件
- 京东放大镜效果
- 模态框拖拽事件
模仿电影院选座事件
<script>
alert('欢迎来到My Lucky Cinema');
var lis = document.querySelectorAll('li');
for(var i = 0;i<lis.length;i++) {
lis[i].addEventListener('click',function() {
// this.style.backgroundColor = 'red';
// 设置类名
var res = this.getAttribute('class');
if(!res) {
this.setAttribute('class','active');
this.innerHTML = "座位已选";
} else {
// 清空类名
this.setAttribute('class','');
this.innerHTML = "";
}
})
}
</script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.box {
width: 600px;
border: solid rgb(211, 180, 180) 2px;
margin: 50px auto;
}
ul li {
width: calc(600px/6 - 15px);
height: 50px;
float: left;
background-color: rgb(177, 163, 163);
margin: 10px calc(90px/12);
display: flex;
justify-content: center;
align-items: center;
}
.active {
background-color: pink;
}
.central_screen {
height: 60px;
line-height: 60px;
text-align: center;
width: 330px;
border: rgb(185, 175, 175) solid 2px;
margin:40px auto 10px;
font-size: 30px;
font-weight: 800;
color: thistle;
}
</style>
<div class="box">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="central_screen">中央屏幕</div>
</div>
京东放大镜案例效果实现
基本的思路都在注释里了，这是一个比较经典的案例，在很多电商平台上都显眼可见。
<script>
window.addEventListener('load', function () {
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var left = document.querySelector('.left');
//1.当我们鼠标经过left 就显示和隐藏 mask遮挡层和 big大盒子
left.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
})
left.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
})
//2.鼠标移动的时候 让黄色遮挡层跟着鼠标来走
left.addEventListener('mouseover', function (e) {
//（1）.先计算鼠标在left盒子内的坐标 = 鼠标在浏览器中的坐标 - left盒子在浏览器中的坐标
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// （2）.把鼠标在left盒子内的坐标赋值给黄色遮挡层 这样黄色遮挡层就会和鼠标一起移动
// mask.offsetWidth/2 mask盒子宽度的一半 这样可以让鼠标处于黄色遮挡层mask的中间
//（3）.我们mask 在left盒子中移动的距离 maskX
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// （4）.如果maskX坐标小于0，就让它的坐标固定为0 不让黄色遮挡层出了left盒子的左边界。
// 当黄色遮挡层的右边界贴上left盒子的右边界的时候，黄色遮挡层左边界距离left左边界为150px = lef盒子宽度 - 黄色遮挡层宽度 也就是遮挡层的最大移动距离 maskMax = left.offsetWidth-mask.offsetWidth; 盒子的高宽一样所以都可以使用maskMax
var maskMax = left.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//3.大图片移动距离 bigX = 遮挡层移动距离 maskX * 大图片最大移动距离 bigMAX / 遮挡层的最大移动距离 maskMax
var bigImg = document.querySelector('.big_img');
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';
})
})
</script>
图片的话，自己替换一下，能实现效果就行
<div class="top"></div>
<div class="body">
<div class="left">
<img src="./images/1.jpg">
<div class="mask"></div>
<div class="big"><img src="./images/4.jpg" class="big_img"></div>
</div>
</div>
<style>
.top {
height: 100px;
width: 100%;
background: #C87B7C;
}
.body {
margin: 12px 30px;
}
.left {
position: relative;
width: 450px;
height: 450px;
border: 1px solid red;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #E3B976;
opacity: .5;
cursor: move;
}
.big {
display: none;
width: 500px;
height: 500px;
position: absolute;
left: 460px;
top: 0;
background: pink;
border: 1px solid #ccc;
overflow: hidden;
}
.big_img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 600px;
}
</style
模态框拖拽效果
<style type="text/css">
body {
margin: 0;
padding: 0;
position: relative;
}
.login-header {
margin: 40px auto;
border: solid rgb(80, 155, 158) 2px;
width: 200px;
text-align: center;
height: 40px;
line-height: 40px;
border-radius: 20px;
background-color: pink;
}
.content {
height: 250px;
width: 470px;
border: #1d8ecf solid 1px;
border-radius: 20px;
z-index: 3;
background-color: #fff;
display: none;
position: absolute;
left: 40%;
}
.login {
display: none;
position: fixed;
border: #EBEBEB solid 1px;
left: 50%;
top: 50%;
background: #e02a2a;
box-shadow: 0 0 20px #DDD;
z-index: 999;
transform: translate(-50%, -50%);
}
.login-tittle {
width: 100%;
margin: 10px 0 0 0;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-buton {
width: 50%;
line-height: 2.5rem;
font-size: 18px;
font-weight: bolder;
border: #cf4ca3 solid 2px;
text-align: center;
margin: 10px auto;
border-radius: 14px;
background-color: pink;
transition: all 1s;
}
.login-buton:hover {
background-color: rgb(167, 219, 243);
box-shadow: 2px 2px 9px 4px rgb(146, 183, 238),
-2px -2px 9px 4px rgb(238, 146, 146);
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #eb65d4;
}
.login-button a {
display: none;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #EBEBEB solid 1px;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0 0 20px 0;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-tittle span {
position: absolute;
font-size: 0.75rem;
right: -13px;
top: -18px;
background: #FFFFFF;
border: #ebebeb solid 0.0625rem;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
<div class="login-header">
<a id="link" href="javascript:;">点击，弹出登录框</a>
</div>
<div class="content">
<div id="tittle" class="login-tittle">登陆会员
<span>
<a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a>
</span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" name="info[username]" id="username" class="list-input" placeholder="请输入你的名字" />
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入密码" class="list-input" name="info[password]" id="password" />
</div>
</div>
<div id="loginBtn" class="login-buton">
<a href="javascript:void(0);" id="login-button-sumbit">登录</a>
</div>
</div>
<div id="bg" class="login-bg"></div>
<script type="text/javascript">
var login = document.querySelector('.login-header');
var content = document.querySelector('.content');
var mask = document.querySelector('.login-bg');
var closer = document.querySelector('.close-login');
var tittle = document.querySelector('.login-tittle');
login.addEventListener('click', function () {
content.style.display = 'block';
mask.style.display = 'block';
})
closer.addEventListener('click', function () {
content.style.display = 'none';
mask.style.display = 'none';
})
tittle.addEventListener('mousedown', function (e) {
var x = e.pageX - content.offsetLeft;
var y = e.pageY - content.offsetTop;
document.addEventListener('mousemove', move);
function move(e) {
content.style.left = e.pageX - x + 'px';
content.style.top = e.pageY - y + 'px';
if (content.offsetLeft <= 0) {
content.style.left = 0;
} else if(content.offsetLeft >= 1040) {
content.style.left = 1040 + 'px';
}else if(content.offsetTop <= 0) {
content.style.top = 0;
}
}
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move);
})
})
</script>
1502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
