js练习：筋斗云案例练习

1.实现效果

鼠标经过，筋斗云跟随，鼠标离开，筋斗云回到原来的位置。鼠标点击，筋斗云停在该位置。

2.实现思路：

鼠标点击时，更改当前的current即可。同时更新记忆变量current，上面图片中的鼠标离开某个小li，就把目标值设为current。

（注意：鼠标点击时，不需要再移动，直接更新current即可。点击完后，离开鼠标时会再执行鼠标离开事件（即移动到current位置，筋斗云会停留在当前位置），即可达到想要的效果。）

3.代码：

<!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>筋斗云案例</title><style>* {margin: 0;padding: 0;}.banner {height: 40px;padding: 0px;margin: 0px;}ul {height: 40px;padding: 0;margin: 0;width: 700px;}ul>li {list-style: none;display: inline-block;height: 40px;width: 80px;line-height: 40px;text-align: center;margin: 0;padding: 0;cursor: pointer;}img {width: 80px;height: 40px;}.cloud {position: absolute;left: 0;top: 0;z-index: -1;}</style><script src="animate.js"></script>
</head>
<body><div class="banner"><span class="cloud"><img src="cloud.gif" alt=""></span><ul><li>首页新闻</li><li>招聘信息</li><li>公司简介</li><li>上海校区</li><li>广州校区</li><li>活动策划</li><li>师资力量</li></ul></div><script>var lis = document.querySelector('ul').children;var cloud = document.querySelector('.cloud')var init_left = lis[0].offsetLeft;var current = 0;for(var i = 0; i < lis.length; i++) {lis[i].addEventListener('mouseover', function() {animate(cloud, this.offsetLeft);});lis[i].addEventListener('mouseout', function() {animate(cloud, current);});lis[i].addEventListener('click',function(){ current = cloud.offsetLeft;});}</script>
</body>
</html>

缓动画js：

function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function(){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();}obj.style.left = obj.offsetLeft + step + 'px';},15)
}

js练习：筋斗云案例练习相关推荐

JS 59 筋斗云案例
一.需求分析: 1.鼠标经过某个li,筋斗云跟着到当前位置2.鼠标离开某个li,筋斗云复原为原来位置3.鼠标点击某个li,筋斗云停留在这个li 效果展示: 二.实现思路: 1.利用动画函数做动画效果2 ...
【PC端网页特效】05-侧边栏返回顶部案例和筋斗云案例
返回顶部和筋斗云案例返回顶部案例需求案例实现筋斗云案例案例需求案例实现返回顶部案例需求在博客:案例:仿淘宝右侧固定侧边栏中已经实现了当滚动到一定位置,显示/隐藏"返回顶部& ...
js 实现筋斗云效果(点击tab栏里面的某个地方,会有图片移动到此地方)
js 实现筋斗云效果 animate.js <!DOCTYPE html> <html lang="en"> <head><meta ch ...
JS解密入门案例：python有道翻译JS解密
前言嗨喽!大家好呀,这里是魔王~ 课程亮点: 系统分析网页结构动态数据抓包演示 json数据解析 JS解密环境介绍: python 3.8 pycharm >>> 需要安装no ...
js前端开发案例教程之DOM购物车（动手实践：购物车）
js前端开发案例教程之 DOM购物车(动手实践:购物车) html和css <!DOCTYPE html> <html><head><meta charse ...
js正则分析案例——以JSON格式校验为例
js正则分析案例--以JSON格式校验为例 [TOC] 缘起最近在研究javascript中对各种数据类型与格式的判断,以及各种第三方库提供的字符串处理方法,发现有大量的地方运用了正则,并且有些正则 ...
JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
筋斗云案例 - animate、transition都能实现
很早的时候看过一个筋斗云的案例,当时刚接触动画,用的都是封装的animate函数,如今看来,css3的属性之一transition也能又快又简便的实现此动画,下面,我们就来看看吧~ 实现的效果区别在 ...
WebAPI第四天学习总结—— 常见网页特效案例（轮播图、节流阀、返回顶部、筋斗云案例）
常见网页特效案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往 ...

js练习：筋斗云案例练习

js练习：筋斗云案例练习相关推荐

最新文章

热门文章