效果如下,当用户在导航栏上移动时,会有动画效果.
一般选中模式(当前为15页)
mouse移动时的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
#channel-page
{
}
#channel-page form
{
margin: 0;
padding: 0;
}
#channel-page input#page
{
width: 25px;
line-height: 15px;
font-size: 12px;
margin: 0;
padding: 0;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #DBDBDB;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
text-align: center;
font-weight: 700;
color: #666;
}
#channel-page input#go
{
width: 25px;
margin: 0;
line-height: 11px;
background-color: #FFF;
font-size: 11px;
border: 1px solid #FFF;
padding-top: 3px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-weight: 700;
color: #666;
}
#channel-page ul#channel-page-show
{
clear: both;
display: inline;
float: left;
margin: 20px;
list-style-type: none;
}
#channel-page ul#channel-page-show li
{
display: inline;
float: left;
height: 20px;
width: 23px;
padding-top: 0;
padding-right: 2px;
padding-bottom: 0;
padding-left: 2px;
margin-top: 2px;
margin-right: 0;
margin-bottom: 2px;
margin-left: 0;
}
#channel-page ul#channel-page-show li a
{
border-right: #999 1px solid;
border-top: #999 1px solid;
display: block;
font-weight: 700;
font-size: 12px;
border-left: #999 1px solid;
width: 20px;
color: #666;
line-height: 20px;
border-bottom: #999 1px solid;
height: 20px;
background-color: #fff;
text-align: center;
text-decoration: none;
padding-right: 2px;
padding-left: 2px;
}
#channel-page ul#channel-page-show li a:hover
{
font-size: 20px;
z-index: 100;
width: 40px;
line-height: 40px;
position: absolute;
height: 40px;
margin-top: -10px;
margin-right: 0;
margin-bottom: 0;
margin-left: -10px;
}
#channel-page ul#channel-page-show li a.page-select
{
color: red;
}
#channel-page ul#channel-page-show li#channel-page-count
{
border-right: #999 1px solid;
border-top: #999 1px solid;
display: block;
font-weight: 700;
font-size: 12px;
border-left: #999 1px solid;
width: 50px;
color: #666;
line-height: 20px;
border-bottom: #999 1px solid;
height: 20px;
background-color: #fff;
text-align: center;
text-decoration: none;
padding-top: 0;
padding-right: 2px;
padding-bottom: 0;
padding-left: 2px;
margin-right: 1px;
margin-left: 1px;
}
#channel-page ul#channel-page-show li#channel-page-form
{
border-right: #999 1px solid;
border-top: #999 1px solid;
display: block;
font-weight: 700;
font-size: 12px;
border-left: #999 1px solid;
width: 52px;
color: #666;
line-height: 20px;
border-bottom: #999 1px solid;
height: 20px;
background-color: #fff;
text-align: center;
text-decoration: none;
padding: 0;
margin-right: 1px;
margin-left: 1px;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="channel-page">
<ul id="channel-page-show">
<li id="channel-page-count">1/100</li>
<li><a href="/News/1.html"><<</a></li>
<li><a href="/News/10.html"><</a></li>
<li><a href="/News/11.html">11</a></li>
<li><a href="/News/12.html">12</a></li>
<li><a href="/News/13.html">13</a></li>
<li><a href="/News/14.html">14</a></li>
<li><a href="/News/15.html" class="page-select">15</a></li>
<li><a href="/News/16.html">16</a></li>
<li><a href="/News/17.html">17</a></li>
<li><a href="/News/18.html">18</a></li>
<li><a href="/News/19.html">19</a></li>
<li><a href="/News/20.html">></a></li>
<li><a href="/News/100.html">>></a></li>
<li id="channel-page-form">
<input name="page" type="text" id="page" maxlength="5"><input type="button"
id="navButton" value="GO" onclick="var intstr=/^\d+$/;if(intstr.test(page.value)&&page.value<=100&&pagejump.page.value>=1){location.href='/News/' + page.value + '.html';}">
</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
一段Js代码根据一天中的时间将移动Chrome导航栏颜色更改为天空颜色
这是一个网站前端，在同一页面，导航切换道不同分页面。用到bootstrap框架，不需要CSS、JS文件。将文档复制即可使用。
HTML5 CSS3实现的3D导航特效源码是一段基于HTML5 CSS3 jquery实现的具有3D动态效果的导航菜单效果代码，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用，本段代码兼容目前最新的各类主流浏览器，是一...
一、理解特效导航栏：首先打开范例文件，观察特效导航栏的效果，看看实现这个特效的HTML代码是那一段。然后查看原文件夹中相关文件是否存在如：在JS文件夹中找脚本文件(也许是内嵌的)，在CSS文件夹中找一下样式表...
这篇作业要求我们设计一个简单的网页，其中包括以下几个要素： - 页面标题 - 导航栏 - 轮播图 - 一段文字 - 一组图片 - 页脚 我们将使用HTML和CSS来实现这个网页
CSS3实现的15种二级下拉导航加载动画特效源码是一段实现了15种响应时二级菜单导航加载动画效果，当鼠标放在一级菜单导航时，二级菜单会响应动画加载，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。...
这是一款基于jQuery蓝色风格滑动导航栏特效源码，实现滑块跟随鼠标左右滑动，和一般的导航相比很有动感，是一段超酷的导航栏滑动代码。 使用方法： 1、依次引入 nicenav.css、jQuery脚本库以及 jquery.nicenav.js ...
js学了一段时间了，拿小米的官网练练手，这些代码是实战练习时写的，动画效果基本实现，包含导航栏下拉切换，商品橱窗切换等。本人也是初学者，代码仅供参考，欢迎大家点赞和评论。
jQuery+CSS3制作鼠标悬停动画导航条特效源码是一款基于jQuery跟CSS3制作的鼠标悬停导航条动画效果代码。本段代码可以在各个网页使用，有需要的朋友可以直接下载使用，本段代码兼容目前最新的各类主流浏览器，是一款...
在标签中，首先显示了一个导航栏，其中包含四个链接：Dashboard、Users、Products和Orders。 然后，使用标签定义了页面的主要部分。在这个部分中，分别展示了以下三个部分： Dashboard部分，包含一个欢迎标题。可以...
就比如今天要介绍的一款CSS3 3D横向菜单，整个菜单栏会随着鼠标移动而倾斜，产生一种3D立体的视觉效果，同时鼠标滑过菜单项时，菜单项也会凸出显示，是一款非常华丽而具有个性化的CSS3菜单导航插件。
这里用CSS控制文字显示在一条线的中间，常见于网站首页的各个版块导航处，给人的感觉是结构更清淅，这是一段实现这种功能的CSS代码，举一返三，你可以把它用到其它地方。 复制代码代码如下:<!DOCTYPE ...
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。先看图（图片...
有一段时间没有亲自写一些小效果了 今天终于能从工作中轻松下，突然不知道还有哪些没写的 想了半天，还是写个常见的一种布局的方式吧 我们经常能看到一些网站的后台管理系统，左侧竖导航往往都是一个固定的...
2、导航条：主要包括主页、慕课网、图书等子项目； 3、轮播图：展示教学产品和职前规划等内容； 4、阶段成长：主要跟踪学习的过程； 5、资源课程的介绍； 6、联系方式和合作伙伴； 7、注销等功能。
元主题天空色Js片段，可根据一天中的时间将移动Chrome浏览器导航栏的颜色更改为天空的颜色。 通过将document.querySelector('meta[name="theme-color"]')替换为div或css类等，可以对其进行修改以更改任何document....
typewriter 让一段文字以打字的效果出现 gradient_text 在网页里生成一段色彩渐变的文字 footnote 增加一个弹出的注释，就像image 的alt=…… ie_favicon 你只需要一个漂亮的ico格式图片，您的地址栏IE图标将...
typewriter 让一段文字以打字的效果出现 gradient_text 在网页里生成一段色彩渐变的文字 footnote 增加一个弹出的注释，就像image 的alt=…… ie_favicon 你只需要一个漂亮的ico格式图片，您的地址栏IE图标将...
导航栏具有滚动效果 导航栏带有黑暗模式切换 贡献 分叉此仓库，添加您的组件，然后将其作为拉取请求提交。 用适当的名称组织文件夹中的代码。 请不要在文件夹名称中使用空格。 仅为每个组件添加必要的代码。 将...
介绍（免积分下载） 是一个用来介绍个人游戏的主页，适用于移动和PC端，是本人一个前端期末结课作业 软件架构 html + css + javascript + jquery +vue ...点击导航栏即可浏览不同的模块 详细情况请看我的文章介绍 ...