元素偏移量offset系列
元素可视区client系列
立即执行函数
一般是用第一种方式
flexible.js
元素滚动scroll系列
mouseenter和mouseover的区别
动画函数封装
<!DOCTYPE html>
<html lang="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>Document</title>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button class="btn500">点击夏雨荷到500</button>
<button class="btn800">点击夏雨荷到800</button>
<span>夏雨荷</span>
<script>
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路:
// 1. 让盒子每次移动的距离慢慢变小, 速度就会慢慢落下来。
// 2. 核心算法:(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器
function animate(obj, target) {
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function() {
// 调用函数
animate(span, 500);
})
btn800.addEventListener('click', function() {
// 调用函数
animate(span, 800);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
</script>
</body>
</html>
常见网页特效案列
轮播图
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: gray;
}
.dao-l {
display: none;
background-color: rgba(0, 0, 0, .4);
position: absolute;
top: 50%;
margin-top: -15px;
left: 0;
width: 30px;
height: 30px;
color: white;
text-align: center;
line-height: 30px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
z-index: 2;
}
.dao-l:hover {
font-size: 17px;
}
.dao-r {
display: none;
background-color: rgba(0, 0, 0, .4);
position: absolute;
top: 50%;
margin-top: -15px;
right: 0;
width: 30px;
height: 30px;
color: white;
text-align: center;
line-height: 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
z-index: 2;
}
.dao-r:hover {
font-size: 17px;
}
div {
overflow: hidden;
position: relative;
width: 721px;
height: 455px;
margin: 200px auto;
background-color: skyblue;
}
.image {
position: absolute;
width: 600%;
}
.image li{
float: left;
}
div ol {
position: absolute;
left: 50%;
margin-left: -29px;
bottom: 20px;
width: 58px;
height: 14px;
background-color: rgba(255, 255, 255, .7);
border-radius: 7px;
}
div ol li {
float: left;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 4px;
margin: 3px;
}
.current {
background-color: orange;
float: left;
width: 8px;
height: 8px;
border-radius: 4px;
margin: 3px;
}
</style>
<script src="JS/animate.js"></script>
<script src="JS/轮播图2.js"></script>
</head>
<body>
<div>
<!-- 左按钮 -->
<a class="dao-l" href="#"><</a>
<!-- 右按钮 -->
<a class="dao-r" href="#">></a>
<!-- 滚动图片 -->
<ul class="image">
<li>
<a href="">
<img src="images/focus1.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/focus2.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/focus3.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="upload/focus1.jpg" alt="">
</a>
</li>
</ul>
<!-- 小圆圈 -->
<ol>
</ol>
</div>
</body>
</html>
JS:animate和事件
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
window.addEventListener('load', function(){
// 获取元素
var daoleft = document.querySelector('.dao-l');
var daoright = document.querySelector('.dao-r');
var div = document.querySelector('div');
// 注册事件:让鼠标经过div就显示按钮,移动出去就隐藏按钮
div.addEventListener('mouseenter',function(){
daoleft.style.display = 'block';
daoright.style.display = 'block';
// 清除定时器
clearInterval(timer);
timer = null;
})
div.addEventListener('mouseleave',function(){
daoleft.style.display = 'none';
daoright.style.display = 'none';
// 调用计时器
timer = setInterval(function(){
daoleft.click();
},2000)
})
// 动态生成小圆圈,有几个图片就有几个小圆圈
var ul = div.querySelector('ul');
var ol = document.querySelector('ol');
// 每张图片宽度
var divw = div.offsetWidth;
// for循环获取小圆点个数
for(var i = 0; i < ul.children.length; i++) {
// 创建li
var li = document.createElement('li');
// 记录当前索引号
li.setAttribute('index', i);
// 插入li
ol.appendChild(li);
// 给li绑定点击事件
li.addEventListener('click', function(){
// 排他思想
for (var j = 0; j < ol.children.length; j++){
ol.children[j].className = '';
}
this.className = 'current';
// 当我们点击小li就拿到索引号
var index = this.getAttribute('index');
// 设置动画时要记得添加定位,不然不能移动
animate(ul,-index * divw);
// 将小圆点索引号给左按钮计数器,就是为了点完小圆点后,点击按钮也可以正常运行
num = circle = index;
})
}
ol.children[0].className = 'current';
// 复制ul第一张图片放在ul最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 左按钮绑定点击事件,让图片移动
// num是点击左侧按钮的计数器,circle是点击小圆点的计数器
var num = 0;
var circle = 0;
// 节流阀
var flag = true;
daoleft.addEventListener('click', function(){
if (flag) {
flag = false;
if (num == ul.children.length-1){
ul.style.left = '0';
num = 0;
}
num++;
animate(ul,-num * divw,function(){
flag = true;
});
circle ++;
// 因为图片比小圆圈多一个,所以得先做一个判断,若是到最后一张就改变计数器的值,
// 让他回到第一个点
if (circle == ul.children.length-1){
circle = 0;
}
// 排他思想,先清除别人样式在改变自己样式
circlechange();
}
})
// 点击右侧按钮事件
daoright.addEventListener('click', function(){
if (flag) {
flag = false;
if (num == 0){
num = ul.children.length-1;
ul.style.left = -num*divw+'px';
}
num--;
animate(ul,-num * divw,function(){
flag = true;
});
circle --;
// 刚刷新,小圆点本身就是0,在减1就是负数,所以这里是小圆点索引值小于0
// if (circle < 0){
// // ol孩子长度是4,而小圆点索引值最大是3,所以ol.children.length要减1
// circle = ol.children.length-1;
// }
circle = circle < 0? ol.children.length-1 : circle;
circlechange();
}
})
function circlechange () {
// 排他思想,先清除别人样式在改变自己样式
for (var j = 0; j < ol.children.length; j++){
ol.children[j].className = '';
}
ol.children[circle].className = 'current';
}
// 轮播图自动播放定时器
var timer = setInterval(function(){
daoleft.click();
},2000)
})