jQuery经典⼩案例⽬录
下拉菜单案例
效果图：
源代码：
⿏标进⼊事件mouseenter ⿏标离开事件mouseleave
下拉动画slideDown /slideUp
.stop() 停⽌动画
<script>
$(function(){
var $li=$(".wrap>ul>li")
$li.mouseenter(function () {
$(this).children("ul").stop().slideDown();
})
$li.mouseleave(function () {
$(this).children("ul").stop().slideUp();
})
});
</script>
突出展⽰案例
效果图：
源代码：
兄弟标签 $( ).siblings( )
<script>
$(function () {
$(".wrap>ul>li").mouseenter(function () {
jquery源码在线
//给li注册⿏标进⼊事件，让li都变亮
//让li的所有兄弟透明度降低
$(this).css("opacity","1").siblings().css("opacity",".4");      });
$(".wrap").mouseleave(function () {
//离开⽗盒⼦时，所有li亮起来
//$(this).children().children("li");
$(this).find('li').css("opacity", 1);
});
});
</script>
淘宝精品案例
效果图：
淘宝精品案例 效果图
源代码：
获取索引⽤ .index()；
筛选选择器 $().eq(i)；
<script>
$(function () {
$("#left>li").mouseenter(function () {
var index=$(this).index();
$("#center>li").eq(index).show().siblings().hide();
});
$("#right>li").mouseenter(function () {
var index=$(this).index()+9;
$("#center>li").eq(index).show().siblings().hide();
});
});
</script>
京东呼吸灯案例
效果图：点击 切换图⽚
京东呼吸灯案例 效果图
源代码：
给左右焦点按钮注册点击事件
右按钮当索引++ 等于图⽚的个数时，索引跳转到第⼀张图⽚（左按钮为-1时，跳转最后⼀张图⽚）下⼀张图⽚fadeIn 动画显⽰，所有兄弟图⽚ fadeOut 动画渐隐，实现呼吸灯效果
<script>
$(function () {
var $li = $(".slider>ul>li");
var count = 0;
$(".arrow-right").click(function () {
count++;
if(count == $li.length){
count = 0;
}
$li.eq(count).fadeIn(1000).siblings().fadeOut(1000);
});
$(".arrow-left").click(function () {
count--;
if(count == -1){
count = $li.length - 1;
}
$li.eq(count).fadeIn(1000).siblings().fadeOut(1000);
});
});
</script>
tab栏切换案例
效果图：
源代码：
1.给所有tab注册⿏标进⼊事件
2.给当前tab添加样式addClass（“样式名”），给其他兄弟移除样式【排他功能】
3.获取当前索引，给当前div添加选中（display：block），其他图⽚隐藏
<script>
$(function () {
$(".tab-item").mouseenter(function () {
$(this).addClass("active").siblings().removeClass("active");
var idx=$(this).index();
$(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
});
});
</script>
⼿风琴案例
效果图：
源代码：
<script>
$(function () {
var $li = $("#box li");
for (var i = 0; i < $li.length; i++) {
$li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");
}
//给所有的li注册⿏标经过事件
$li.mouseenter(function () {
$(this).stop().animate({width:800}).siblings().stop().animate({width:100});
}).mouseleave(function () {
$li.stop().animate({width:240});
});
});
</script>
城市选择案例
效果图：

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