本文实例讲述了JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效。分享给大家供大家参考。具体如下：
这是一个非常好的实用菜单整合特效，有多级下拉菜单、仿东京商城的拉出式菜单、仿Windows的右键菜单，仿淘宝的标签Tab菜单，每一个都是精彩，代码中附有丰富的注释，便于你的学习和修改。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-f-jd-taobao-win-rbutton-tab-demo/
具体代码如下：
Javascript 多级联动浮动菜单 .container1 {height:30px;} .container1 div {float:left;} .container1 div, .container1_2 div {width:100px;background:#FAFCFD;border:1px solid #5c9cc0;padding:10px;} div.on1 {font-weight:bold;background:#EEF3F7;} div.on1_2 {font-weight:bold;background:#fffff7;border:1px solid #ffcc00;} 菜单使用演示：
位置：
仿京东商城商品分类菜单：
.container2, .container2 dd, .container2_2 dl, .container2_2 dd {margin:0;} .container2 {font-size:14px;width:190px;border:1px solid #cf2020;background:#fffff5;padding:5px 8px; line-height:30px; color:#333;} .container2 dt {font-weight:bold;color:#cf2020;} .container2 dd {background:url(images/n4.jpg) 180px 10px no-repeat;_zoom:1;} .container2_2 {background-color:#bebec3; display:none;} .container2_2 dl {font-size:14px;width:200px;border:1px solid #969696;background:#fff; position:relative; left:-3px; top:-3px; } .container2_2 dd div {padding:5px 20px; background:url(images/n4.jpg) 6px 7px no-repeat;_zoom:1;} .container2_2 dt, .shadow {padding:0 5px; position:absolute;background:#fff; border:1px solid #969696; border-right:0;width:169px;left:-180px; top:-1px;height:24px;line-height:24px;} .shadow {background-color:#bebec3;border-color:#bebec3; top:0;} .container2_2 a{display:block;_zoom:1;} .container2_2 a:link, .container2_2 a:visited, .container2_2 a:active {color:#333;text-decoration: none;} .container2_2 a:hover {color:#ff6026;text-decoration: underline;}
- 图片动画
- 图片效果
- 动画效果
- 系统其他
- 系统效果
- 其他效果
- 图片滑动切换效果 图片变换效果(ie only) 图片滑动展示效果 图片切割效果 Tween算法及缓动效果 渐变效果 无刷新多文件上传系统 图片切割系统 拖放效果 拖拉缩放效果 滑动条效果
仿右键菜单：
.container3 {font-size:12px;border:1px solid #9d9da1;padding:3px;line-height:18px; background:#FFF; cursor:default;-moz-user-select:none;_overflow:hidden;} .container3 div {padding:0 20px;} .menu3_1 {color:#aca899;_zoom:1;} .menu3_2 {background:url(images/n5.gif) 140px 5px no-repeat;} .menu3_3 {background:url(images/n1.gif) 7px 5px no-repeat;} .menu3_4 {background:url(images/n2.gif) 7px 5px no-repeat;} .line3 {border-bottom:1px solid #9d9da1; _font-size:0; margin:4px 0;} .on3 {background-color:#bbb7c7;} .area3 { width:500px; height:200px;border:1px solid #9d9da1;} .pos3 {position:absolute; display:none;line-height:20px; width:150px;}
仿淘宝拼音索引菜单：
.container4 li, .container4_2 li{ list-style:none;} .container4 ul, .container4_2{margin:0;} .container4 {width:350px;padding:7px 10px;font:12px Verdana;border:1px solid #ccc;background:#fffeed; line-height:15px;height:15px; _overflow:hidden;} .container4 li {float:left;padding:0 10px; border-right:1px solid #ccc; } .container4 div {float:left;color:#000;padding-right:10px;} li.menu4 {position:relative;margin-left:-1px; top:-1px; z-index:9999;border:1px solid #85ccff; border-bottom:0; padding-bottom:8px; color:#ff6026; background:#dbf3ff;} .container4_2 {width:350px;padding:10px;border:1px solid #85ccff;background:#dbf3ff;line-height:25px;font-size:14px; font-weight:bold;display:none;} .container4_2 a{ display:block;_zoom:1;} .container4_2 a:link, .container4_2 a:visited, .container4_2 a:active {color:#565553;text-decoration: none;} .container4_2 a:hover {color:#ff5500;text-decoration: underline;} .container4 a:link, .container4 a:visited, .container4 a:hover, .container4 a:active {color:#565553;text-decoration: none;} .menu4 a:link, .menu4 a:visited, .menu4 a:active {color:#ff6026;} .menu4 a:hover{color:#ff6026;text-decoration:underline;} Tag索引
- Table
- Fixed
- Color
- Date
- Select
- Table行定位效果
- Table排序
- 浮动定位提示效果
- 仿LightBox内容显示效果
- 颜色梯度和渐变效果
- blog式日历控件
- 日期联动选择器
- 多级联动select
希望本文所述对大家的Javascript程序设计有所帮助。
