1. DOM事件
修改元素属性
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="dog.jpg" alt="">
<script>
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
zxy.onclick = function(){
img.src = "t.jpg";
}
ldh.onclick = function(){
img.src = "dog.jpg";
}
</script>
</body>demo：登录窗口
点击后面的眼睛就能显示密码
<style>
.box{
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input{
width: 370px;
height: 30px;
border:0;
outline: none;
}
.box img{
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
}
</style>
<body>
<div class="box">
<label for="">
<img src="open.png" alt="" id="eye">
</label>
<input type="password" name="" id="" id="psw">
</div>
<script>
var eye = document.getElementById('eye');
var psw = document.getElementById('psw');
var flag = 0;
eye.onclick = function(){
if(flag==0){
psw.type = 'text';
eye.src = 'open.png';
flag = 1;
}else{
psw.type = 'password';
eye.src = 'close.png';
flag = 0;
}
}
</script>
</body>
//按理说就是这样，但不知道为什么显示不出来demo：点击×就会不见
<style>
.box{
position: relative;
width: 130px;
height: 130px;
border: 1px solid #ccc;
margin: 100px auto;
/*margin-top: 50px;*/
text-align: center;
color: #f40;
/*background-color: pink;*/
}
.box img{
width: 100px;
height: 100px;
margin-top: 5px;
}
.close-btn{
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border:1px solid #ccc;
line-height: 14px;
font-family: Arial,Helvetica,sans-serif;
cursor: pointer;
}
</style>
<body>
<div class="box">
淘宝二维码
<img src="erweima.png" alt="">
<i class="close-btn">×</i>
</div>
<script>
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
btn.onclick = function(){
box.style.display = 'none';
}
</script>
</body>demo：精灵图
<style>
li{
list-style: none;
}
.box{
/*position: relative;*/
width: 250px;
margin: 100px auto;
}
.box li{
float: left;
width: 24px;
height: 24px;
/*border: 1px solid #ccc;*/
background-color: pink;
margin: 10px;
background: url(elf.png);
}
</style>
<body>
<div class="box">
<ul>
<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>
<script>
var lis = document.querySelectorAll('li');
for(var i=0; i<lis.length;i++){
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
// box.style.display = 'none';
</script>
</body>demo：显示隐藏文本框内容
就这种，不点进文本框时显示默认文字，点进去后默认文字消
<style>
input{
color: #999;
}
</style>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function(){
// console.log('嗷，我获得了焦点');
if(this.value === '手机'){
this.value = '';
}
}
text.onblur = function(){
// console.log('啊，别走啊');
if(this.value === ''){
this.value = '手机';
}
}
</script>
</body>demo:密码框验证信息
<style>
div{
width: 600px;
margin:100px auto;
/*height: 100px;
background-color: pink;
*/
}
.message{
display: inline-block;
/*background-color: pink;*/
color: #999;
font-size: 12px;
background: url();
}
.wrong{
color: red;
/*background-image: url();*/
}
.right{
color: green;
}
</style>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
ipt.onblur = function(){
if(this.value.length < 6 || this.value.length > 16){
message.className = 'message wrong';
message.innerHTML = '你输入的位数不对，要求6-16位'
}else{
message.className = 'message right';
message.innerHTML = '你输入正确';
}
}
</script>
</body>demo：网页开关灯练习
<style>
</style>
<body>
<button>关灯</button>
<script>
var body = document.body;
var btn = document.querySelector('button');
var flag = 0;
btn.onclick = function() {
if (flag == 0) {
body.style.backgroundColor = 'black';
this.innerHTML = '开灯';
flag = 1;
} else {
body.style.backgroundColor = '#fff';
this.innerHTML = '关灯';
flag = 0;
}
}
</script>
</body>demo：亮一个，其他的就不亮了
<body>
<button>我绿了</button>
<button>我红了</button>
<button>我f了</button>
<button>我黄了</button>
<button>我黑了</button>
<script>
var btns = document.getElementsByTagName('button');
for(var i=0; i<btns.length; i++){
btns[i].onclick = function(){
//先把其他几个的背景颜色搞没了，上一个点击的不会熄灭
for(var j=0; j<btns.length; j++){
btns[j].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
</body>demo：百度换肤
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(img/star.jpg);
/*background-size: 100% ;*/
}
ul{
width: 200px;
/*background: red;*/
border: 1px solid pink;
overflow: hidden;
list-style: none;
margin:300px auto;
}
ul li{
float: left;
/*background: red;*/
width: 50%;
margin-top: 5px;
/*cursor:wait;*/
}
ul li img{
width: 100px;
height: 80px;
}
</style>
<body>
<ul class="baidu">
<li><img src="star.jpg"></li>
<li><img src="sunset.jpg" alt=""></li>
<li><img src="planet.jpg" alt=""></li>
</ul>
<script>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
console.log(imgs);
for(var i=0; i<imgs.length; i++){
imgs[i].onclick = function(){
// console.log(this.src);
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>demo：点击信息栏，整栏变色
<style>
table{
width: 800px;
height: 250px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
thead tr{
height: 30px;
background-color: skyblue;
}
tbody tr{
height: 30px;
}
tbody td{
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg{
background-color: pink;
}
</style>
<body>
<!-- cellpadding:框里文字的内容与框的距离；cellspacing:单元格间的距离 -->
<table>
<!-- 表头 -->
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
// 获取tbody里的所有行
var lines = document.querySelector('tbody').querySelectorAll('tr');
for(var i=0; i<lines.length; i++){
// 鼠标经过事件
lines[i].onmouseover = function(){
this.style.backgroundColor = 'pink';
}
// 鼠标离开事件
lines[i].onmouseout = function(){
this.style.backgroundColor = '';
}
}
</script>
</body>demo：全选框
<body>
<style>
table{
width: 400px;
height: 250px;
margin: 100px auto;
border: solid 1px #e2e4e3;
border-collapse: collapse;
text-align: center;
}
thead tr{
height: 30px;
background-color: skyblue;
}
tbody tr{
height: 30px;
}
tbody td{
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg{
background-color: pink;
}
</style>
<body>
<!-- cellpadding:框里文字的内容与框的距离；cellspacing:单元格间的距离 -->
<table>
<!-- 表头 -->
<thead>
<tr>
<th><input type="checkbox" id = "all"></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>iPhone8</td>
<td>4000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iPhone11</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iPhone12</td>
<td>7000</td>
</tr>
</tbody>
</table>
<script>
var all = document.getElementById('all');
var tbs = document.getElementById('tb').getElementsByTagName('input');
// 1.点击上面的全选按钮,下面就全选
all.onclick = function(){
for(var i=0; i<tbs.length;i++){
tbs[i].checked = all.checked;
}
}
// 2.下面的按钮全选后，上面的按钮的才会选
for(var i=0; i<tbs.length;i++){
tbs[i].onclick = function(){
var flag = true;
for(var j=0; j<tbs.length; j++){
if(!tbs[j].checked){
flag = false;
break;
}
}
all.checked = flag;
}
}
</script>
demo：新浪下拉菜单
<style>
/*body{
width: 1000px;
margin: 100px auto;
}*/
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
font-size: 14px;
}
.nav{
margin:100px;
}
.nav>li{
position: relative;
float: left;
width: 100px;
height: 41px;
text-align: center;
}
/*所有的li里面的a*/
.nav li a{
width: 100%;
height: 100%;
line-height: 41px;
/*不设置block就每个a就没有长宽*/
display: block;
color: #333;
}
.nav>li>a:hover{
background-color: #eee;
}
.nav ul{
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li{
border-bottom: 1px solid #FECC5B;
/*float: left;*/
}
.nav ul li a:hover{
background-color: #FFF5DA;
}
</style>
<body>
<ul class="nav">
<li>
<a href="">微博</a>
<ul>
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="">博客</a>
<ul>
<li><a href="">博客评论</a></li>
<li><a href="">未读提醒</a></li>
</ul>
</li>
<li>
<a href="">邮箱</a>
<ul>
<li><a href="">免费邮箱</a></li>
<li><a href="">VIP邮箱</a></li>
<li><a href="">企业邮箱</a></li>
</ul>
</li>
</ul>
<script>
// 1.点li就出现下拉菜单，获取li
var nav = document.querySelector('.nav');
var lis = nav.children;//得到4个小li
for(var i=0; i<lis.length; i++){
//鼠标经过
lis[i].onmouseover = function(){
//每个li里面有两个孩子a和ul,让第二个（ul）改变
this.children[1].style.display = 'block';
}
// 鼠标离开
lis[i].onmouseout = function(){
this.children[1].style.display = 'none';
}
}
</script>
</body>demo：简易留言板块
<body>
<textarea name="" id="">12345</textarea>
<button>发布</button>
<ul>
</ul>
<script>
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function(){
if(text.value == null){
alert('您没有输入内容');
return false;
}else{
var li = document.createElement('li');
li.innerHTML = text.value;
ul.insertBefore(li,ul.children[0]);
// ul.appendChild(li);
text.value = '';
}
}
</script>
</body>删除留言
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
font-size: 14px;
}
ul{
margin-top: 50px;
}
li{
width: 300px;
padding: 5px;
background-color: rgb(245,209,243);
color: red;
font-size: 14px;
margin:15px 0;
}
li a{
float: right;
}
</style>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function(){
if(text.value == ''){
alert('您没有输入内容');
return false;
}else{
//添加留言功能
var li = document.createElement('li');
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
ul.insertBefore(li,ul.children[0]);
text.value = '';
//删除留言功能
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function(){
//node.removeChild(child);删除的是li当前的a所在的li
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>demo：动态建立表格
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
table{
width: 500px;
/*height: 250px;*/
margin: 100px auto;
}
table,td,th {
border: 1px solid skyblue;
/*合并边框*/
border-collapse: collapse;
text-align: center;
}
</style>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var datas = [
{name:'小赵',
subject:'javascript',
score:100
},
{name:'小钱',
subject:'javascript',
score:96
},
{name:'小孙',
subject:'javascript',
score:85
},
{name:'小李',
subject:'javascript',
score:80
},
];
var tbody = document.querySelector('tbody');
for(var i=0; i<datas.length; i++){
//1. 往tbody 里创建行
var tr = document.createElement('tr');
tbody.appendChild(tr);
//2. 往tr里创建列
for(var j in datas[i]){
var td = document.createElement('td');
//把对象里面的属性值给td,datas[i]得出的数属性名，data[i][j]才是属性值
// console.log(datas[i][j]);
td.innerHTML = datas[i][j];
tr.appendChild(td);
}
//3. 创建有删除两个字的单元格
var dele = document.createElement('td');
dele.innerHTML = "<a href = 'javascript:;'>删除</a>";
tr.appendChild(dele);
}
//4. 点击删除后直接删除数据条目
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function(){
//node.removeChild(child);a的爸爸是单元格，爸爸的爸爸才是行
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
demo：跟随鼠标移动的小天使
<style>
img{
position: absolute;
}
</style>
<body>
<!-- 在页面中移动，所以给document注册事件 -->
<!-- 图片要移动距离而且不占位置，使用绝对定位 -->
<img src="angel.png" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e){
var x = e.pageX;
var y = e.pageY;
console.log('x的坐标是：'+x,'y的坐标是：'+y);
pic.style.left = x +'px';
pic.style.top = y +'px';//记得要加px
})
</script>
</body>
demo：仿京东：按下s键，光标定位到搜索栏里
<body>
<input type="text">
<script>
// 搜索框获得焦点：focus()
var search = document.querySelector('input');
document.addEventListener('keyup',function(e){
//利用keyCode返回的ASCII判断按下的是什么键
if(e.keyCode==83){
search.focus();
}
})
</script>
</body>
demo：京东快递搜索栏放大效果
快递单号输入内容时，上面的大号字体盒子显示，同时把输入栏里的值取过来赋值给大盒子
<style>
/*body{
width: 1000px;
margin: 100px auto;
}*/
*{
padding: 0;
margin: 0;
}
.search{
position: relative;
width: 178px;
margin:100px;
}
.con{
display: none;
position: absolute;
top: -40px;
width: 171px;
border:1px solid rgba(0,0,0,.2);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before{
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border:8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
</style>
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入你的快递单号" class="jd">
</div>
<script>
// 搜索框获得焦点：focus()
var jd_input = document.querySelector('.jd');
var con = document.querySelector('.con');
jd_input.addEventListener('keyup',function(e){
if(this.value == ''){
con.style.display = "none";
}else{
con.style.display = "block";
con.innerText = this.value;
}
})
//当失去焦点隐藏盒子，获得焦点显示盒子
jd_input.addEventListener('blur',function(e){
con.style.display = "none";
})
jd_input.addEventListener('focus',function(e){
if(this.value !=''){
con.style.display = "block";
}
})
</script>
</body>2.BOM
demo：5秒后关闭广告
<style>
*{
padding: 0;
margin: 0;
}
.search{
width: 178px;
height:100px;
background-color: pink;
}
</style>
<body>
<div class="search"></div>
<script>
var div = document.querySelector('div');
setTimeout(function(){
div.style.display = "none";
},5000);
</script>
</body>demo：秒杀倒计时
<style>
*{
padding: 0;
margin: 0;
}
span{
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: black;
color: #fff;
}
div .danwei{
width: 20px;
height: 40px;
text-align: center;
background-color: #fff;
color: #ccc;
}
</style>
<body>
<div>
<span class="hour">1</span>
<span class="danwei">时</span>
<span class="minute">2</span>
<span class="danwei">分</span>
<span class="second">3</span>
<span class="danwei">秒</span>
</div>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2021-2-3 18:00:00');//返回用户输入时间总的毫秒数
countDown();//先调用一次函数，防止第一次刷新时页面空白
// 开启定时器
var timer = setInterval(countDown,1000);
function countDown(){
var nowTime = +new Date();//返回当前时间总的毫秒数
var times = (inputTime-nowTime)/1000;
var h = parseInt(times/60/60%24);
h = h < 10 ? '0'+ h : h;
hour.innerHTML = h;
var m = parseInt(times/60%60);
m = m < 10 ? '0'+ m : m;
minute.innerHTML = m;
var s = parseInt(times%60);
s = s < 10 ? '0'+ s : s;
second.innerHTML = s;
}
</script>
</body>demo：发送短信
<body>
手机号：<input type="text">
<button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 60;
btn.addEventListener('click',function(){
this.disabled = 'true';
var timer = setInterval(function(){
if(time == 0){
clearInterval(timer);
btn.disabled = 'false';//这里btn不能改成this,因为定时器内this指向window
btn.innerHTML = '发送';
time = 60;
}else{
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
},1000);
})
</script>
</body>
demo：五秒后自动跳转页面
<body>
<button>发送</button>
<div></div>
<script>
var div = document.querySelector('div');
var btn = document.querySelector('button');
var time = 5;
btn.addEventListener('click',function(){
location.href = 'http://www.itcast.cn';
})
var timer = setInterval(function(){
if(time==0){
location.href = 'http://www.itcast.cn';
clearInterval(timer);
}else{
div.innerHTML = '页面还有'+ time + '秒跳转';
time--;
}
},1000);
</script>
</body>demo：跳转页面，一个页面中提交的信息用于另一个页面
<head>登录页面login.html</head>
<style>
*{
padding: 0;
margin: 0;
}
.box{
position: relative;
width: 358px;
height: 413px;
padding: 18px 23px 20px 23px;
border: 1px solid #ccc;
margin: 100px auto;
}
.userName,
.password{
width: 312px;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 30px;
}
.box input{
width: 370px;
height: 30px;
border:0;
outline: none;
}
</style>
<body>
<form action="index1.html">
<div class="box">
<div class="title">
<h3>会员登录</h3>
</div>
<div class="userName">
<input type="text" name="uName" placeholder="用户名/邮箱/手机号">
</div>
<div class="password">
<input type="password" name="psw" placeholder="密码">
</div>
<input type="submit" value="登录">
</div>
</form>
<script>
var params = location.search.substr(1);
console.log(params);//?uName=ab&psw=12345
var arr = params.split('&');
console.log(arr);
var userName = arr[0].split('=')[1];
console.log(userName);
</script>
</body>
<head>主页index1.html</head>
<body>
<div></div>
<script>
var params = location.search.substr(1);
console.log(params);//?uName=ab&psw=12345
var arr = params.split('&');
console.log(arr);
var userName = arr[0].split('=')[1];
console.log(userName);
var div = document.querySelector('div');
div.innerHTML = userName + '欢迎回来';
</script>
</body>demo：拖动登录模态框
<style>
body{
background-color: #ebebeb;
}
*{
padding: 0;
margin: 0;
}
a{
color: black;
text-decoration:none;
}
.head{
text-align: center;
font-size: 18px;
}
.login{
display: none;
width: 480px;
height: 250px;
position: relative;
border:#ebebeb solid 1px;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
}
.title{
width:100%;
height: 40px;
text-align: center;
margin: 10px 0px 0px 0px;
line-height: 40px;
cursor: move;
}
.ip{
width: 280px;
height: 30px;
overflow: hidden;
margin-bottom: 15px;
}
label{
float: left;
width: 90px;
height: 35px;
padding-right: 10px;
text-align: right;
line-height: 35px;
font-size: 14px;
}
.title span{
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background-color: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
line-height: 40px;
}
.loginBtn {
width: 200px;
height: 30px;
border: 1px solid #ebebeb;
line-height: 30px;
font-size: 16px;
text-align: center;
margin: 30px 150px;
color: #ccc;
}
</style>
<body>
<div class="head"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
<!-- 登录信息框 -->
<div class="login">
<div class="title">
<h3>登录会员</h3>
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="name">
<label><b>用户名：</b></label>
<input type="text" placeholder="请输入用户名" id="username" class="ip">
</div>
<div class="password">
<label><b>登录密码：</b></label>
<input type="password" placeholder="请输入登录密码" id="password" class="ip">
</div>
<div class="loginBtn"><a href="avascript:void(0);"><b>登录会员</b></a></div>
</div>
<script>
var login = document.querySelector('.login');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('.title');
//1.点击隐藏功能
link.addEventListener('click',function(){
login.style.display = 'block';
})
closeBtn.addEventListener('click',function(){
login.style.display = 'none';
})
// 2.拖拽效果：鼠标按下--鼠标移动---鼠标松开，拖框上面的title才能走
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.left = e.pageX - x +'px';
login.style.top = e.pageY - y + 'px';
}
//鼠标弹起就让鼠标移动事件移除
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
})
})
</script>
</body>demo：放大镜效果
只做了一部分，放大没做
<style>
*{
padding: 0;
margin: 0;
}
.pre-img{
width: 400px;
height: 400px;
border:1px solid #ccc;
}
.pre-img img{
width: 150px;
height: 300px;
margin: 50px 100px;
position: relative;
}
.mask{
display: none;
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 240px;
background-color: #FEDE4F;
/*半透明色*/
opacity: .5;
cursor: move;
}
.big{
display: none;
position: absolute;
width: 400px;
height: 600px;
left: 410px;
top: 0;
border: 1px solid #ccc;
overflow: hidden;
/*给一个高等级，让big覆盖在别的文字上面（这里没有）*/
z-index: 999;
}
.big img{
position: absolute;
left: 50px;
top: 0;
}
</style>
<body>
<div class="pre-img">
<img src="picture/b3.png" alt="">
<div class="mask"></div>
</div>
<div class="big"><img src="picture/s3.png" alt=""></div>
<script>
var pre_img = document.querySelector('.pre-img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 1.鼠标经过则显示遮挡层和 big
pre_img.addEventListener('mouseover',function(){
mask.style.display = 'block';
big.style.display = 'block';
})
//鼠标离开
pre_img.addEventListener('mouseout',function(){
mask.style.display = 'none';
big.style.display = 'none';
})
// 2.把鼠标在盒子里的坐标，而不是鼠标在页面坐标给黄色的盒子
pre_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;
}
if(maskX>pre_img.offsetWidth-mask.offsetWidth){
maskX = pre_img.offsetWidth-mask.offsetWidth;
}
if(maskY <= 0){
maskY = 0;
}
if(maskY>pre_img.offsetHeight-mask.offsetHeight){
maskY = pre_img.offsetHeight-mask.offsetHeight;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 大图片移动距离/大图片最大移动距离 = 遮挡层移动距离/遮挡层最大移动距离
// 求大图片移动距离
var maskMax =
})
</script>
</body>
demo：仿淘宝固定右侧侧边栏
1.原先侧边栏是绝对定位
2.当页面滚动到一定位置，侧边栏改为固定定位
3.页面继续滚动，显示“返回顶部”
<style>
*{
padding: 0;
margin: 0;
}
.w{
width: 1200px;
margin: 10px auto;
}
.slider-bar{
position: absolute;
width: 50px;
height: 100px;
top: 300px;
left: 50%;
margin-left:600px;
background-color: yellow;
}
span{
display: none;
position: absolute;
bottom: 0;
}
.header{
height: 500px;
background-color: pink;
}
.banner{
height: 500px;
background-color: green;
}
.main{
height: 1000px;
background-color: purple;
}
</style>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
var sliderBar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner距顶部的距离，也就是将要卷上去的距离
var banTop = banner.offsetTop;
var sliderbarTop = sliderBar.offsetTop;
// 当sliderBar固定定位后要变化的数值，要不然会闪
var d = banTop - sliderbarTop;
console.log("banTop:" + banTop +"sliderbarTop:"+sliderbarTop+"d:"+d);
// 获取main主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
document.addEventListener('scroll',function(){
// window.pageYOffset页面被卷去的头部
console.log(window.pageYOffset);
if(window.pageYOffset >= banTop){
// 当卷到一定距离后改为固定定位
sliderBar.style.position = 'fixed';
sliderBar.style.top = d + 'px';
}else{
sliderBar.style.position = 'absolute';
sliderBar.style.top = '300px';
}
//显示返回顶部
if(window.pageYOffset >= mainTop){
goBack.style.display = 'block';
}else{
goBack.style.display = 'none';
}
})
</script>
</body>
demo：点击滑动动画
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端开发的代码 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js</title>
<script src="animate.js"></script>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.sliderbar{
position: relative;
width: 50px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
.con{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 50px;
background-color: purple;
z-index: -1;
}
</style>
<body>
<div class="sliderbar">
<span>←</span>
<div class="con">问题反馈</div>
</div>
<script>
var sliderbar = document.querySelector('.sliderbar');
var con = document.querySelector('.con');
sliderbar.addEventListener('mouseenter',function(){
animate(con, -150, function(){
//回调函数中，把左箭头改为右箭头
sliderbar.children[0].innerHTML = '→';
});
})
sliderbar.addEventListener('mouseleave',function(){
animate(con, 0, function(){
sliderbar.children[0].innerHTML = '←';
});
})
</script>
</body>
demo ：仿淘宝网页轮播图
CSS部分
<!DOCTYPE html> <!-- 告诉浏览器使用的HTML5版本 -->
<html lang="en"> <!-- lang="当前文档的显示的语言" 中文"zh-CN"，英语"en" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端开发的代码 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css</title>
<!-- // 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
// 2.点击右侧按钮一次，图片往左播放一张
// 3.图片播放同时，下面小圆圈一起变化
// 4.点击小圆圈，播放相应图片
// 5.鼠标不经过轮播图，轮播图也自动播放图片 -->
<script src="animate.js"></script>
<script src="js/lunbotu.js"></script>
</head>
<style>
*{
margin:0;
padding: 0;
}
li{
list-style: none;
}
.promt{
position: relative;
width: 520px;
height: 280px;
margin: 100px auto;
overflow: hidden;
}
.prev,
.next{
display: none;
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
background: rgba(200,200,0,0.5);
color: #fff;
text-align: center;
line-height: 20px;
text-decoration: none;
top: 50%;
margin-top: -10px;
/*因为图片会把左右的箭头压住，要加层级*/
z-index: 9999;
}
.prev{
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next{
right: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promt ul{
/*是ul移动不是li移动*/
/*使用动画的元素必须要有定位*/
position: absolute;
top: 0;
left：0;
width: 400%;
}
.promt ul li{
float: left;
}
.circle{
position: absolute;
width: 70px;
height: 13px;
left: 50%;
top: 90%;
margin-left: -35px;
border-radius: 7px;
background: rgba(255,255,255,.3);
line-height: 9px;
}
.circle ol li{
width: 8px;
height: 8px;
float: left;
border-radius: 50%;
background-color: #fff;
margin: 3px;
}
.current{
background-color: green;
width: 15px;
height: 15px;
border-radius: 50%;
}
</style>
<body>
<div class="promt">
<a href="javascript:;" class="prev">></a>
<a href="javascript:;" class="next"><</a>
<ul>
<li><img src="picture/tb.jpg" alt=""></li>
<li><img src="picture/banner1.png" alt=""></li>
<li><img src="picture/banner2.jpg" alt=""></li>
</ul>
<div class="circle">
<ol>
</ol>
</div>
</div>
</body>
JS部分
//lunbotu.js
window.addEventListener('load',function(){
//1. 鼠标经过promt盒子就显示隐藏左右按钮
var prev = document.querySelector('.prev');//左侧按钮
var next = document.querySelector('.next');//右侧按钮
var promt = document.querySelector('.promt');//大盒子
var promtWidth = promt.offsetWidth;
promt.addEventListener('mouseenter',function(){
prev.style.display = 'block';
next.style.display = 'block';
//鼠标经过后，自动播放的定时器停止，并清空
clearInterval(timer);
timer = null;
})
promt.addEventListener('mouseleave',function(){
prev.style.display = 'none';
next.style.display = 'none';
//鼠标离开就又开启定时器，不用加var，因为已经有了
timer = setInterval(function(){
prev.click();
},2000);
})
// 2.动态生成小圆圈，有几张图片，就在页面下方生成几个小圆圈
var ul = promt.querySelector('ul');
var ol = promt.querySelector('ol');
for(var i=0; i<ul.children.length; i++){
//创建一个li
var li = document.createElement('li');
// 记录当前索引号，通过自定义属性来做
li.setAttribute('index',i);
//把li插到ol里面
ol.appendChild(li);
// 3.点击小圆圈，小圆圈变橙色(为什么不变色啊啊啊啊啊啊，我疯了)
li.addEventListener('click',function(){
for(var i=0; i<ol.children.length; i++){
ol.children[i].className = '';
}
this.className = 'current';
// 4. 点击小圆圈，商品介绍图品页面移动，移动的是ul
// ul移动的距离是 小圆圈的索引号*图片宽度（左移，负值）
var index = this.getAttribute('index');
num = index;//把当前点的小圆圈赋值给num,要不然num就会从0开始记起，点下一个图片时就跳到另一张
circle = index;
animate(ul, -index*promtWidth);
})
}
// 把ol里面的第一个小li设置为current类(不知道为啥不变色啊啊啊)
ol.children[0].className = 'current';
//5. 克隆第一张图片放到ul最后面
// 因为图片一直向左（右）滑，滑到最后一张，再点左（右）一次时会出现空白图片
// 解决方法：把第一张的图片复制到最后一张的后面（假第一张），最后一张再点一次时就到了假第一张的位置，此时
// 从假第一张飞快跳回真正的第一张（ul要快速恢复left：0；）
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 6.点击左右侧按钮，实现图片滑动。
var num = 0;
var circle = 0;
//左侧按钮
prev.addEventListener('click',function(){
if(num==ul.children.length-1){
ul.style.left = 0;
num = 0;
}
num++;
animate(ul,-num*promtWidth);
circle++;
//如果circle==4，说明走到克隆的图片了，需要复原
if(circle==ol.children.length){
circle==0;
}
for(var i=0; i<ol.children.length; i++){
ol.children[i].className = '';
}
// ol.children[circle % ol.children.length].className = 'current';
for(var i=0; i<ol.children.length; i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
});
//右侧按钮
next.addEventListener('click',function(){
if(num==0){
//从第一张迅速跳回克隆的图片，以便跳回最后一张
num = ul.children.length-1;
ul.style.left = -num * promtWidth + 'px';
}
num--;
animate(ul, -num*promtWidth);
circle--;
if(circle<0){
circle==ol.children.length-1;
}
for(var i=0; i<ol.children.length; i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
// ol.children[circle % ol.children.length].className = 'current';
});
//7. 自动播放功能,类似于自动点击右侧按钮
var timer = setInterval(function(){
//手动调动点击事件
prev.click();
},3000);
})//animate.js
function animate(obj, target, callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//步长值，减速行走,走整数
var step = (target - obj.offsetLeft) / 10;
step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
// 如果有回调函数传进来
if(callback){
//调用函数
callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
},30)
}
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
