这是一款基于jQuery蓝色风格滑动导航栏特效源码，实现滑块跟随鼠标左右滑动，和一般的导航相比很有动感，是一段超酷的导航栏滑动代码。 使用方法： 1、依次引入 nicenav.css、jQuery脚本库以及 jquery.nicenav.js 文件； 2、到页面中即可。 3、可以在代码中的 $.nicenav( )括号中设置滑块的滑动速度。 源码下载地址为大家分享的jQuery蓝色风格滑动导航栏代码如下 <head><style type="text/css">#bg { background-color: rgb(102, 1...
这里是要实现导航的左侧并选中的，此功能需引用jquery 左侧导航： <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" re...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习导航栏的制作</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function() { $(".div1").click(function() { $(".div2").addClass("dlHover"); }); $(".div1").hover(function(){//第一个函数作为鼠标悬浮时执行的函数 $(this).addClass("bg"); },function(){//第二个函数作为鼠标离开时执行...
如下所示; 代码如下:<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">function change_bg(obj){ var a=document.getElementById("Menu").getElementsByTagName...
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。 默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。 使用 data-role="navbar" 属性来定义导航栏： 代码如下:<div data-role="header"><div data-role="navbar"><ul><li><a href="#anylink">Home</a></li><li><a href="#anylink">Page Two</a></li><li><a href="#anylink">Search</a></li></ul></div></div>默认情况下，按钮的宽度与它的内容一...
基于sencha touch 2.2所写 代码：代码如下:/**模仿tabpanel导航栏*/Ext.define(ux.TabBar, { alternateClassName: tabBar, extend: Ext.Toolbar, xtype: tabBar, config: { docked: bottom, cls: navToolbar, layout: { align: stretch }, defaults: { flex: 1 }, //被选中的按钮 selectButton: null }, initialize: function (...
JS-实现导航栏悬停 先布个局： 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script type="text/javascript" src="test.js"></script> <link rel="stylesheet" type="text/css" href="test.css"></link...
上次【JS-实现导航栏悬停】说到，导航栏悬停的那个页面在IE上运行的时候，会出导航栏不停的抖动问题。解决方法如下： 将导航栏的定位方式由原来的absolute改为fixed，也不知道为什么改为fixed，就不抖了。。-_-|| 代码如下:div.navigation{ width: 800px; height: 40px; background: red; margin: 4px auto 0; top: 400px; left: 0px; position: fixed; } 为此，JS也得做相应的修改。 因为fixed定位是根据浏览器的可视区进行定位...
【JS-实现导航栏悬停】 【JS-实现导航栏悬停（续）】 用Jquery重新写完这个页面之后，发现原来的方法还有是有几个问题： 1.首先Js代码冗余，导航条上的Tab是用js实现跳转而不是超链接； 2.还有导航条本身用fixed定位，但没有被设置为水平居中，而是在JS中更改left值使其居中。 问题2就导致了，当浏览器窗口尺寸发生变化的时候，浏览器中的div的位置都发生了变化，也就导致了没法通过页面中的div动态的给已fixed定位的导航条来定位。...
处理问题时候遇到的,就顺便记录下, 代码如下:function OnOpenWin() { if (window.name != "OAopenWindow") { win = window.open("login.aspx", "OAopenWindow", "toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no,status=no,width=" + (screen.width - 5) + ",height=" + (screen.height - 38) + ",top=0,left=0"); if (win != null) { window.opener = null; window.open(, _self, ); window.close(); } // el...
最近比较清闲，自己做了个JavaScript NodeTree，网上类似的东西其实挺多的，功能也比这个全，我做这个纯粹为了练练手。 图标可以自定义（16X16），菜单项完全是JSON类型定义的，方便修改。 界面： 使用方法： 1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。 2、引用JQuery框架。 3、修改NodeTree-JSON.js中的NodeTreeMenu菜单项，以下是简单说明。 代码如下:var NodeTreeMenu = [ //id:节点ID，pId：父节点Id，没有父节...
代码如下:<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JQuery 浮动导航栏</title> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <style type="...
网上收集整合出来的，算是剽窃吧，IE6下用过，其他的没试。 SHARE BODY { MARGIN: 0px; } A.notes { FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: none } .MS_link0 { BORDER-RIGHT: #1e77d3 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #1e77d3 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; BORDER-LEFT: #1e77d3 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #1e77d3 1px solid } .MS_l...
全部 下载 关注 评论 收藏 分享 ...