（12）筋斗云案例（导航栏醒目显示跟随）

鼠标经过某个小li，筋斗云跟着到当前小li位置
鼠标离开这个小li，筋斗云复原为原来的位置
鼠标点击了某个小li，筋斗云就会留在点击这个小li的位置
仍然利用动画函数做动画效果
原先筋斗云的起始位置是0
鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可

<body><div id="c_nav" class="c-nav"><span class="cloud"></span><ul><li><a href="javascrit:;">首页新闻</a></li><li><a href="javascrit:;">师资力量</a></li><li><a href="javascrit:;">活动策划</a></li><li><a href="javascrit:;">企业文化</a></li><li><a href="javascrit:;">招聘信息</a></li><li><a href="javascrit:;">公司简介</a></li><li><a href="javascrit:;">山治穿行</a></li><li><a href="javascrit:;">机甲真是</a></li></ul></div>
</body>

<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>window.addEventListener('load',function(){var cloud = document.querySelector('.cloud');var c_nav = document.querySelector('.c-nav');var lis = c_nav.querySelectorAll('li');var current = 0;//这个作为筋斗云的起始位置for(var i = 0; i < lis.length; i++) {lis[i].addEventListener('mouseenter',function(){animate(cloud,this.offsetLeft);})lis[i].addEventListener('mouseleave',function(){animate(cloud,current);//回到起始位置})//当鼠标点击，把当前位置作为目标值lis[i],addEventListener('click',function(){current = this.offsetLeft;});}})</script>

animate（）为之前使用的动画函数。

学习快乐！

（12）筋斗云案例（导航栏醒目显示跟随）相关推荐

css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
【代码笔记】iOS-在导航栏中显示等待对话框
一,效果图. 二,代码. ViewController.m #import "ViewController.h"@interface ViewController () @end ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
css 导航栏下划线跟随效果，默认第一个li为选中状态
本次主要是联系css实现导航栏下划线跟随效果 HTML: <ul id="list"><li class="current_li">&l ...
html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态
本次主要是联系css实现导航栏下划线跟随效果 HTML: js:主要是为了刷新页面,让第一个li默认有下划线和选中效果 css: /*下划线跟随*/ ul{ display: flex; positi ...
vue 电梯导航制作（鼠标滚动控制导航栏的显示与隐藏）
鼠标滚动控制导航栏的显示与隐藏上图先看效果: 下面为2张图,默认为导航栏,当鼠标向下滚动一定距离时,变为箭头, 并且点击黄色的返回图标,也变为下方箭头,此时再滚动窗口,不会变为导航栏. 点击下方箭头 ...
js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...
Android 自定义底部导航栏消息显示
转载请标明出处: http://blog.csdn.net/tyzlmjj/article/details/47186249 本文出自:[M家杰的博客] 概述底部导航栏的做法多种多样,这次主要用到了 ...

（12）筋斗云案例（导航栏醒目显示跟随）

（12）筋斗云案例（导航栏醒目显示跟随）相关推荐

最新文章

热门文章