时间:2021-05-26
本文实例讲述了jquery实现的淡入淡出下拉菜单效果。分享给大家供大家参考。具体如下:
这是一款jQuery带有淡入淡出效果的下拉菜单,可作为一个下拉导航菜单的模板,移动鼠标到一级主菜单上看一看,在有包括二级子菜单的菜单项上悬停时,二级菜单渐变显示出来,兼容性也是很不错的,希望大家喜欢哈。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/
具体代码如下:
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery下拉菜单效果</title><style>body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{margin:0; padding:0}table{border-collapse:collapse; border-spacing:0}fieldset, img{border:0}address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal}ol, ul{list-style:none}caption, th{text-align:left}h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}q:before, q:after{content:''}abbr, acronym{border:0}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}a { color: #fff; text-decoration: none; }a:hover { text-decoration: underline; }a { color: black }#nav li { float: left; position: relative; }#nav li a { background: #d6cfbd; border: 3px solid #4f4026; color: #333; display: block; margin: 0 5px 0 0; padding: 5px 8px; }#nav li a:hover { background: #f7f7f7; text-decoration: none; }#nav { display: block; height: 35px; padding: 10px 0; width: 500px; z-index: 100; position: absolute;}#nav > li > a { border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;}#nav li ul { background: #e1ddd3; border: 3px solid #4f4026; color: #333; display: none; margin: -3px 0 0 0; width: 200px; position: absolute; }#nav li ul li { width: 100% }#nav li ul li a { background: none; border: none; line-height: 30px; margin: 0; padding: 0 0 0 5px; }#nav li ul li a:hover { background: #f7f7f7;}#nav li.current > a { background: #f7f7f7; }#nav li:hover > ul.child { display: block; }</style><!--<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>--><script type='text/javascript' src='jquery-1.6.2.min.js'></script><script type="text/javascript">$(document).ready(function(){ $("#nav ul.child").removeClass("child"); $("#nav li").has("ul").hover(function(){ $(this).addClass("current").children("ul").fadeIn(); }, function() { $(this).removeClass("current").children("ul").hide(); });});</script></head><body><div id="page-wrap"><div id="content"><h2>jQuery sub-navigation with CSS fall-back</h2><ul id="nav"><li><a href="#">网站主页</a></li><li><a href="#">开源源码</a><ul class="child"> <li><a href="#">PHP源码</a></li> <li><a href="#">ASP源码</a></li> <li><a href="#">JSP源码</a></li> <li><a href="#">Ajax源码</a></li></ul></li><li><a href="#">服务</a><ul class="child"> <li><a href="#">广告业务</a></li> <li><a href="#">Installations</a></li> <li><a href="#">Setups</a></li></ul></li><li><a href="#">关于我们</a></li><li><a href="#">Contact</a></li></ul></div></div></body></html>希望本文所述对大家的jquery程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码。分享给大家供大家参考。具体如下:这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实
本文实例讲述了javascript淡入淡出焦点图幻灯片效果。分享给大家供大家参考。具体如下:这是一款基于javascript实现的淡入淡出焦点图幻灯片效果代码,
这个弹窗是如下图的效果:打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个×会淡出。采用淡入淡出是因为直接Jquery一个fad
transition文档地址定义一个背景弹出层实现淡入淡出效果Togglehelloexportdefault{data:()=>({show:true}),}
为了达到更为生动的效果,可以把一个元素淡出或淡入,在任何一种情况下,都只是随着时间来改变元素的透明度。jQuery提供了3个和淡入淡出相关的函数:·fadeIn