当前位置: 奥门金沙手机娱乐网址 > 服务器 > 正文

奥门金沙手机娱乐网址:JQuery实现绚丽的横向下

时间:2019-11-23 20:09来源:服务器
很简单几行代码就可以实现整个页面的连接效果.复制代码代码如下:-//W3C//DTDXHTML1.0Transitional//EN"";$.ready{ $.css; $.css; $.css("background-image","url; $.css;$.children().css; $.children().css("padding-left","12

很简单几行代码就可以实现整个页面的连接效果.复制代码 代码如下:-//W3C//DTDXHTML1.0Transitional//EN""; $.ready{ $.css; $.css; $.css("background-image","url; $.css; $.children().css; $.children().css("padding-left","12px"); $.children().css("background-image","url; $.children().css("background-repeat","no-repeat"); $.children().css("background-position","leftcenter"); $.children().mouseover.css("background-image","url; $.css; }); $.children{ $.css("background-image","url; $.css; }); } );

以前经常看见网站有菜单的显示,鼠标移上去就出现下拉的效果,很绚丽,经过看JQuery视频后,发现实现也挺容易的。 Html中,通过

无标题文档

  • 标签将所需的元素写出来。 复制代码 代码如下:

    • 菜单项1
      • 子菜单项11
      • 子菜单项12
    • 菜单项2
      • 子菜单项21
      • 子菜单项22
    • 菜单项3
      • 子菜单项31
      • 子菜单项32

    最外围的

    • 即为菜单项1、菜单项2、菜单项3,下拉菜单分别在各主菜单之下,如果菜单最外层为ul,一层每个主菜单放在一个li中,如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套即可构建多层的菜单。 CSS中 复制代码 代码如下: ul,li{ /*清除ul和li上的小圆点*/ list-style:none; } ul{ /*清除子菜单的缩进值*/ padding:0; margin:0; } .hmain{ background-image:url; //前面的小三角 background-repeat:repeat-x; width:120px; } li{ background-color:#奥门金沙手机娱乐网址,EEEEEE; //背景图片覆盖背景色 } a{ //取消所有的下划线 text-decoration:none; padding-left:20px; display:block; /*块集元素可充满区域*/ display:inline-block; width:100px; padding-top:3px; padding-bottom:3px; } .hmain a{ color:white; background-image:url(../images/collapsed.gif); background-repeat:no-repeat; background-position:3px center; } .hmain li a{ color:black; background-image:none; } .hmain ul{ display:none; } .hmain{ float:left; margin-right:1px; } Html中引用js文件jquery.js和menu.js,其中menu.js如下: 复制代码 代码如下: $.ready{ //页面中的DOM已经装载完成时,执行的代码 $.click{ //找到主菜单项对应的子菜单项 var ulNode=$; ulNode.slideToggle); }); $.hover.children ; changeIcon); },function.children; changeIcon); }); }); /* *修改主菜单的指示图标 */ function changeIcon{ if{ if(mainNode.css.indexOf{ mainNode.css("background-image","url('images/expanded.gif')"); }else{ mainNode.css("background-image","url('images/collapsed.gif')"); } } } 这样绚丽的下拉菜单就完成了。实现很简单,不过里面的小知识点很零碎。例如:.main a和.main>a的不同之处,前者选择使用.main的这个class的元素内容所有的a节点,后者只选择.main的子节点中的a节点。 这样的例子应用性很强,在网站中使用让界面显得更加的美观,例子才看3个,抓紧时间继续看...
  • 例表第一项
  • 例表第一项
  • 例表第一项
  • 例表第一项
  • 例表第一项
  • 例表第一项
  • 例表第一项
  • 例表第一项
  • 例表第一项

编辑:服务器 本文来源:奥门金沙手机娱乐网址:JQuery实现绚丽的横向下

关键词:

  • 上一篇:没有了
  • 下一篇:没有了