Other_2.利用JQ伸缩变动导航栏宽度的效果。
来源：互联网 发布：java宿舍管理系统源码 编辑：程序博客网 时间：2024/05/03 16:20
上一个博文是用JS代码来动态改变导航栏的宽度，但是BUG也同时存在，这次我们就用JQ来写。JQ代码写的好处是导航栏在伸缩的时候更加自然，流畅，并且当用户快速在导航栏之间切换的时候，不会出现文字变成竖型排列。当然，使用JQ代码的时候，需要提前在网上下载一个JQ库。JQ库网上有很多，这里就不再提供链接了，有需要的朋友自行百度下载。
<html>
<head>
<meta charset="utf-8">
<title>JQ伸缩变动导航栏效果</title>
<style>
*{margin: 0;padding: 0;text-decoration: none;list-style: none;}
nav{width: 100%;height: 40px;border-bottom: 10px solid #FC751B;}
nav ul{margin:20px 0 0 20px;width: 800px;}
nav ul li{float: left;height: 40px;margin-right: 5px;background: #EAEAEA;line-height: 30px;}
nav ul li a{display: block;width: 120px;height: 30px;color:#000;text-align: center;padding:5px 0}
nav ul li a:hover{background: #FC751B;color:#fff;}
</style>
<script type="text/javascript" src="../JQuery/jquery.min.js"></script>
<script>
$(function(){
$('a').hover(
function(){
$(this).animate({"width":"160px"},300);
},
function(){
$(this).animate({"width":"120px"},300);
}
)
})
</script>
</head>
<body>
<div class="box">
<nav>
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</div>
</body></html>
效果是和JS代码写得差不多，但是更加流畅自然。这个案例建议是使用JQ代码编写。
0 0
- Other_2.利用JQ伸缩变动导航栏宽度的效果。
- Other_1.利用JS伸缩变动导航栏宽度的效果。
- 伸缩导航菜JQ
- html+ js+ jq+css导航条菜单的制作(水平，竖直，伸缩，带有动画效果等等。。。)
- Other_6.利用JQ作出，点击导航栏，所需内容渐入渐变的效果
- HTML水平导航栏伸缩效果
- 利用javascript让导航栏响应伸缩
- 基于jq的导航栏元素划入效果
- 可以伸缩的导航栏
- JQ带滚动效果的导航条
- jQuery 导航菜单点击伸缩展开效果的JS特效
- 利用JQ实现简单的拖曳效果
- 伸缩JQ
- 网页导航伸缩及圆角效果
- Jquery10_伸缩的导航条
- QML侧边伸缩导航栏
- QML侧边伸缩导航栏
- jq 动态添加.active 实现导航效果
- asp中如何判断数据插入成功失败
- leetcode -- 338. Counting Bits 【动态规划】
- 如何在Android Studio添加本地aar包引用
- android studio使用Bmob来实现登录注册的功能
- web富文本编辑器的选择のxheditor
- Other_2.利用JQ伸缩变动导航栏宽度的效果。
- python自定义模块
- WebSocket简单应用
- jstree的简单使用例子
- Android视图SurfaceView的实现原理分析
- 不通过cmake，直接查看opencv函数的源代码
- iOS应用内添加指纹识别
- centos7 安装MySQLdb-python 报错 解决方案
- NVIDIA查看显卡型号
