首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集

Posted in Javascript onSeptember 28, 2015

本文实例讲述了JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效。分享给大家供大家参考。具体如下：

这是一个非常好的实用菜单整合特效，有多级下拉菜单、仿东京商城的拉出式菜单、仿Windows的右键菜单，仿淘宝的标签Tab菜单，每一个都是精彩，代码中附有丰富的注释，便于你的学习和修改。

运行效果截图如下：

JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集

在线演示地址如下：

具体代码如下：

<!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>JavaScript 多级联动浮动菜单</title>
<script type="text/javascript">
var $$ = function (id) {
 return "string" == typeof id ? document.getElementById(id) : id;
};
var isIE8 = navigator.userAgent.indexOf('MSIE 8.0') != -1;
var isChrome = navigator.userAgent.indexOf('Chrome') != -1;
var isSafari = navigator.userAgent.indexOf('AppleWebKit') != -1;
function addEvent(element, type, handler) {
 if (element.addEventListener) {
  element.addEventListener(type, handler, false);
 } else {
  if (!handler.$$guid) handler.$$guid = addEvent.guid++;
  if (!element.events) element.events = {};
  var handlers = element.events[type];
  if (!handlers) {
   handlers = element.events[type] = {};
   if (element["on" + type]) {
    handlers[0] = element["on" + type];
   }
  }
  handlers[handler.$$guid] = handler;
  element["on" + type] = handleEvent;
 }
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
 if (element.removeEventListener) {
  element.removeEventListener(type, handler, false);
 } else {
  if (element.events && element.events[type]) {
   delete element.events[type][handler.$$guid];
  }
 }
};
function handleEvent(event) {
 var returnValue = true;
 event = fixEvent(event);
 var handlers = this.events[event.type];
 for (var i in handlers) {
  this.$$handleEvent = handlers[i];
  if (this.$$handleEvent(event) === false) {
   returnValue = false;
  }
 }
 return returnValue;
};
function fixEvent(event) {
 if (event) return event;
 event = ((this.ownerDocument || this.document || this).parentWindow || window).event;
 var scrolldoc = isChrome || isSafari ? document.body : document.documentElement;
 event.pageX = event.clientX + scrolldoc.scrollLeft;
 event.pageY = event.clientY + scrolldoc.scrollTop;
 event.target = event.srcElement;
 event.stopPropagation = fixEvent.stopPropagation;
 event.preventDefault = fixEvent.preventDefault;
 if(event.type == "mouseout") {
  event.relatedTarget = event.toElement;
 }else if(event.type == "mouseover") {
  event.relatedTarget = event.fromElement;
 }
 return event;
};
fixEvent.preventDefault = function() {
 this.returnValue = false;
};
fixEvent.stopPropagation = function() {
 this.cancelBubble = true;
};
var forEach = function(array, callback, thisObject){
 if(array.forEach){
  array.forEach(callback, thisObject);
 }else{
  for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
 }
}
var Bind = function(object, fun) {
 var args = Array.prototype.slice.call(arguments, 2);
 return function() {
  return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
 }
}
var BindAsEventListener = function(object, fun) {
 var args = Array.prototype.slice.call(arguments, 2);
 return function(event) {
  return fun.apply(object, [event].concat(args));
 }
}
var Extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
 return destination;
}
var DeepExtend = function(destination, source){
 for (var property in source) {
  var copy = source[property];
  if ( destination === copy ) continue;
  if ( typeof copy === "object" ){
   destination[property] = DeepExtend(destination[property] || {}, copy);
  }else{
   destination[property] = copy;
  }
 }
 return destination;
}
var Filter = function(array, callback, thisObject){
 if(array.filter){
  return array.filter(callback, thisObject);
 }else{
  var res = [];
  for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array) && res.push(array[i]); }
  return res;
 }
}
var Every = function(array, callback, thisObject){
 if(array.every){
  return array.every(callback, thisObject);
 }else{
  var res = [];
  for (var i = 0, len = array.length; i < len; i++) {
   if (!callback.call(thisObject, array[i], i, array)) return false;
  };
  return true;
 }
}
var IndexOf = function(array, elt){
 if(array.indexOf){
  return array.indexOf(elt);
 }else{
  var res = [];
  for (var i = 0, len = array.length; i < len; i++) {
   if (array[i] === elt) return i;
  };
  return -1;
 }
}
var Contains = function(a, b){
 return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
var isArray = function( obj ) {
 return Object.prototype.toString.call(obj) === "[object Array]";
}
function GetRelative(relElem, fixedElem, options){
 var doc = relElem.ownerDocument, docElem = doc.documentElement
  ,scrolldoc = isChrome || isSafari ? doc.body : docElem,
  rect = relElem.getBoundingClientRect();
 //默认值
 options = Extend({
  Align:   "clientleft",//水平方向定位
  vAlign:   "clienttop",//垂直方向定位
  CustomLeft:  0,//自定义left定位
  CustomTop:  0,//自定义top定位
  PercentLeft: 0,//自定义left百分比定位
  PercentTop:  0,//自定义top百分比定位
  Adaptive:  false,//是否自适应定位
  Reset:   false//自适应定位时是否重新定位
 }, options || {});
 //ie8的getBoundingClientRect获取不准确
 if ( isIE8 ) {
  var elem = relElem, left = - scrolldoc.scrollLeft, top = - scrolldoc.scrollTop;
  while (elem) { left += elem.offsetLeft, top += elem.offsetTop; elem = elem.offsetParent; };
  rect.left = left; rect.right = left + relElem.offsetWidth;
  rect.top = top; rect.bottom = top + relElem.offsetHeight;
 };
 var iLeft = GetRelative.Left(options.Align, rect, fixedElem) + options.CustomLeft,iTop = GetRelative.Top(options.vAlign, rect, fixedElem) + options.CustomTop;
 if (options.PercentLeft) { iLeft += .01 * options.PercentLeft * relElem.offsetWidth; };
 if (options.PercentTop) { iTop += .01 * options.PercentTop * relElem.offsetHeight; };
 if (options.Adaptive) {
  var maxLeft = docElem.clientWidth - fixedElem.offsetWidth,
   maxTop = docElem.clientHeight - fixedElem.offsetHeight;
  if (options.Reset) {
   if (iLeft > maxLeft || iLeft < 0) {
    iLeft = GetRelative.Left(2 * iLeft > maxLeft ? "left" : "right", rect, fixedElem) + options.CustomLeft;
   }; 
   if (iTop > maxTop || iTop < 0) {
    iTop = GetRelative.Top(2 * iTop > maxTop ? "top" : "bottom", rect, fixedElem) + options.CustomTop;
   };
  } else {
   //修正到适合位置
   iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
   iTop = Math.max(Math.min(iTop, maxTop), 0);
  };
 };
 iLeft += scrolldoc.scrollLeft; iTop += scrolldoc.scrollTop;
 return { Left: iLeft, Top: iTop };
};
GetRelative.Left = function(align, rect, fixedElem){
 var iLeft = 0;
 switch (align.toLowerCase()) {
  case "left" :
   return rect.left - fixedElem.offsetWidth;
  case "clientleft" :
   return rect.left;
  case "center" :
   return (rect.left + rect.right - fixedElem.offsetWidth)/2;
  case "clientright" :
   return rect.right - fixedElem.offsetWidth;
  case "right" :
  default :
   return rect.right;
 };
};
GetRelative.Top = function(valign, rect, fixedElem){
 var iTop = 0;
 switch (valign.toLowerCase()) {
  case "top" :
   return rect.top - fixedElem.offsetHeight;
  case "clienttop" :
   return rect.top;
  case "center" :
   return (rect.top + rect.bottom - fixedElem.offsetHeight)/2;
  case "clientbottom" :
   return rect.bottom - fixedElem.offsetHeight;
  case "bottom" :
  default :
   return rect.bottom;
 };
};
var FixedMenu = function(containers, options) {
 this._timerContainer = null;//容器定时器
 this._timerMenu = null;//菜单定时器
 this._frag = document.createDocumentFragment();//碎片对象，保存菜单元素
 this._menus = {};//菜单对象
 this._containers = [];//容器集合
 this.SetOptions(options);
 this._custommenu = this.options.Menu;
 this.Css = this.options.Css;
 this.Hover = this.options.Hover;
 this.Active = this.options.Active;
 this.Tag = this.options.Tag;
 this.Txt = this.options.Txt;
 this.FixedMenu = this.options.FixedMenu;
 this.Fixed = this.options.Fixed;
 this.Attribute = this.options.Attribute;
 this.Property = this.options.Property;
 this.onBeforeShow = this.options.onBeforeShow;
 this.Delay = parseInt(this.options.Delay) || 0;
 forEach(isArray(containers) ? containers : [containers], function(o, i){
  var pos, menu;
  if ( o.id ) {
   pos = o.id; menu = o.menu ? o.menu : pos;
  } else {
   pos = menu = o;
  };
  pos = $$(pos); menu = $$(menu);
  //容器对象 Pos:定位元素 Menu:插入菜单元素
  pos && menu && this.IniContainer( i, { Pos: pos, Menu: menu } );
 }, this);
 //初始化程序
 this.Ini();
};
FixedMenu.prototype = {
 //设置默认属性
 SetOptions: function(options) {
 this.options = {//默认值
  Menu:[],//自定义菜单集合
  Delay:200,//延迟值(微秒)
  Tag:"div",//默认生成标签
  Css:undefined,//默认样式
  Hover:undefined,//触发菜单样式
  Active:undefined,//显示下级菜单时显示样式
  Txt:"",//菜单内容
  FixedMenu: true,//是否相对菜单定位（否则相对容器）
  Fixed:{ Align: "clientleft", vAlign: "bottom" },//定位对象
  Attribute:{},//自定义Attribute属性
  Property:{},//自定义Property属性
  onBeforeShow:function(){}//菜单显示时执行
 };
 Extend( this.options, options || {} );
 },
 Ini: function() {
 this.Hide();//隐藏菜单
 this.BuildMenu();//生成菜单对象
 this.forEachContainer(this.ResetContainer);//重置容器属性
 this.InsertMenu(0, 0);//显示菜单
 },
 BuildMenu: function() {
 //清除旧菜单dom(包括自定义的)
 this.forEachMenu(function(o){
  var elem = o._elem;
  if ( elem ) {
   //防止dom内存泄漏
   removeEvent( elem, "mouseover", o._event );
   elem.parentNode.removeChild(elem);
   o._elem = o.elem = null;
  };
 });
 //设置菜单默认值
 var options = {
  id:   0,//id
  rank:  0,//排序
  elem:  "",//自定义元素
  tag:  this.Tag,
  css:  this.Css,
  hover:  this.Hover,
  active:  this.Active,
  txt:  this.Txt,
  fixedmenu: !!this.FixedMenu,
  fixed:  this.Fixed,
  attribute: this.Attribute,
  property: this.Property
 };
 //先定义"0"顶级菜单
 this._menus = { "0": { "_children": [] } };
 //整理自定义菜单并插入到程序菜单对象
 forEach(this._custommenu, function(o) {
  //生成菜单对象(由于包含对象，要用深度扩展)
  var menu = DeepExtend( DeepExtend( {}, options ), o || {} );
  //去掉相同id菜单，同时排除了id为"0"的菜单
  if ( !!this._menus[ menu.id ] ) { return; };
  //重置属性
  menu._children = []; menu._index = -1;
  this._menus[menu.id] = menu;
 }, this);
 //建立树形结构
 this.forEachMenu(function( o, id, menus ) {
  if ( "0" === id ) { return; };//顶级没有父级菜单
  var parent = this._menus[o.parent];
  //父级菜单不存在或者父级是自己的话，当成一级菜单
  if ( !parent || parent === o ) { parent = menus[o.parent = "0"]; };
  //插入到父级菜单对象的_children中
  parent._children.push(o);
 });
 //整理菜单对象
 this.forEachMenu(function(o) {
  //如果有自定义元素的话先放到碎片文档中
  !!o.elem && ( o.elem = $$(o.elem) ) && this._frag.appendChild(o.elem);
  //修正样式,优先使用自定义元素的class
  if ( !!o.elem && o.elem.className ) {
   o.css = o.elem.className;
  } else if ( o.css === undefined ) { o.css = ""; };
  if ( o.hover === undefined ) { o.hover = o.css; };
  if ( o.active === undefined ) { o.active = o.hover; };
  //对菜单对象的_children集合排序(先按rank再按id排序)
  o._children.sort(function( x, y ) { return x.rank - y.rank || x.id - y.id; });
 });
 },
 //插入菜单
 InsertMenu: function(index, parent) {
 var container = this._containers[index];
 //如果是同一个父级菜单不用重复插入
 if ( container._parent === parent ) { return; };
 container._parent = parent;
 //把原有容器内菜单移到碎片对象中
 forEach( container._menus, function(o) { o._elem && this._frag.appendChild(o._elem); }, this );
 //重置子菜单对象集合
 container._menus = [];
 //把从父级菜单元素的子菜单对象集合获取的元素插入到容器
 forEach(this._menus[parent]._children, function( menu, i ){
  this.CheckMenu( menu, index );//检查菜单
  container._menus.push(menu);//加入到容器的子菜单集合，方便调用
  container.Menu.appendChild(menu._elem);//菜单元素插入到容器
 }, this);
 },
 //检查菜单
 CheckMenu: function(menu, index) {
 //索引保存到菜单对象属性中，方便调用
 menu._index = index;
 //如果菜单对象没有元素
 if ( !menu._elem ) {
  var elem = menu.elem;
  //如果没有自定义元素的话创建一个
  if ( !elem ) { elem = document.createElement(menu.tag); elem.innerHTML = menu.txt; };
  //设置property
  Extend( elem, menu.property );
  //设置attribute
  var attribute = menu.attribute;
  for (var att in attribute) { elem.setAttribute( att, attribute[att] ); };
  //设置样式
  elem.className = menu.css;
  //设置事件
  menu._event = BindAsEventListener( this, this.HoverMenu, menu );//用于清除事件
  addEvent( elem, "mouseover", menu._event );
  //保存到菜单对象
  menu._elem = elem;
 };
 },
 //触发菜单
 HoverMenu: function(e, menu) {
 var elem = menu._elem;
 //如果是内部元素触发直接返回
 if ( Contains( elem, e.relatedTarget ) || elem === e.relatedTarget ) { return; };
 clearTimeout(this._timerMenu);
 //可能在多个容器间移动，所以全部容器都重新设置样式
 this.forEachContainer(function(o, i){
  if ( o.Pos.visibility === "hidden" ) { return; };
  this.ResetCss(o);
  //设置当前菜单为active样式
  var menu = o._active;
  if ( menu ) { menu._elem.className = menu.active; };
 });
 //设置当前菜单为触发样式
 if ( this._containers[menu._index]._active !== menu ) { elem.className = menu.hover; };
 //触发显示菜单
 this._timerMenu = setTimeout( Bind( this, this.ShowMenu, menu ), this.Delay );
 },
 //显示菜单
 ShowMenu: function(menu) {
 var index = menu._index, container = this._containers[index], child = !!menu._children.length;
 //隐藏不需要的容器
 this.forEachContainer( function(o, i) { i > index && this.HideContainer(o); } );
 //重置当前容器_active
 container._active = null; 
 //如果有子级菜单
 if ( child ) {
  //设置当前容器_active
  container._active = menu;
  //显示下一级容器
  index++;//设置索引
  this.CheckContainer(index);//检查容器
  this.InsertMenu(index, menu.id);//插入菜单
  this.ShowContainer(menu);//显示容器
 };
 //重置当前容器的css
 this.ResetCss(container);
 //设置当前菜单样式
 menu._elem.className = child ? menu.active : menu.hover;
 },
 //初始化容器(索引, 容器元素)
 IniContainer: function(index, container) {
 var oContainer = container.Pos;
 //重置属性
 this.ResetContainer(container);
 //添加事件
 addEvent( oContainer, "mouseover", Bind( this, function(){ clearTimeout(this._timerContainer); } ) );
 addEvent( oContainer, "mouseout", BindAsEventListener( this, function(e){
  //先判断是否移出到所有容器之外
  var elem = e.relatedTarget,
   isOut = Every( this._containers, function(o){ return !(Contains(o.Pos, elem) || o.Pos == elem); } );
  if ( isOut ) {
   //清除定时器并隐藏
   clearTimeout(this._timerContainer); clearTimeout(this._timerMenu);
   this._timerContainer = setTimeout( Bind( this, this.Hide ), this.Delay );
  };
 }));
 //除了第一个容器外设置浮动样式
 if ( index ) {
  var css = container.Pos.style;
  css.position = "absolute"; css.display = "block"; css.margin = 0;
  //要后面的覆盖前面的
  css.zIndex = this._containers[index - 1].Pos.style.zIndex + 1;
 };
 //记录索引，方便调用
 container._index = index;
 //插入到容器集合
 this._containers[index] = container;
 },
 //检查容器
 CheckContainer: function(index) {
 if ( index > 0 && !this._containers[index] ) {
  //如果容器不存在，根据前一个容器复制成新容器，第一个容器必须自定义
  var pre = this._containers[index - 1].Pos
  //用了新的添加事件方式，没有ie的cloneNode的bug
   ,container = pre.parentNode.insertBefore( pre.cloneNode(false), pre );
  //清除id防止冲突
  container.id = "";
  //初始化容器
  this.IniContainer( index, { Pos: container, Menu: container } );
 };
 },
 //显示容器
 ShowContainer: function(menu) {
 var index = menu._index,
  container = this._containers[index + 1].Pos,
  elem = menu.fixedmenu ? menu._elem : this._containers[index].Pos,
  pos = GetRelative( elem, container, menu.fixed );
 //定位并显示容器
 container.style.left = pos.Left + "px";
 container.style.top = pos.Top + "px";
 //执行显示前事件
 this.onBeforeShow(container, menu);
 container.style.visibility = "visible";
 },
 //隐藏容器
 HideContainer: function(container) {
 //设置隐藏
 var css = container.Pos.style;
 css.visibility = "hidden"; css.left = css.top = "-9999px";
 //重置上一个菜单的触发菜单对象
 this._containers[container._index - 1]._active = null;
 },
 //重置容器对象属性
 ResetContainer: function(container) {
 container._active = null;//重置触发菜单
 container._menus = [];//重置子菜单对象集合
 container._parent = -1;//重置父级菜单id
 },
 //隐藏菜单
 Hide: function() {
 this.forEachContainer(function(o, i){
  if ( i === 0 ) {
   //如果是第一个重设样式和_active
   this.ResetCss(o);
  } else {//隐藏容器
   this.HideContainer(o);
  };
 });
 },
 //重设容器菜单样式
 ResetCss: function(container) {
 forEach( container._menus, function(o, i){ o._elem.className = o.css; }, this );
 },
 //历遍菜单对象集合
 forEachMenu: function(callback) {
 for ( var id in this._menus ) { callback.call( this, this._menus[id], id, this._menus ); };
 },
 //历遍容器对象集合
 forEachContainer: function(callback) {
 forEach( this._containers, callback, this );
 },
 //添加自定义菜单
 Add: function(menu) {
 this._custommenu = this._custommenu.concat(menu);
 this.Ini();
 },
 //修改自定义菜单
 Edit: function(menu) {
 forEach( isArray( menu ) ? menu : [ menu ], function(o){
  //如果对应id的菜单存在
  if ( o.id && this._menus[o.id] ) {
   //从自定义菜单中找出对应菜单,并修改
   Every( this._custommenu, function(m, i){
    if ( m.id === o.id ) {
     this._custommenu[i] = DeepExtend( m, o ); return false;
    };
    return true;
    //用Every可以跳出循环
   }, this );
  };
 }, this );
 this.Ini();
 },
 //删除自定义菜单
 Delete: function() {
 var ids = Array.prototype.slice.call(arguments);
 this._custommenu = Filter( this._custommenu, function(o){
  return IndexOf(ids, o.id) === -1;
 });
 this.Ini();
 }
};
</script>
</head>
<body>
<style type="text/css">
.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;}
</style>
菜单使用演示： <br>
<br>
<div id="idContainer1" class="container1"> </div>
<div id="idContainer1_2" class="container1_2"> </div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input id="idEdit" type="button" value="添加菜单 +"/>
位置：
<select id="idRank">
 <option value="3"> 第四个 </option>
 <option value="2"> 第三个</option>
 <option value="1"> 第二个 </option>
 <option value="0"> 第一个 </option>
