【案例】百度新闻导航条

刺骨的言语ヽ痛彻心扉 2021-11-29 14:16 282阅读 0赞

<!DOCTYPE html>

<head>

<title>百度新闻导航条效果实现</title>

<style>

\*\{

margin:0;

padding:0;

a\{

text-decoration: none;

\#wrap\{

width: 100%;

height: 40px;

margin-top: 120px;

background: \#01204F;

\#wrap nav\{

width: 980px;

height: 40px;

margin: 0 auto;

position: relative;

\#wrap ul\{

position: relative;

z-index: 1;

\#wrap ul>li\{

list-style: none;

float: left;

height: 40px;

line-height: 40px;

padding: 0 10px;

\#wrap ul>li\#active\{

background: \#CC0000;

\#wrap ul>li>a\{

color: \#fff;

font-family: '微软雅黑';

font-weight: 700;

font-size: 14px;

display: block;

text-align: center;

\#move\{

background: \#CC0000;

height: 40px;

position: absolute;

transition: left 0.3s linear;

</style>

</head>

<body>

<nav>

</ul>

</nav>

</div>

</body>

//获取元素

var content = document.getElementById('content');

var lis = content.children;

var move = document.getElementById('move');

var active = document.getElementById('active');

console.log(move);

//设置滑块初始宽以及水平偏移值

move.style.width = active.offsetWidth + 'px';

move.style.left = active.offsetLeft + 'px';

for(var i = 0; i < lis.length; i++)\{

//鼠标移入事件onmouseover

lis\[i\].onmouseover = function()\{

move.style.width = this.offsetWidth + 'px';

move.style.left = this.offsetLeft + 'px';

//鼠标离开时间onmouseout

lis\[i\].onmouseout = function()\{

move.style.width = active.offsetWidth + 'px';

move.style.left = active.offsetLeft + 'px';

</script>

</html>

转载于:https://www.cnblogs.com/sherryStudy/p/baidu\_navbar.html

【案例】百度新闻导航条

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 NodeJs Express 爬取百度新闻

相关 Redis实战之百度首页新闻热榜

相关百度新闻爬虫

相关 Python 大规模异步新闻爬虫、google翻译、百度翻译、有道翻译、百度指数

相关导航篇之高德与百度

相关 C# 解析百度天气数据,Rss解析百度新闻以及根据IP获取所在城市

相关导航条

相关 HTML实现百度地图定位及导航功能

相关【案例】百度新闻导航条

相关百度周边案例弹性盒子