透明漂亮的动感滑动效果菜单 - 网页特效代码演示

当前位置：网页特效 > 网页特效演示页

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

透明漂亮的动感滑动效果菜单 - 网页特效代码演示 - 特效代码运行

网友小少（Q:10221408）为阿里西西网站提供的原创网页菜单导航特效，滑动效果可以FLASH里的制作效果拼真，本站打包下载地址：http://tool.alixixi.com/demo/200/200.rar,预览网址：http://tool.alixixi.com/demo/200/

附送菜单插件：http://tool.alixixi.com/demo/200/niceselect.html

以下是HTML网页特效代码，点击运行按钮可查看效果：
<!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>pngbt</title> <style type="text/css"> *{margin:0; padding:0; font-size:14px; font-weight:bold;} body{background:url(http://tool.alixixi.com/demo/200/img/1.jpg) repeat;} .wrap{margin:100px auto; width:600px; height:54px; position:relative;} .btbg{width:100px; height:56px; overflow:hidden; text-align:center; position:absolute;} .btcenter{width:100px; height:56px;} .btright{width:11px; height:56px; overflow:hidden; position:absolute; top:0; right:0;} .btleft{width:89px; height:56px; overflow:hidden; top:0; left:0; position:absolute;} .nav{width:600px; height:56px; overflow:hidden; position:absolute;} .nav ul{list-style:none;} .nav ul li{float:left; line-height:56px;} .nav ul li a{padding:0 30px; height:56px; line-height:56px; text-decoration:none; color:#FC0; display:inline-block;} </style> <script language="JavaScript" type="text/javascript"> function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. { var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters)) { for(var j=0; j<document.images.length; j++) { var img = document.images[j] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML j = j-1 } } } } if(window.attachEvent) { window.attachEvent('onload', correctPNG); } </script> </head> <body> <div class="wrap"> <div class="btbg"> <span class="btcenter"><img src="http://tool.alixixi.com/demo/200/img/bt3.png" /></span> <div class="btleft"><img src="http://tool.alixixi.com/demo/200/img/bt1.png" /></div> <div class="btright"><img src="http://tool.alixixi.com/demo/200/img/bt2.png" /></div> </div> <div class="nav"> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">长长长长导航3</a></li> <li><a href="#">导航4</a></li> </ul> </div> </div> <script type="text/javascript" src="http://tool.alixixi.com/demo/200/js/jquery-1.2.6.min.js"></script> <script type="text/javascript"> /**********Power By Mulder*********/ /**********qq:10241408**************/ $(document).ready(function(){ var sw = $('.nav ul li:eq(0)').width(); $('.btleft').width(sw-11); $('.btbg').width(sw); var thisindex = 0; btbgMove(thisindex); $('.nav ul li').mouseover(function(){ $('.btbg').queue("fx", []); $('.btbg').stop(); $('.btleft').queue("fx", []); $('.btleft').stop(); var indexnum = $('.nav ul li').index(this); btbgMove(indexnum); }).click(function(){ $('.btbg').queue("fx", []); $('.btbg').stop(); $('.btleft').queue("fx", []); $('.btleft').stop(); thisindex = $('.nav ul li').index(this); btbgMove(thisindex); }); $('.nav').mouseout(function(){ $('.btbg').queue("fx", []); $('.btbg').stop(); $('.btleft').queue("fx", []); $('.btleft').stop(); btbgMove(thisindex); }); }); function btbgMove(num){ var w = $('.nav ul li:eq('+num+')').width(); var tw = 0; $('.nav ul li:lt('+num+')').each(function(){ tw += Number($(this).width()); }); $('.btleft').animate( { width: w-11 } , 500); $('.btbg').animate( { left: tw } , { queue: false, duration: 500 }).animate( { width: w } , 500);; } function getEvent(){ //同时兼容ie和ff的写法 if(document.all) return window.event; func=getEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0){ if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){ return arg0; } } func=func.caller; } return null; } </script> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
[提示：可先修改代码再按运行]

当前位置：网页特效 > 网页特效演示页

透明漂亮的动感滑动效果菜单 - 网页特效代码演示 - 特效代码运行

刚被其它网友点击的网页特效

搜索查询面板

本月特效排行

本周特效排行

本日特效排行