jQuery模拟select下拉显隐菜单
[ jquery效果 ]
到年底了，项目吃紧，WEB前端这块需要做不少，一会需要写个js特效，一会哪边浏览器兼容有问题，主要是坑爹的IE6，再又一会又是新的版本需要上线。
select给咱前端开发们带来无尽的烦恼，就最比较有名的IE6下select挡住这个，就够你折腾一阵了。
下面分享一个jQuery模拟select下拉显隐菜单，这样远离了select问题少好多。
部分代码javascript代码
<script type="text/javascript">
$(document).ready(function(){
$("#jqueryClick").click(function(){
var $showcon=$(".jqueryCon");
$("#jqueryCon").slideToggle('slow',function(){
if(!$(this).is(":hidden")){
$(".j1").jqueryba();
$(".j2").jqueryba();
$(".j3").jqueryba();
$(".j4").jqueryba();
$(".j5").jqueryba();
$(".j6").jqueryba();
$(".j7").jqueryba();
$(".jqueryClick").text("隐藏信息");
}else{
$(".jqueryClick").text("显示信息");
}   
});       
});
})
</script>
css部分代码
*{margin:0;padding:0}
body{margin:0 auto}
ul,li{list-style: none}
.box{width:1327px;margin:0 auto;}
.jqueryMenu{width:100%;height:32px;background:url("images/menuBg.png") no-repeat;float:left;line-height:32px;}
.jqueryMenu li{width:170px;float:left;display:inline;height:32px;text-indent:1em}
.jqueryCon{width:1323px;height:100px;float:left;border-left:2px #d4c0a2 solid;border-right:2px #d4c0a2 solid;}
.jqueryCon div{float:left}
.j1 span{width:120px;display:inline}
.jqueryMenuDown{width:100%;height:7px;float:left;}
<!--#jqueryClick{width:144px;height:20px;margin:2px auto 0 auto;cursor:pointer;background:url(images/menuClick.png) no-repeat}-->
.j1{background:#f5f5f5;width:284px;height:100px;}
.j2{background:#f5f5f5;width:170px;height:100px;}
.j3{background:#f5f5f5;width:174px;height:100px;}
.j4{background:#f5f5f5;width:176px;height:100px;}
jquery翻书效果.j5{background:#f5f5f5;width:174px;height:100px;}
.j6{background:#f5f5f5;width:174px;height:100px;}
.j7{background:#f5f5f5;width:170px;height:100px;}
.blue{color:#aa9c93}
a.blue{color:#aa9c93;text-decoration: none}
a:hover.blue{color:#0f0f0f;text-decoration: none}
//图片切换
Jquery代码
<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");/*鼠标移动*/
$.jq
uerybaTab("#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-right:1px #cacaca solid;border-top:1px #cacaca solid}
.suningTabCont{width:890px;height:385px;float:left}
.suningTabCont li{width:100%;float:left}
.floorGeneral{width:890px;float:left}
.floorGeneralLeft{width:400px;height:385px;float:left;overflow:hidden}
.floorGeneralRight{width:478px;height:385px;float:left;background:#f2f2f2}
.floorGeneralRight dt{width:120px;float:left;margin-left:30px;margin-top:15px;display:inline}
.floorGeneralRight dt h1{width:100%;height:36px;float:left;overflow:hidden}
.floorGeneralRight dt span{width:100%;height:20px;float:left;color:#dd0000}
.floorGeneralRight dt div{width:120px;height:120px;float:left;overflow:hidden}
.j2,.j3,.j4,.j5,.j6{display:none}
.x2,.x3,.x4,.x5,.x6{display:none}
.suningTabTitle .hover{background:#ffffff;}
.floor .floorHover{width:16px;height:16px;background:url(images/sprite.png) no-repeat -160px -20px;position:absolute;right:8px;top:10px}
.black{color:#333333;font-weight:bolder}
a.black{color:#333333;text-decoration:none;font-weight:bolder}
a:hover.black{color:#ff6600;text-decoration:none;font-weight:bolder}
//图片放大效果
$(document).ready(function() {
var move = -15
zoom = 1.1;
$('.item').hover(function() { 
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeIn(300);
},
function() {
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeOut(400);
});
});
//导航栏滑动效果
$("#navUl a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLineTwo.stop().animate({
left: leftPos,
width: newWidth
})
}, function() {
$magicLineTwo.stop().animate({
left: $magicLineTwo.data("origLeft"),
width: $magicLin
eTwo.data("origWidth")
});   
});
//图片轮换
$(function() {
var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
/
/为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
/
/上一页按钮
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
//下一页按钮
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。