</select>
<select id="idDelay">
 <option value="1000"> 1秒</option>
 <option value="500"> 0.5秒 </option>
 <option value="200" selected> 0.2秒 </option>
 <option value="0"> 不延时 </option>
</select>
<script>
var menu = [
 { id: 1, parent: 0, txt: '自定义样式', hover: "on1_2", rank: 1 },
 { id: 2, parent: 0, txt: '下拉菜单', active: "on1_2", rank: 2 },
 { id: 3, parent: 0, txt: '任意定位', fixed: { Align: "left" }, rank: 3 },
 { id: 21, parent: 2, txt: '相对容器', active: "on1_2", fixedmenu: false },
 { id: 22, parent: 2, txt: '相对菜单', active: "on1_2", fixed: { Align: "right", vAlign: "clienttop" } },
 { id: 23, parent: 21, txt: '三级菜单' },
 { id: 24, parent: 21, txt: '三级菜单' },
 { id: 25, parent: 22, txt: '三级菜单' },
 { id: 26, parent: 22, txt: '三级菜单' },
 { id: 31, parent: 3, txt: '无法到达的', fixed: { Align: "left" } },
 { id: 32, parent: 31, txt: '目光', fixed: { Align: "right" } },
 { id: 33, parent: 32, txt: '无法到达的', fixed: { Align: "right", vAlign: "top" } },
 { id: 34, parent: 33, txt: '到达', fixed: { PercentTop: 100 } },
 { id: 35, parent: 34, txt: '到达', fixed: { Align: "left", vAlign: "clienttop", PercentLeft: -100 } },
 { id: 36, parent: 35, txt: '梦想', fixed: { vAlign: "top" } },
 { id: 37, parent: 36, txt: '目光', fixed: { vAlign: "top", PercentTop: -100 } },
 { id: 38, parent: 37, txt: '脚步', fixed: { Align: "right", vAlign: "clienttop", PercentLeft: 100 } },
 { id: 39, parent: 38, txt: '地方', fixed: { PercentTop: 100 } },
 { id: 40, parent: 39, txt: '地方', fixed: { Align: "left" } },
 { id: 41, parent: 40, txt: '可以', fixed: { vAlign: "top", PercentTop: -100 } },
 { id: 42, parent: 41, txt: '可以' }
];
var fm = new FixedMenu(["idContainer1", "idContainer1_2"], { Hover: "on1", Menu: menu });
//编辑测试
$$("idEdit").onclick = function(){
 if(this.value == "添加菜单 +"){
  fm.Add([
   { id: 100, parent: 0, txt: '新加菜单+', rank: $$("idRank").value | 0 },
   { id: 101, parent: 100, txt: '新加菜单++' },
   { id: 102, parent: 100, txt: '新加菜单+++' }
  ]);
  this.value = "删除菜单 -"
 }else{
  fm.Delete( 100, 101, 102 );
  this.value = "添加菜单 +"
 }
}
//延时测试
$$("idDelay").onchange = function(){ fm.Delay = this.value | 0; }
</script>
<br>
<br>
仿京东商城商品分类菜单： <br>
<br>
<style type="text/css">
.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;}
</style>
<dl id="idContainer2" class="container2">
 <dt id="idMenu2_1">图片动画</dt>
 <dd id="idMenu2_2">图片效果</dd>
 <dd id="idMenu2_3">动画效果</dd>
 <dt id="idMenu2_51">系统其他</dt>
 <dd id="idMenu2_52">系统效果</dd>
 <dd id="idMenu2_53">其他效果</dd>
