仿苏宁电器楼层图片jQuery切换效果.docVIP

仿苏宁电器楼层图片jQuery切换效果 仿天猫商城鼠标移近图片变暗的jquery特效代码 $(function(){ $(.floor-maskItem).mouseover(function(){ $(this).addClass(qq).parent().addClass(hover); }).mouseout(function(){ $(this).removeClass(qq).parent().removeClass(hover); }); }) 仿苏宁电器楼层图片jQuery切换效果 部分javascript代码 script type=text/javascript $(document).ready(function() { jQuery.jquerybaTab = function(tabTitle,tabCon,event) { $(tabCon).find(li).hide(); $(tabTitle).find(li:first).addClass(hover).show(); $(tabCon).find(li:first).show(); $(tabTitle).find(li).bind(event,function(){ $(this).addClass(hover).siblings(li).removeClass(hover); var activeindex = $(tabTitle).find(li).index(this); $(tabCon).children().eq(activeindex).show().siblings().hide(); return false; }); }; /*调用方法如下：*/ $.jquerybaTab(#floorA1,#floorA2,mouseover);/*鼠标移动*/ $.jquerybaTab(#floorB1,#floorB2,click);/*鼠标点击*/ }); /script 部分css代码 .suningTab{width:890px;margin:10px auto} .floor{width:194px;height:36px;float:left;line-height:36px;background:#ff6600;color:#ffffff;position:relative} .floor b{float:left;margin-left:10px;display:inline} .floor span{width:16px;height:16px;background:url(images/sprite.png) no-repeat -160px 0;position:absolute;right:8px;top:10px} .floorUl{width:192px;height:200px;border:1px #ff6600 solid;border-top:none;position:absolute;z-index:100;top:36px;background:#ffffff;display:none} .suningTabTitle{width:690px;height:34px;float:left;line-height:34px;} .suningTabTitle li{width:113px;float:left;text-align:center;cursor:pointer;background:#f1f1f1;border-bottom:1px #737878 solid;border-righ