js+html+css筋斗云导航栏

功能简述

图片随着鼠标位置在导航栏上变化而变化
当点击某个导航栏时，图片位置迁移到当前导航栏的位置处
效果预览

实现原理

给每个li标签添加鼠标事件
当鼠标悬浮于li标签的时候，将当前li标签的offsetLeft值赋给图片的offsetLeft使其移动
当鼠标离开li标签的时候，图片offsetLeft的值重置为之前已点击的li标签的offsetLeft值
当鼠标点击li标签的时候，记录当前li标签的offsetLeft值，并当前li标签添加选中状态
涉及到的animate函数详见js动画函数实现侧边栏动态显示内容.

实现代码

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>practice1</title><link href="../css/practive1.css" rel="stylesheet"/><script src="../js/animate.js"></script><script type="text/javascript" src="../js/practice1.js"></script>
</head><body>
<div class="cloud"><span class="img"></span><ul><li class="current"><a href="javascript:;">首页</a></li><li><a href="javascript:;">文章</a></li><li><a href="javascript:;">动态</a></li><li><a href="javascript:;">关注</a></li><li><a href="javascript:;">最新热门</a></li></ul>
</div>
</body>
</html>

css

body {background-color: #a3b0b5;
}.cloud {margin: 100px auto;border-radius: 5px;position: relative;width: 500px;height: 42px;background: #fff url("../imgs/pig.jpg") no-repeat right center;
}.cloud ul {position: absolute;text-align: center;list-style-type: none;margin-left: 0px;padding: 0;
}.cloud ul li{top: 0;margin: 0px 15px;float: left;text-align: center;}.cloud li a{text-decoration: none;color: #000;display: inline-block;
}.cloud li:hover {color: #dc4c3f;font-weight: 600;
}.cloud ul li.current a{color: #dc4c3f;font-weight: 600;
}.cloud span {position: absolute;top: 0px;background: url('../imgs/lovefly.gif') no-repeat;/* 图片随屏幕大小同步缩放*/background-size: cover;/* 图片的位置居中靠左对齐*/background-position: center 0;width: 50px;height: 40px;
}

window.addEventListener('pageshow',function () {var cloud = document.querySelector('.cloud');var img = cloud.querySelector('.img');var lis = cloud.querySelectorAll('li');//图片最初的位置var imgLeft = img.offsetLeft;// 为每个li标签添加鼠标事件for (var i = 0; i < lis.length; i++) {// 鼠标悬浮事件lis[i].addEventListener('mouseenter',function () {animate(img,this.offsetLeft,15);})// 鼠标离开事件lis[i].addEventListener('mouseleave',function () {animate(img,imgLeft,15);})// 鼠标点击事件lis[i].addEventListener('click',function () {imgLeft = this.offsetLeft;// 采用排他思想  去除其他的current选中样式for (var i = 0; i < lis.length; i++) {lis[i].className = '';}this.className = 'current';})}
})

js+html+css筋斗云导航栏相关推荐

HTML+JS+CSS筋斗云导航栏效果
要求: 1.鼠标经过某个li,筋斗云跟着到当前的位置 2.鼠标离开这个li,筋斗云回到原来的位置 3.鼠标点击了某个li,筋斗云就留在点击这个位置 <!DOCTYPE html> < ...
css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏需要达到的效果: 默认首页选中样式设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化所涉及的知识点: 布局:float css: 元素状态切换(displ ...
js: 动画筋斗云导航栏仿淘宝关闭二维码
筋斗云导航栏 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
html导航图片滚动条,CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在标签中让元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: ul.na ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
HTML+CSS伸缩式导航栏
HTML+CSS伸缩式导航栏几天制作伸缩式导航栏首先确立一个结构接下来是html代码 <!DOCTYPE html> <html><head><meta ...

js+html+css筋斗云导航栏

功能简述

实现原理

实现代码

js+html+css筋斗云导航栏相关推荐

最新文章

热门文章