</dl>
<div id="idContainer2_2" class="container2_2">
 <div class="shadow"></div>
 <dl>
  <dt id="idTitle"></dt>
  <dd id="idMenu2">
   <div id="idMenu2_11"><a href="#">图片滑动切换效果</a></div>
   <div id="idMenu2_12"><a href="#">图片变换效果(ie only)</a></div>
   <div id="idMenu2_13"><a href="#">图片滑动展示效果</a></div>
   <div id="idMenu2_14"><a href="#">图片切割效果</a></div>
   <div id="idMenu2_21"><a href="#">Tween算法及缓动效果</a></div>
   <div id="idMenu2_22"><a href="#">渐变效果</a></div>
   <div id="idMenu2_61"><a href="#">无刷新多文件上传系统</a></div>
   <div id="idMenu2_62"><a href="#">图片切割系统</a></div>
   <div id="idMenu2_71"><a href="#">拖放效果</a></div>
   <div id="idMenu2_72"><a href="#">拖拉缩放效果</a></div>
   <div id="idMenu2_73"><a href="#">滑动条效果</a></div>
  </dd>
 </dl>
</div>
<script>
var menu2 = [
 { id: 1, parent: 0, elem: 'idMenu2_1' },
 { id: 2, parent: 0, elem: 'idMenu2_2' },
 { id: 3, parent: 0, elem: 'idMenu2_3' },
 { id: 11, parent: 2, elem: 'idMenu2_11' },
 { id: 12, parent: 2, elem: 'idMenu2_12' },
 { id: 13, parent: 2, elem: 'idMenu2_13' },
 { id: 14, parent: 2, elem: 'idMenu2_14' },
 { id: 21, parent: 3, elem: 'idMenu2_21' },
 { id: 22, parent: 3, elem: 'idMenu2_22' },
 { id: 51, parent: 0, elem: 'idMenu2_51' },
 { id: 52, parent: 0, elem: 'idMenu2_52' },
 { id: 53, parent: 0, elem: 'idMenu2_53' },
 { id: 61, parent: 52, elem: 'idMenu2_61' },
 { id: 62, parent: 52, elem: 'idMenu2_62' },
 { id: 71, parent: 53, elem: 'idMenu2_71' },
 { id: 72, parent: 53, elem: 'idMenu2_72' },
 { id: 73, parent: 53, elem: 'idMenu2_73' }
];
var container2 = [ "idContainer2", { id: "idContainer2_2", menu: "idMenu2" } ];
new FixedMenu(container2, { Menu: menu2,
 Fixed: { Align: "clientleft", vAlign: "clienttop", CustomTop: 5, CustomLeft: 176 },
 onBeforeShow: function(container, menu){ $$("idTitle").innerHTML = menu._elem.innerHTML; }
});
</script>
<br>
仿右键菜单： <br>
<br>
<style type="text/css">
.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;}
</style>
<div id="idArea" class="area3"> </div>
<div id="idContainer3" class="container3 pos3"> </div>
<div id="idContainer3_2" class="container3"> </div>
<script>
var menu3 = [
 { id: 1, parent: 0, txt: '查看(<u>V</u>)' },
 { id: 2, parent: 0 },
 { id: 3, parent: 0, txt: '排列图标(<u>I</u>)' },
 { id: 4, parent: 0, txt: '刷新(<u>E</u>)' },
 { id: 5, parent: 0 },
 { id: 6, parent: 0, txt: '自定义文件夹(<u>F</u>)...' },
 { id: 7, parent: 0 },
 { id: 8, parent: 0, txt: '粘贴(<u>P</u>)' },
 { id: 9, parent: 0, txt: '粘贴快捷方式(<u>S</u>)' },
 { id: 10, parent: 0 },
 { id: 11, parent: 0, txt: '新建(<u>P</u>)' },
 { id: 12, parent: 0 },
 { id: 13, parent: 0, txt: '属性(<u>S</u>)' },
 { id: 21, parent: 1, txt: '缩略图(<u>H</u>)' },
 { id: 22, parent: 1, txt: '平铺(<u>S</u>)', css: "menu3_3", hover: "menu3_3 on3" },
 { id: 23, parent: 1, txt: '图标(<u>N</u>)' },
 { id: 24, parent: 1, txt: '列表(<u>L</u>)' },
 { id: 25, parent: 1, txt: '详细信息(<u>D</u>)' },
 { id: 31, parent: 3, txt: '名称(<u>N</u>)', css: "menu3_3", hover: "menu3_3 on3" },
 { id: 32, parent: 3, txt: '类型(<u>S</u>)' },
 { id: 33, parent: 3, txt: '大小(<u>T</u>)' },
 { id: 34, parent: 3, txt: '修改时间(<u>M</u>)' },
 { id: 35, parent: 3 },
 { id: 36, parent: 3, txt: '按组排列(<u>G</u>)', css: "menu3_4", hover: "menu3_4 on3" },
 { id: 37, parent: 3, txt: '自动排列(<u>A</u>)' },
 { id: 38, parent: 3, txt: '对齐到网格(<u>L</u>)' },
 { id: 41, parent: 11, txt: '剩下由你来写' }
];
forEach(menu3, function(menu){
 var id = menu.id | 0;
 switch (id) {
  case 1 :
  case 3 :
  case 11 ://有下级菜单
   menu.css = "menu3_2"; menu.hover = "menu3_2 on3"; break;
  case 2 :
  case 5 :
  case 7 :
  case 10 :
  case 12 :
  case 35 ://分割线
   menu.css = menu.hover = "line3"; break;
  case 8 :
  case 9 ://不能选择
   menu.css = menu.hover = "menu3_1"; break;
  case 4 ://刷新
   menu.property = { onmouseup: function(){ location.reload(); } }; break;
  case 21 :
  case 22 :
  case 23 :
  case 24 :
  case 25 ://"查看"子菜单
   menu.property = { onmouseup: function(){ Select([21,22,23,24,25], id, "menu3_3"); } }; break;
  case 31 :
  case 32 :
  case 33 :
  case 34 ://"排列图标"子菜单1
   menu.property = { onmouseup: function(){ Select([31,32,33,34], id, "menu3_3"); } }; break;
  case 36 :
  case 37 :
  case 38 ://"排列图标"子菜单2
  menu.property = { onmouseup: function(){ Select([36,37,38], id, "menu3_4"); } }; break;
 }
});
var fm3 = new FixedMenu(["idContainer3", "idContainer3_2"], {
 Menu: menu3, Delay: 0, Hover: "on3",
 Fixed: { Align: "right", vAlign: "clienttop", CustomTop: -4, CustomLeft: -2, Adaptive: true, Reset: true }
});
var area = $$("idArea"), container3 = $$("idContainer3"), container3_2 = $$("idContainer3_2");
function Hide(){
 fm3.Hide(); container3.style.display = "none";
}
function Select(group, id, css){
 Hide();
 var menu = [];
 forEach(group, function(i){
 i !== id && menu.push({ "id": i, "css": "", "hover": "on3" });
 });
 menu.push({ "id": id, "css": css, "hover": css + " on3" });
 fm3.Edit(menu);
}
addEvent(area, "contextmenu", function(e){
 with(container3.style){
  left = e.pageX + "px"; top = e.pageY + "px"; display = "block";
 }
 e.preventDefault();
});
container3.oncontextmenu = container3_2.oncontextmenu = function(e){ fixEvent(e).preventDefault(); }
container3.onselectstart = container3_2.onselectstart = function(){ return false; }//ie chrome safari
addEvent(container3, "mouseup", function(e){ e.stopPropagation(); });
addEvent(document, "mouseup", Hide);
addEvent(window, "blur", Hide);
</script>
<br>
仿淘宝拼音索引菜单： <br>
<br>
<style type="text/css">
.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;}
/* 3water.com */
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;}
</style>
<div id="idContainer4" class="container4">
 <div><b>Tag索引</b></div>
 <ul id="idMenu4">
  <li id="idMenu4_1"><a href="#">Table</a></li>
  <li id="idMenu4_2"><a href="#">Fixed</a></li>
  <li id="idMenu4_3"><a href="#">Color</a></li>
  <li id="idMenu4_4"><a href="#">Date</a></li>
  <li id="idMenu4_5"><a href="#">Select</a></li>
 </ul>
