摘 要：网页制作是中职学校电子商务、计算机网络应用等专业的必修课程，而网页导航条的制作一直都是网页制作课程的重点，方法" />
免费阅读期刊
论文发表、论文指导
周一至周五
9：00&22：00
HTML5中利用“滑动门”技术制作精美导航
　　摘 要：网页制作是中职学校电子商务、计算机网络应用等专业的必修课程，而网页导航条的制作一直都是网页制作课程的重点，方法种类繁多、效果各有不同。这里主要探讨和研究利用最新的“滑动门”技术来制作精美的导航条效果，通过实际的案例为大家抛砖引玉，分析由网页制作在HTML5+CSS3变革下衍生出的新的布局方法在导航条上的具体应用。 中国论文网 http://www.xzbu.com/8/view-6411905.htm　　关键词：滑动门；HTML5+CSS3；网页制作；导航条；水晶按钮 　　中图分类号：TP393.092 　　随着互联网技术的发展，这门课程几乎每年都在发生变化。如今，网页制作方法已经由原来的table嵌套式布局完全转向了更加标准的HTML5+CSS3布局，这使网页制作方法有了翻天覆地的变化，各种新方法、新技术如雨后春笋般不断涌现。“滑动门”技术也在此时应运而生，它可以仅仅使用一张图片就完成各种宽度不同的圆角背景显示，自适应文字的宽度。这就大大减少了图像的应用和流量的浪费，加快了网页的浏览速度。因此，“滑动门”技术成为目前比较流行的网页制作方法之一，得到了广泛的应用。 　　那么，什么是“滑动门”技术呢？ 　　当在导航文字中设置鼠标滑过时显示圆角矩形框时，因为每个文字的长度不同，所以传统的方法是给每个导航文字各绘制一个单独长度的圆角矩形，每个导航显示不同的图像。这样做不仅复杂，而且造成图像使用多，访问流量增加。因此，技术的更新时必要的，那就是使用“滑动门”技术来制作。 　　首先分析下滑动门技术的核心原理：在每个导航文字的两边各利用一个标签来设置同一张圆角矩形背景图像，当两个相同的圆角矩形相向滑动时，它们会重叠一部分，当中间文字区域较大时，重叠就少一些；而中间文字区域较小时，重叠就多一些。两个图像在文字两边滑动，重叠的部分的宽度会根据中间区域自动调整，而由于标签设置内填充，所以两边的圆角始终显示，圆角矩形就像两扇推拉门一样，因此这种技术被称为“滑动门”。 　　分析了原理，通过一个实际案例详细了解滑动门技术的具体应用。那就是制作一个如图1所示的鼠标经过时显示圆角矩形的精美导航条效果。 　　图1 　　为了表现出立体的视觉效果，以及水晶按钮的质感，制作中必须借助图像才可以完成。分别使用如下图2所示的4个图像表现效果，其中nav_bg.png是作为整个导航的背景色平铺使用的，nav_left.gif和nav_right.gif是导航整体两侧的圆角。nav_hover.png则是当鼠标指针经过菜单项的时候显示出来的。它在这里就充当了滑动门的角色，只要在文字内容两边设置标签作为“钩子”把它“挂”起来就可以了。这里只使用这一张图像来制作所有导航文字的滑过效果，不过有一点要注意，那就是这张图片一定要比所有导航文字都要长，不能比任何导航文字短，而且最好要长至少1/3。 　　图2 　　思路清楚了就可以制作了，由于导航左右各有圆角组成，所以先编写相应的HTML代码。传统的制作方法使用table的嵌套，可以使用1行5列的表格制作。但是，为了更好的适应“滑动门”技术，这里使用HTML5+CSS3方法来做，这样可以更好的精简代码，也是大势所趋。具体代码如下： 　　 　　
【xzbu】郑重声明：本网站资源、信息来源于网络，完全免费共享，仅供学习和研究使用，版权和著作权归原作者所有，如有不愿意被转载的情况，请通知我们删除已转载的信息。
xzbu发布此信息目的在于传播更多信息，与本网站立场无关。xzbu不保证该信息（包括但不限于文字、数据及图表）准确性、真实性、完整性等。当前位置： >
HTML5触屏滑动侧边栏导航菜单特效
特效说明：
一款HTML5触屏滑动侧边栏导航菜单特效下载，该Bootstrap导航菜单特效是一款基于jquery+html5实现的兼容手机和PC端动画导航菜单插件，响应式网站建设必备代码素材。请用支持HTML5+CSS3主流浏览器预览效果。（兼容测试：IE9、Firefox、Chrome、Opera、Safari、360等支持HTML5+CSS3主流浏览器）
使用方法：
1、调用CSS样式：
&link rel=&stylesheet& href=&css/bootstrap.min.css&&
&link rel=&stylesheet& type=&text/css& href=&css/default.css&&
&link href=&css/offcanvas.min.css& rel=&stylesheet& type=&text/css&&
2、调用JS插件代码：
&script type=&text/javascript& src=&js/jquery-2.1.1.min.js&&&/script&
&script type=&text/javascript& src=&js/offcanvas.js&&&/script&
3、添加HTML代码：
将&!--效果html开始--&......&!--效果html结束--&之间的html和js代码；放在&body&&/body&之间。
一款HTML5音乐录音播放动画网页特效，该HTML5动画是一款背景音乐符号动画，以及麦克风录音动画实例教程。……
HTML5+svg手机图标菜单动画切换特效下载，该HTML5特效代码是一款适合移动端、手机端展开/收缩导航菜单特效。……
一款jQuery层叠展示导航菜单响应式网页框架下载，该网页框架源码是一款点击菜单按钮，各个子菜单会以卡片的形式堆叠排列在窗口中，点击相应的子菜单就会切换到相应的页面上。……
一款HTML5+Canvas指针大转盘抽奖代码下载，该HTML5特效是一款基于canvas实现的转盘及指针，各奖项和分区颜色可随意设置。……
一款HTML5-canvas商品360度旋转展示网页效果下载，该HTML5商品图片360度旋转浏览效果、全视角查看效果。……
一款CSS3鼠标悬停动画下拉显示二维码菜单特效代码下载，该JS特效是一款基于CSS3+JS实现的鼠标滑过向下动画显示二维码以及二级菜单特效代码。……
一款jQuery鼠标悬停上下翻滚动画切换状态导航菜单网页特效，该JS导航菜单代码是一款兼容所有主流浏览器（包括IE6）蓝色好看的鼠标响应式网站导航菜单特效。……
一款jQuery垂直多级导航菜单代码特效免费下载，该JS代码是一款黑色风格的jQuery竖直导航菜单特效，可用于移动端、手机端导航菜单。……
一款jQuery游旅网站动画导航网页特效，该JS代码是一款旅游网站带遮罩动画效果鼠标跟随jQuery导航菜单，web前端导航菜单代码教程。……
一款Bootstrap响应式页面布局带悬浮导航菜单网页特效，根据不同分辨率显示不同尺寸布局，带二级下拉菜单的jQuery悬浮导航，导航可跟随页面滚动一直出现在顶部，缩小到移动端出现A……
最新更新特效
本站关键词
科e互联版权所有
京ICP备号-1欢迎来到潇风工作室！
本站会员886人　客服热线：&&
本站提供的教程不是采集或者从别的地方复制而来的，所有教程和方法都亲测可用。
本站提供的模板，均为原创，无论是免费版还是共享版，都经过严格的测试，兼容性各主流浏览器。代码标准、简练，全方位优化。
JS代码 就是用JavaScript编写的脚本文件，它能增加网页的交互性，功能强大，扩展名为 .js。
本站拒绝滥竽充数，给你最清晰、最实用的网页素材和工具软件。
设计之道关注视觉设计、交互设计、广告设计、前端开发、网站优化等。
真正实用的仿今日头条app触屏滑动导航
今日头条app触屏滑动导航站长都比较喜欢，网上也有不少仿品。
这些仿品实际上相当于tab选项卡，只能用在一个页面，用做栏目导航就不行了，而且这些仿品套用了不必要繁杂代码，影响滑动效果和网站运行速度。
本人经过研究，打造出&真正实用的仿今日头条app触屏滑动导航&，代码简练，效果非常好。
关键是本程序可以用于任何栏目，当前栏目高亮，栏目名称位置超出导航条的时候自动居中。
本程序兼容所有手机端浏览器，兼容微信、今日头条浏览器。
请扫描二维码访问手机站!当前位置 :
使用邮箱登录17素材
已连续签到1天,签到3天将获得积分VIP1天来源：　代码整理：　感谢：
＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。
实用导航上下滑动及左右切换效果，兼容性较好，懒人图库推荐下载！使用方法：1、head区域引用文件 jquery.js，home.js，style.css2、在文件中加入&!-- 代码 开始 --&&!-- 代码 结束 --&区域代码}