`

带下滑动图片展示的导航菜单js特效代码...

 
阅读更多
先看一下效果 


<!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></title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript"> 
$(function(){
 $(".list>li:has(div)").hover(function(){
   $(this).children('a').addClass('red').end().find('div').slideDown("fast");},
  function(){
   $(this).children('a').removeClass('red').end().find('div').slideUp("fast");
  });
 });
</script>
<style>
*{margin:0;padding:0}
body{background:#F8F3ED}
li{list-style:none}
.list{height:40px;background:#fff;padding-left:100px;}
.list li{float:left;position:relative;}
.list li a{float:left;width:100px;height:40px;line-height:40px; text-align:center;color:#B7B7B7;text-decoration:none; font-family:"微软雅黑";}
.list li a:hover{background:#99C228;color:#FFF;}
.list .box{position:absolute;top:40px;left:0;display:none;width:240px;height:170px;background:#99C228;color:#FFF;}
.list .box img{width:220px;height:150px;margin:10px;}
.list li a:hover,.red{background:#99C228!important;color:#FFF!important;}
</style>
</head>

<body>
<ul class="list">
 <li>[url=javascript:;]上一页[/url]
     <div class="box">[img]http://www.alixixi.cn/skins/GRAY2010/logo3.gif[/img]</div>
    </li>
 <li>[url=javascript:;]下一页[/url]
     <div class="box">[img]http://www.alixixi.cn/images/index/t1.gif[/img]</div>
    </li>
</ul>
</body>
</html>
  • 大小: 9.3 KB
0
顶
8
踩
分享到：
| UDP协议入门
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQuery&CSS;&CSS;+DIV实例大全.rar

    59.jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏...

    jquery 动态示例

    59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏...

    100多个JQuery效果示例（实例）div+css+javascrpit

    59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能 61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏...

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    101:索尼中国Flash+Xml广告 下载 102：弹性菜单样式的图片展示 下载 103:带摘要的Flash图片代码下载 104：JS图片卷帘门效果下载 105:3d图片墙flash+xml 下载 106：360度旋转展示flash+xml 下载 107:带翻页的JS图片...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    101:索尼中国Flash+Xml广告 下载 102：弹性菜单样式的图片展示 下载 103:带摘要的Flash图片代码下载 104：JS图片卷帘门效果下载 105:3d图片墙flash+xml 下载 106：360度旋转展示flash+xml 下载 107:带翻页的JS图片...

    程序天下:JavaScript实例自学手册

    11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹...

    《程序天下：JavaScript实例自学手册》光盘源码

    11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...

Magicbox
Global site tag (gtag.js) - Google Analytics