</div>
<ul id="idContainer4_2" class="container4_2">
 <li id="idMenu4_11"><a href="#">Table行定位效果</a></li>
 <li id="idMenu4_12"><a href="#">Table排序</a></li>
 <li id="idMenu4_21"><a href="#">浮动定位提示效果</a></li>
 <li id="idMenu4_22"><a href="#">仿LightBox内容显示效果</a></li>
 <li id="idMenu4_31"><a href="#">颜色梯度和渐变效果</a></li>
 <li id="idMenu4_41"><a href="#">blog式日历控件</a></li>
 <li id="idMenu4_42"><a href="#">日期联动选择器</a></li>
 <li id="idMenu4_51"><a href="#">多级联动select</a></li>
</ul>
<br>
<br>
<script>
var menu4 = [
 { id: 1, parent: 0, elem: 'idMenu4_1', active: "menu4" },
 { id: 2, parent: 0, elem: 'idMenu4_2', active: "menu4" },
 { id: 3, parent: 0, elem: 'idMenu4_3', active: "menu4" },
 { id: 4, parent: 0, elem: 'idMenu4_4', active: "menu4" },
 { id: 5, parent: 0, elem: 'idMenu4_5', active: "menu4" },
 { id: 11, parent: 1, elem: 'idMenu4_11' },
 { id: 12, parent: 1, elem: 'idMenu4_12' },
 { id: 21, parent: 2, elem: 'idMenu4_21' },
 { id: 22, parent: 2, elem: 'idMenu4_22' },
 { id: 31, parent: 3, elem: 'idMenu4_31' },
 { id: 41, parent: 4, elem: 'idMenu4_41' },
 { id: 42, parent: 4, elem: 'idMenu4_42' },
 { id: 51, parent: 5, elem: 'idMenu4_51' }
];
new FixedMenu([ { id: "idContainer4", menu: "idMenu4" }, "idContainer4_2" ], {
 Menu: menu4, FixedMenu: false,
 Fixed: { Align: "clientleft", vAlign: "bottom", CustomTop: -1 }
});
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 #Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 #Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 #Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 #Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 #Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 #Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 #Javascript
面向接口(1) BeautifulSoup4(2) Android Studio(4) Flask Web(1) OpenGL(1) exec(1) tfx(1) OpenAI baselines(1) MyBatis(5) cv2(1)
You might like
php判断linux下程序问题实例
2015/07/09 PHP
php实现的xml操作类
2016/01/15 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
用django设置session过期时间的方法解析
2019/08/05 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
WatchShop法国：英国排名第一的独立手表零售商
2020/02/17 全球购物
俄罗斯运动、健康和美容产品在线商店：Lactomin.ru
2020/07/23 全球购物
请说出几个常用的异常类
2013/01/08 面试题
生物科学专业职业规划书范文
2014/02/11 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
父母对孩子的寄语
2014/04/09 职场文书
搞笑爱情保证书
2014/04/29 职场文书
优秀纪检干部材料
2014/08/27 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
想要创业，那么你做好准备了吗？
2019/07/01 职场文书
opencv检测动态物体的实现
2021/07/21 Python