一、常见网页特效
1. 案例：网页轮播图
- 1.1 案例分析
- - 1.1.1 左右按钮的显示与隐藏
  - 1.1.2 动态生成小圆圈
  - 1.1.3 小圆圈的排他思想
  - 1.1.4 点击小圆圈滚动图片
  - 1.1.5 点击右侧按钮一次，就让图片滚动一张
  - 1.1.6 克隆第一张图片
  - 1.1.7 点击右侧按钮，小圆圈跟随变化
  - 小bug
  - 1.1.8 左侧按钮功能实现
  - 1.1.9 自动播放功能
- 1.2 节流阀
- 1.3 代码展示
- - html
  - css
  - js
  - animate.js
2. 案例：返回顶部
- js
3. 案例：筋斗云
- 3.1 案例分析
- 3.2 代码实现

一、常见网页特效

1. 案例：网页轮播图

轮播图也称为焦点图，是网页中比较常见的网页特效。
功能需求：

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
图片播放的同时，下面小圆圈模块跟随一起变化。
点击小圆圈，可以播放相应图片。
鼠标不经过轮播图，轮播图也会自动播放图片。
鼠标经过，轮播图模块，自动播放停止。

1.1 案例分析

1.1.1 左右按钮的显示与隐藏

// 等页面所有元素加载完后再执行js
window.addEventListener('load', function () {//this.alert('1');  // 测试// 1. 获取元素var arrow_l = this.document.querySelector('.arrow-l');var arrow_r = this.document.querySelector('.arrow-r');var focus = document.querySelector('.focus');// 2. 鼠标经过focus 就显示隐藏的左右按钮focus.addEventListener('mouseenter', function () {arrow_l.style.display = 'block';arrow_r.style.display = 'block';})// 鼠标离开focus 就隐藏左右按钮focus.addEventListener('mouseleave', function () {arrow_l.style.display = 'none';arrow_r.style.display = 'none';})})

1.1.2 动态生成小圆圈

// 3. 动态生成小圆圈，有几张图片我们就生成几个小圆圈var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle');// console.log(ul.children.length);   testfor (var i = 0; i < ul.children.length; i++) {// 创建一个小livar li = this.document.createElement('li');// 把小li插入到ol里面ol.appendChild(li);}// 把ol的第一个小li设置类名为 currentol.children[0].className = 'current';

1.1.3 小圆圈的排他思想

排他思想的口诀： 干掉所有人，留下我自己

// 4. 小圆圈的排他思想 我们可以直接生成小圆圈的同时直接绑定点击事件li.addEventListener('click', function () {// 干掉所有人 把所有的小li 清除 current 类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ' ';}// 留下我自己 当前的小li 设置current 类名this.className = 'current';})

把这段代码写到上一段代码的for循环里面

1.1.4 点击小圆圈滚动图片

html

css

js

for (var i = 0; i < ul.children.length; i++) {// 创建一个小livar li = this.document.createElement('li');//记录当前小圆圈的索引号 通过自定义属性来做li.setAttribute('index', i);// 把小li插入到ol里面ol.appendChild(li);// 4. 小圆圈的排他思想 我们可以直接生成小圆圈的同时直接绑定点击事件li.addEventListener('click', function () {// 干掉所有人 把所有的小li 清除 current 类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ' ';}// 留下我自己 当前的小li 设置current 类名this.className = 'current';// 5. 点击小圆圈，移动图片 当然移动的是 ul// ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是往左走，所以是负值// 当我们点击了某个小li 就拿到当前小li 的索引号var index = this.getAttribute('index');//console.log(index); testvar focusWidth = focus.offsetWidth;//console.log(focusWidth); testanimate(ul, -index * focusWidth);})}

1.1.5 点击右侧按钮一次，就让图片滚动一张

将href的值 “#” 改写成 “javascript:;” ，使其被点击后不会跳到页面最顶端

将之前在for循环内部定义的focusWidth提到外面去定义，这样在外面也可以使用了。

将第一张的图片复制一份放到最后面

// 6. 点击右侧按钮一次，就让图片滚动一张var num = 0;arrow_r.addEventListener('click', function () {// alert('1'); test// 如果走到了最后复制的一张图片，此时，我们的ul 要快速复原 left 改为 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth);})

1.1.6 克隆第一张图片

虽然右侧按钮的功能实现了，但我们还有代码改进的空间。
问题1： 我们的小li是直接在结构里面复制了一份，这样动态生成的小圆点也会随之增加。
问题2： 我们不知道里面到底有几张图片，在结构复制一份就写死了，能不能再自动化一些。

把之前在HTML文件里复制的第一张图片删掉。

// 6. 克隆第一张图片(li)放到ul 最后面var first = ul.children[0].cloneNode(true);ul.appendChild(first);

把该段代码写到上一段代码的前面。
因为在动态生成小圆圈之后再克隆了一份图片，所以小圆圈不会多一个。

1.1.7 点击右侧按钮，小圆圈跟随变化

// 7. 点击右侧按钮一次，就让图片滚动一张var num = 0;// circle 控制小圆圈的播放var circle = 0;arrow_r.addEventListener('click', function () {// alert('1'); test// 如果走到了最后复制的一张图片，此时，我们的ul 要快速复原 left 改为 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth);// 8. 点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放circle++;// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原为0if (circle == ol.children.length) {circle = 0;}// 先清除其余小圆圈的current类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下当前的小圆圈的current类名ol.children[circle].className = 'current';})

小bug

1.当我们点击第三个小圆圈会显示第3张图片，然后点击右侧按钮，图片却显示第2张。这是因为我们播放下一张是由num控制的，而num这一个变量和之前做的点击小圆圈事件没有任何关系，所以它们就出现差异。

// 4. 小圆圈的排他思想 我们可以直接生成小圆圈的同时直接绑定点击事件li.addEventListener('click', function () {// 干掉所有人 把所有的小li 清除 current 类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ' ';}// 留下我自己 当前的小li 设置current 类名this.className = 'current';// 5. 点击小圆圈，移动图片 当然移动的是 ul// ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是往左走，所以是负值// 当我们点击了某个小li 就拿到当前小li 的索引号var index = this.getAttribute('index');//console.log(index); test//当我们点击了某个小li 就要把这个小li 的索引号给 numnum = index;//当我们点击了某个小li 就要把这个小li 的索引号给 circle circle是控制小圆圈自动播放circle = index;animate(ul, -index * focusWidth);})

1.1.8 左侧按钮功能实现

// 7. 点击右侧按钮一次，就让图片滚动一张var num = 0;// circle 控制小圆圈的播放var circle = 0;arrow_r.addEventListener('click', function () {// alert('1'); test// 如果走到了最后复制的一张图片，此时，我们的ul 要快速复原 left 改为 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth);// 8. 点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放circle++;// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原为0// if (circle == ol.children.length) {//     circle = 0;// }// 代码优化 三元表达式circle = circle == ol.children.length ? 0 : circle;// 调用函数circleChange();})// 9. 左侧按钮做法arrow_l.addEventListener('click', function () {// alert('1'); test// 如果走到了最后复制的一张图片，此时，我们的ul 要快速复原 left 改为 0if (num == 0) {num = ul.children.length - 1;// ul向左走为负值ul.style.left = -num * focusWidth + 'px';}num--;animate(ul, -num * focusWidth);// 8. 点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放circle--;// // 如果circle < 0 说明第一张图片 则小圆圈要改为第4个小圆圈// if (circle < 0) {//     circle = ol.children.length - 1;// }// 代码优化 三元表达式circle = circle < 0 ? ol.children.length - 1 : circle;// 调用函数circleChange();})// 优化 左右按钮的小圆圈排他思想代码一样 就封装为一个函数，调用函数 减少代码重复量function circleChange() {// 先清除其余小圆圈的current类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下当前的小圆圈的current类名ol.children[circle].className = 'current';}

1.1.9 自动播放功能

// 10. 自动播放轮播图var timer = setInterval(function () {// 手动调用点击事件arrow_r.click();}, 2000);

鼠标经过 focus 就停止定时器
鼠标离开 focus 就开启定时器

1.2 节流阀

// flag 节流阀var flag = true;arrow_r.addEventListener('click', function () {if (flag) {flag = false; // 关闭节流阀// alert('1'); test// 如果走到了最后复制的一张图片，此时，我们的ul 要快速复原 left 改为 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth, function () {flag = true; // 打开节流阀});// 8. 点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放circle++;// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原为0// if (circle == ol.children.length) {//     circle = 0;// }// 代码优化 三元表达式circle = circle == ol.children.length ? 0 : circle;// 调用函数circleChange();}})

1.3 代码展示

html

<!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><link rel="stylesheet" href="index.css"><!-- 这个animate.js 必须写到 index.js的上面引入 --><script src="js/animate.js"></script><script src="js/index.js"></script>
</head><body><div class="focus"><!-- 左侧按钮 --><a href="javascript:;" class="arrow-l">&lt;</a><!-- 右侧按钮 --><a href="javascript:;" class="arrow-r">&gt;</a><!-- 核心的滚动区域 --><ul><li><a href="#"><img src="../images/focus.jpg" alt=""></a></li><li><a href="#"><img src="../images/focus1.jpg" alt=""></a></li><li><a href="#"><img src="../images/focus2.jpg" alt=""></a></li><li><a href="#"><img src="../images/focus3.jpg" alt=""></a></li></ul><!-- 小圆圈 --><ol class="circle"></ol></div>
</body></html>

css

* {margin: 0;padding: 0;
}li {list-style: none;
}a {text-decoration: none;
}.focus {position: relative;width: 721px;height: 455px;background-color: pink;margin: 100px auto;overflow: hidden;
}.focus ul {position: absolute;top: 0;left: 0;/* 使轮播图的使用图片都放到一行上去就需要扩大父盒子的宽度 */width: 600%;
}.focus ul li {float: left;
}.arrow-l,
.arrow-r {display: none;position: absolute;top: 50%;margin-top: -20px;width: 24px;height: 40px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 40px;color: #fff;font-size: 18px;z-index: 2;
}.arrow-r {right: 0;
}.circle {position: absolute;bottom: 10px;left: 50px;
}.circle li {float: left;width: 8px;height: 8px;border: 2px solid rgba(255, 255, 255, 0.5);margin: 0 3px;border-radius: 50%;/*鼠标经过显示小手*/cursor: pointer;
}.current {background: #fff;
}

js

// 等页面所有元素加载完后再执行js
window.addEventListener('load', function () {//this.alert('1');  // 测试// 1. 获取元素var arrow_l = this.document.querySelector('.arrow-l');var arrow_r = this.document.querySelector('.arrow-r');var focus = document.querySelector('.focus');var focusWidth = focus.offsetWidth;//console.log(focusWidth); test// 2. 鼠标经过focus 就显示隐藏的左右按钮focus.addEventListener('mouseenter', function () {arrow_l.style.display = 'block';arrow_r.style.display = 'block';clearInterval(timer);timer = null; // 清除定时器变量})// 鼠标离开focus 就隐藏左右按钮focus.addEventListener('mouseleave', function () {arrow_l.style.display = 'none';arrow_r.style.display = 'none';timer = setInterval(function () {// 手动调用点击事件arrow_r.click();}, 2000);})// 3. 动态生成小圆圈，有几张图片我们就生成几个小圆圈var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle');// console.log(ul.children.length);   testfor (var i = 0; i < ul.children.length; i++) {// 创建一个小livar li = this.document.createElement('li');//记录当前小圆圈的索引号 通过自定义属性来做li.setAttribute('index', i);// 把小li插入到ol里面ol.appendChild(li);// 4. 小圆圈的排他思想 我们可以直接生成小圆圈的同时直接绑定点击事件li.addEventListener('click', function () {// 干掉所有人 把所有的小li 清除 current 类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = ' ';}// 留下我自己 当前的小li 设置current 类名this.className = 'current';// 5. 点击小圆圈，移动图片 当然移动的是 ul// ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是往左走，所以是负值// 当我们点击了某个小li 就拿到当前小li 的索引号var index = this.getAttribute('index');//console.log(index); test//当我们点击了某个小li 就要把这个小li 的索引号给 numnum = index;//当我们点击了某个小li 就要把这个小li 的索引号给 circle circle是控制小圆圈自动播放circle = index;animate(ul, -index * focusWidth);})}// 把ol的第一个小li设置类名为 currentol.children[0].className = 'current';// 6. 克隆第一张图片(li)放到ul 最后面var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 7. 点击右侧按钮一次，就让图片滚动一张var num = 0;// circle 控制小圆圈的播放var circle = 0;// flag 节流阀var flag = true;arrow_r.addEventListener('click', function () {if (flag) {flag = false; // 关闭节流阀// alert('1'); test// 如果走到了最后复制的一张图片，此时，我们的ul 要快速复原 left 改为 0if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth, function () {flag = true; // 打开节流阀});// 8. 点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放circle++;// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原为0// if (circle == ol.children.length) {//     circle = 0;// }// 代码优化 三元表达式circle = circle == ol.children.length ? 0 : circle;// 调用函数circleChange();}})// 9. 左侧按钮做法arrow_l.addEventListener('click', function () {if (flag) {flag = false;// alert('1'); test// 如果走到了最后复制的一张图片，此时，我们的ul 要快速复原 left 改为 0if (num == 0) {num = ul.children.length - 1;// ul向左走为负值ul.style.left = -num * focusWidth + 'px';}num--;animate(ul, -num * focusWidth, function () {flag = true;});// 8. 点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放circle--;// // 如果circle < 0 说明第一张图片 则小圆圈要改为第4个小圆圈// if (circle < 0) {//     circle = ol.children.length - 1;// }// 代码优化 三元表达式circle = circle < 0 ? ol.children.length - 1 : circle;// 调用函数circleChange();}})// 优化 左右按钮的小圆圈排他思想代码一样 就封装为一个函数，调用函数 减少代码重复量function circleChange() {// 先清除其余小圆圈的current类名for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}// 留下当前的小圆圈的current类名ol.children[circle].className = 'current';}// 10. 自动播放轮播图var timer = setInterval(function () {// 手动调用点击事件arrow_r.click();}, 2000);
})

animate.js

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(); // 短路运算符 如果callback 为true 就会执行后面的callback()}// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);
}

2. 案例：返回顶部

在之前仿淘宝固定侧边栏的案例中实现

js

// 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方goBack.addEventListener('click', function () {// alert(1);// 里面的x和y 不跟单位的 直接写数字即可// window.scroll(0, 0);// 因为是窗口滚动 所以对象是windowanimate(window, 0);});// 动画函数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 - window.pageYOffset) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset == target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);// 回调函数写到定时器结束里面// if (callback) {//     // 调用函数//     callback();// }callback && callback(); // 短路运算符 如果callback 为true 就会执行后面的callback()}// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10// obj.style.left = window.pageYOffset + step + 'px';window.scroll(0, window.pageYOffset + step);}, 15);}

3. 案例：筋斗云

鼠标经过某个小li，筋斗云跟这到当前小i位置
鼠标离开这个小li，筋斗云复原为原来的位置
鼠标点击了某个小li，筋斗云就会留在点击这个小li的位置

3.1 案例分析

3.2 代码实现

<!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;}ul {list-style: none;}body {background-color: black;}.c-nav {width: 900px;height: 42px;background: #fff url(images/rss.png) no-repeat right center;margin: 100px auto;border-radius: 5px;position: relative;}.c-nav ul {position: absolute;}.c-nav li {float: left;width: 83px;text-align: center;line-height: 42px;}.c-nav li a {color: #333;text-decoration: none;display: inline-block;height: 42px;}.c-nav li a:hover {color: white;}.cloud {position: absolute;left: 0;top: 0;width: 83px;height: 42px;background: url(images/cloud.gif) no-repeat;}</style><script src="animate.js"></script><script>window.addEventListener('load', function () {// 1. 获取元素var cloud = document.querySelector('.cloud');var c_nav = document.querySelector('.c-nav');var lis = c_nav.querySelectorAll('li');// 这个current 做为筋斗云的起始位置var current = 0;// 2. 给所有的小li绑定事件 for (var i = 0; i < lis.length; i++) {// (1) 鼠标经过把当前小li 的位置做为目标值lis[i].addEventListener('mouseenter', function () {animate(cloud, this.offsetLeft);});// (2) 鼠标离开就回到起始的位置 lis[i].addEventListener('mouseleave', function () {animate(cloud, current);});// (3) 当我们鼠标点击，就把当前位置做为目标值lis[i].addEventListener('click', function () {current = this.offsetLeft;});}})</script>
</head><body><div class="c-nav"><span class="cloud"></span><ul><li class="current"><a href="">首页新闻</a></li><li><a href="#">师资力量</a></li><li><a href="#">活动策划</a></li><li><a href="#">企业文化</a></li><li><a href="#">招聘信息</a></li><li><a href="#">公司简介</a></li><li><a href="#">我是佩奇</a></li><li><a href="#">啥是佩奇</a></li></ul></div>
</body></html>

JavaScript—— 常见网页特效相关推荐

JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
WebAPI第四天学习总结—— 常见网页特效案例（轮播图、节流阀、返回顶部、筋斗云案例）
常见网页特效案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往 ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
PC端网页特效 | 常见网页特效案例
目录案例:网页轮播图轮播图JS全部代码节流阀案例:返回顶部 JS代码为案例:筋头云案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 鼠标经过轮播图模块,左 ...
Web APIs：PC 端网页特效--常见网页特效案例--轮播图及节流阀思想
轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2. 点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理. 3. 图 ...
利用Javascript制作网页特效（其他常见特效）
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)';this. ...
利用Javascript制作网页特效（时间特效）
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...
Javascript Web网页特效收录大全
前言本编文章纯属个人形为,如果对您有帮助将不胜感激. canvas 实例注意!注意!下载链接关于背景图片切换动画实例百度联盟阿里云动画实例 <!DOCTYPE html> & ...

JavaScript—— 常见网页特效

目录