js网页特效动画（筋斗云案例）

案例说明

案例分析

案例实现代码

demo.css

* {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;
}.c-nav li.current a {color: #0dff1d;
}.cloud {position: absolute;left: 0;top: 0;width: 83px;height: 42px;background: url(images/cloud.gif) no-repeat;
}

demo.js

window.addEventListener('load', function() {// 1. 获取元素var cloud = document.querySelector('.cloud');var c_nav = document.querySelector('.c-nav');var lis = c_nav.querySelectorAll('li');// 2. 给所有的小li绑定事件 // 这个current 做为筋斗云的起始位置var current = 0;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;});}
})

demo.html

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo.css"><!-- 导入动画js文件 --><script src="animate.js"></script><script src="demo.js"></script>
</head><body><div id="c_nav" class="c-nav"><span class="cloud"></span><ul><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><li><a href="#">联系我们</a></li></ul></div>
</body></html>

动画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();}// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);
}

代码运行结果

js网页特效动画（筋斗云案例）相关推荐

JS网页特效实例：禁止网页放入框架
在网络上,为了防止网页被随意地引入到别人的框架里,可以通过判断网页是否为最顶层网页来禁止网页被放入框架. 补充下面代码,禁止网页放入框架. ```html <!DOCTYPE HTML> ...
html5点击效果文字跳转,JS网页特效代码，点击跳出爱心和文字特效
鼠标左键点击网页会跳出爱心,相信不少站长见过这种JS网页特效,有些点击还会跳出文字.橘子君也是觉得挺好奇的,然后也给网站加了一段时间这种特效,后来由于种种原因的考虑,博主又将该代码删除了.如果你对这种 ...
仿京东商城左侧商品分类导航-JS网页特效
网页特效:仿京东商城左侧商品分类导航演示地址:http://www.iiwnet.com/js_menu/976.html <html xmlns="http://www.w3.or ...
前端-js网页特效（一）倒计时效果及原理
目录一.原理二.代码解析(内有注释) css部分 HTML部分: script部分: 三.实际效果图四.结束语一.原理说到倒计时效果,基本面实现的话离不开 setInterval()这个方法 ...
JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
WebAPI第四天学习总结—— 常见网页特效案例（轮播图、节流阀、返回顶部、筋斗云案例）
常见网页特效案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往 ...
【PC端网页特效】05-侧边栏返回顶部案例和筋斗云案例
返回顶部和筋斗云案例返回顶部案例需求案例实现筋斗云案例案例需求案例实现返回顶部案例需求在博客:案例:仿淘宝右侧固定侧边栏中已经实现了当滚动到一定位置,显示/隐藏"返回顶部& ...
canvas炫酷3d网页背景动画js特效
下载地址canvas画布实现的炫酷3d网页背景动画特效 dd:
HTML5光晕线条网页背景动画js特效
下载地址 HTML5光晕线条网页背景动画特效,基于Canvas实现适合作为动态网页背景. dd:

js网页特效动画（筋斗云案例）

案例说明

案例分析

案例实现代码

代码运行结果

js网页特效动画（筋斗云案例）相关推荐

最新文章

热门文章