JS鼠标悬停滑动效果导航条.zip资源-CSDN文库

共8个文件

png：3个

js：2个

jpg：1个

版权申诉

javascript

html5

jQuery

154 浏览量 2022-11-24 12:31:15 上传评论收藏 47KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

JS鼠标悬停滑动效果导航条.zip （8个子文件）

JS鼠标悬停滑动效果导航条

JS鼠标悬停滑动效果导航条.jpg 29KB

jiaoben3594

css

sNav.css 4KB

images

sNav.png 6KB

navIcon.png 2KB

gitHub.png 10KB

index.html 5KB

sNav.js 3KB

sNav.min.js 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS鼠标悬停滑动效果导航条 - 网页模板</title> <link rel="stylesheet" href="css/sNav.css"> <script src="js/sNav.min.js"></script> </head> <body> <div id="header"> <img src="images/sNav.png" alt="" id="headImg"> <h1>sNav</h1> <h2>这是一个简单的原生JavaScript插件，它可以用作导航栏，也可以作为按钮组，搭好结构后，只需要一些十分简单的设置即可让你的导航栏炫酷起来（兼容IE8及以上），简单好用，快来下载用起来吧。</h2> </div> <ul class="sNav"> <a href="#"><li>sNav</li></a> <a href="#"><li>导入sNav.js</li></a> <a href="#"><li>搭建结构</li></a> <a href="#"><li>执行语句</li></a> <a href="#"><li>简单使用</li></a> <a target="_blank" href="http://www.moobnn.com/"><li>sNav.js</li></a> <a target="_blank" href="http://www.moobnn.com/"><li>sNav.min.js</li></a> </ul> <div id="part1" class="part"> <h2>一句话使用sNav</h2> <div class="partWrap"> <h3>1.导入sNav.js</h3> <pre style="text-align:center;"><script src="somewhere/js/sNav.js > </script></pre> <h3>2.将结构搭好</h3> <pre class="p1pre1" style="font-size:18px;"> <ul class="example1"> <a href="#"> <li>HOME</li> </a> <a href="#"> <li>COMMUNITY</li> </a> <a href="#"> <li>MUSIC</li> </a> <a href="#"> <li>PHOTOGRAPHY</li> </a> <a href="#"> <li>NEWS</li> </a> <a href="#"> <li>MESSAGE</li> </a> <a href="#"> <li>NOTICE</li> </a> </ul> </pre> <pre class="p1pre1" id="p1pre1Right"> <strong> .sNav{ background: rgb(0, 216, 224); height: 60px; padding: 0; margin: 0 auto; width: 1059px; } .sNav>a{ font-size: 20px; list-style: none; float: left; text-decoration: none; position: relative; font-weight: bold; overflow: hidden; } .sNav>a li{ background: rgb(0, 216, 224); padding: 0px 30px; text-align: center; color: white; height: 60px; line-height:60px; } .sNav>a span{ background: #FFB739; text-align: center; color: white; display: block; } </strong> </pre> </div> <ul class="example1"> <a href="#"><li>HOME</li></a> <a href="#"><li>COMMUNITY</li></a> <a href="#"><li>MUSIC</li></a> <a href="#"><li>PHOTOGRAPHY</li></a> <a href="#"><li>NEWS</li></a> <a href="#"><li>MESSAGE</li></a> <a href="#"><li>NOTICE</li></a> </ul> <h3 id="p1h2">3.只需执行这条语句</h3> <pre id="p1pre2">var example1 = new sNav('example1');<button id="example1Btn">点击执行这条语句</button></pre> <h3 id="p1h3">4.再把鼠标移上去看看</h3> <img id="part1arrow" src="images/arrow.png" height="300" width="200px" alt="" /> </div> <div id="part2" class="part"> <h2>sNav的设置</h2> <div class="row"> <div class="left"> <h4>设置原按钮样式</h4> <p>原按钮的样式设置，取决于对ul下的a和li的设置。需要设置好浮动、元素宽度、高度、填充、背景、行高等属性</p> </div> <div class="right"> <pre> .example2 { height:60px; margin: 20px auto; width:1059px; } .example2 > a { font-size:20px; list-style: none; float:left; text-decoration: none; position: relative; font-weight:bold; overflow: hidden; } .example2 > a li { background:rgb(0, 216, 224); padding:0px 30px; text-align: center; color:white; height: 60px; line-height:60px; }</pre> </div> </div> <div class="row"> <div class="left"> <h4>设置hover时按钮的样式</h4> <p>设置hover时滑入的按钮样式，只需要为设置a下的span添加样式，通常只需要设置背景颜色和文字大小颜色</p> </div> <div class="right"> <pre> .example2 > a span { background:#FFB739; text-align: center; color: white; } </pre> </div> </div> <div class="row"> <div class="left"> <h4>设置特殊的移入文字效果</h4> <p>如果你不想让移入效果一成不变，你可以通过这个方法，自定义设置移入元素内的文字</p> </div> <div class="right"> <pre>example2.setText({ "1":"abc", "4":"hehe" });</pre> </div> </div> <div class="row"> <div class="left"> <h4>设置效果预览</h4> <div class="example2wrap"> <ul class="example2"> <a target="_blank" href="http://www.moobnn.com/"><li>sNav.js</li></a> <a href="http://www.moobnn.com/"><li>sHover</li></a> <a href="http://www.moobnn.com/"><li>我的博客</li></a> </ul> </div> </div> <script> var example2=new sNav('example2'); example2.setText({ "0":"下载(2.1k)", "1":"这是啥", "2":"去逛逛" }); </script> <div class="right"> <pre>example1.setText({ "0":"下载(3.2k)", "1":"这是啥", "2":"去逛逛" });</pre> </div> </div> </div> <script> var sNav1=new sNav('sNav'); sNav1.setText({ "5":"下载(3.5k)", "6":"下载(2.1k)" }); //------------------------- var example1Btn=document.getElementById('example1Btn'); example1Btn.onclick=function(){ var example1=new sNav('example1'); } </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