`

带下滑动图片展示的导航菜单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协议入门
评论
发表评论

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

相关推荐

    最全最经典的JS 特效代码.rar

    本压缩包"最全最经典的JS特效代码.rar"收集了众多实用且经典的JS特效代码，对于前端开发者来说，这些代码是提升项目质量与用户体验的宝贵资源。 1. **滑动门/轮播图**：JS可以实现图片或内容的自动切换，这种效果...

    常用JavaScript特效代码.rar

    "常用JavaScript特效代码.rar"这个压缩包包含了若干简单实用的JavaScript特效代码，主要针对鼠标和图片效果。 1. 鼠标特效： - 鼠标悬停效果：在用户将鼠标悬停在元素上时，可以改变元素的样式，如颜色、透明度或...

    jQuery卡片堆叠展示导航菜单切换特效.zip

    在这个"jQuery卡片堆叠展示导航菜单切换特效"中，我们将深入探讨如何利用jQuery实现一种创新的导航菜单效果，使页面上的卡片在用户交互时以堆叠的形式进行展示和切换。 首先，我们来理解“卡片堆叠展示”这个概念。...

    9款图片滑动风格的jQuery图文菜单特效.rar

    总的来说，"9款图片滑动风格的jQuery图文菜单特效"集合了现代网页设计的诸多技巧和最佳实践，可以帮助开发者快速构建具有视觉吸引力且易于使用的导航菜单。学习并掌握这些知识点，对于提升网页设计水平大有裨益。

    javascript经典特效---图片下拉导航菜单.rar

    在"图片下拉导航菜单.htm"这个文件中，很可能会包含HTML结构、CSS样式以及嵌入的JavaScript代码，展示了一个完整的图片下拉导航菜单的实现。通过学习和理解这个示例，开发者可以了解到如何将JavaScript与HTML和CSS...

    jQuery响应式全屏背景图片导航菜单特效.zip

    本教程将详细介绍如何利用jQuery实现一个响应式的全屏背景图片导航菜单特效。 首先，我们需要了解jQuery。jQuery是一个轻量级、高性能的JavaScript库，简化了HTML文档遍历、事件处理、动画制作和Ajax交互。它的API...

    弹性菜单样式的图片展示代码.rar

    【标题】中的“弹性菜单样式”指的是在网页设计中一种响应式、自适应不同屏幕尺寸的导航菜单。这种菜单能够根据用户设备的屏幕大小自动调整布局，以提供最佳的用户体验。在移动设备普及的今天，弹性菜单是网页设计中...

    js特效集合.rar

    2. 导航菜单：动态导航菜单可以让用户更容易地浏览网站结构，例如下拉菜单、滑动菜单等，增加用户体验。 3. 滚动动画：随着用户滚动页面，某些元素可以做出响应，如淡入淡出、平滑滚动等，使得页面更加生动。 4. ...

    Win8风格Metro界面平板响应式导航特效代码.zip

    【Win8风格Metro界面平板响应式导航特效代码】 在当今多设备共存的时代，网站和应用需要具备良好的响应式设计，以适应不同尺寸的屏幕，包括平板电脑。Win8风格的Metro界面以其独特的磁贴设计，深受用户喜爱，特别是...

    javascript特效代码大全

    JavaScript特效代码大全是一份集合了各种JavaScript编程技巧和效果实现的资源库，涵盖了网页动态效果、用户交互、动画以及数据可视化等多个方面。这份大全旨在帮助开发者提升网站的用户体验，通过运用JavaScript的...

    jQuery无敌代码，各种图片滑动特效集合.rar

    本资源“jQuery无敌代码，各种图片滑动特效集合”则集中展示了jQuery在图片展示效果上的广泛应用，特别适合于网页设计者和前端开发者学习参考。 首先，jQuery的核心优势在于它对DOM（文档对象模型）的操作，使得...

    js特效脚本含源码和说明橘色超漂亮滑动二级导航菜单

    根据给定的文件信息，以下是对“js特效脚本含源码和说明橘色超漂亮滑动二级导航菜单”的知识点分析： 标题中提到了几个关键的技术点：“js特效脚本”、“源码”、“说明”以及“橘色超漂亮滑动二级导航菜单”。这些...

    整理1500个JS特效源码

    2. **导航菜单**：下拉菜单、折叠菜单等是网页设计中常见的JS特效。它们简化了复杂信息的展示，帮助用户更高效地浏览和导航网站。 3. **图片轮播**：图片轮播是网页设计中常用的一种视觉展示方式，通过JavaScript...

    纯CSS3实现手机APP滑动菜单动画特效源码.zip

    【标题】中的“纯CSS3实现手机APP滑动菜单动画特效源码”表明这是一个使用CSS3技术来创建的移动端应用导航菜单的代码示例。在移动设备上，滑动菜单通常用于节省屏幕空间，提供良好的用户体验。CSS3是层叠样式表的第...

    css jquery左右滑动展开的图文导航菜单.rar

    总的来说，"CSS jQuery左右滑动展开的图文导航菜单"是一个结合了前端技术的优秀实践，它展示了如何利用CSS的样式和jQuery的动态功能来提升网页的用户体验。通过掌握这一技术，开发者可以为他们的网站创造出更具吸引...

    swiper.js手机图片滑动切换代码.zip

    在"swiper.js手机图片滑动切换代码.zip"这个压缩包中，包含了一个使用Swiper.js实现的手机图片滑动切换代码实例，以及可能的一个说明文档（说明.htm）和一个未明确用途的文件（jiaoben5465）。 Swiper.js的核心特性...

    精美的css3左侧竖直分类导航菜单ui特效.zip

    总的来说，"精美的css3左侧竖直分类导航菜单UI特效"是一个结合了CSS3、jQuery和可能的jQuery插件的实例，展示了如何构建一个交互性强且视觉效果出色的网页元素。对于初学者和经验丰富的开发者来说，都是一个值得学习...

    JavaScript特效代码集.rar

    本资源“JavaScript特效代码集.rar”包含了多种JavaScript特效的代码实例，可以帮助开发者快速理解和应用这些效果。 1. **基础概念** - JavaScript是ECMAScript标准的实现，主要在浏览器环境中运行，为网页添加...

    国外漂亮的JS展示特效.rar

    这个压缩包很可能是收集了一些由国外开发者创建的优秀JavaScript特效代码示例，供学习和参考。 首先，我们要理解JS特效的基本原理。在网页中，JS通过操作DOM（文档对象模型）来改变页面内容和样式。例如，它可以...

    右对齐向左伸出的Js滑动菜单代码.rar

    总之，这个“右对齐向左伸出的Js滑动菜单”是一个利用JavaScript和CSS实现的动态导航菜单，通过鼠标悬停触发动画效果，为用户带来独特的交互体验。开发者可以学习和借鉴其实现原理，以便在自己的网页设计中加入此类...

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