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 () { -
//给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>
城市选择案例
效果图:

源代码:
主要考察层级(子代)选择器、筛选选择器、appendTo等
-
<script> -
$(function () { -
$("#btn1").click(function () { -
$("#src-city>option").appendTo("#tar-city"); -
}); -
$("#btn2").click(function () { -
$("#src-city").append($("#tar-city>option")); -
}); -
$("#btn3").click(function () { -
$("#src-city>option:selected").appendTo("#tar-city"); -
}); -
$("#btn4").click(function () { -
$("#src-city").append($("#tar-city>option:selected")); -
}); -
}); -
</script>
微博发布案例
效果图:

源代码:
. val() 获取文本的值 .trim( );清除空白片段
若输入内容长度不等于0,则将获取到的内容添加到ul中的li里面
再将输入框内的内容清空
-
<script> -
$(function () { -
$("#btn").click(function () { -
if($("#txt").val().trim().length == 0) { -
return; -
} -
//就是文本框的值 -
$("<li></li>").text($("#txt").val()).prependTo("#ul"); -
$("#txt").val(""); -
}) -
}); -
</script>
弹幕效果案例
效果图:

源代码:
1.定义颜色数组, 设置弹幕的随机颜色和随机高度
2.创建一个span与输入框内容一致。设置随机颜色和初始位置(x,y),添加到盒子内
3.动画 匀速 从右到左,执行完以后删除此span(回调函数),删除文本框内容
4.设置e.keyCode==13,即键盘回车键抬起事件时,触发事件
-
<script> -
$(function () { -
//注册事件 -
var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"]; -
$("#btn").click(function () { -
var randomColor = parseInt(Math.random() * colors.length); -
var randomY = parseInt(Math.random() * 400); -
$("<span></span>")//创建span -
.text($("#text").val())//设置内容 -
.css("color", colors[randomColor])//设置字体颜色 -
.css("left", "1400px")//设置left值 -
.css("top", randomY)//设置top值 -
.animate({left: -500}, 10000, "linear", function () { -
//到了终点,需要删除 -
$(this).remove(); -
})//添加动画 -
.appendTo("#boxDom"); -
$("#text").val(""); -
}); -
$("#text").keyup(function (e) { -
if (e.keyCode == 13) { -
$("#btn").click(); -
} -
}); -
}); -
</script>
固定导航栏案例
效果图:

源代码:
-
<script> -
$(function () { -
$(window).scroll(function () { -
//判断卷去的高度超过topPart的高度 -
//1. 让navBar有固定定位 -
//2. 让mainPart有一个marginTop -
if($(window).scrollTop() >= $(".top").height() ){ -
$(".nav").addClass("fixed"); -
$(".main").css("marginTop", $(".nav").height() + 10); -
}else { -
$(".nav").removeClass("fixed"); -
$(".main").css("marginTop", 10); -
} -
}); -
}); -
</script>
小火箭返回顶部案例
效果图:(点击火箭,返回页面顶部)
源代码:
-
<script> -
$(function () { -
//当页面超出去1000px的时候,让小火箭显示出来,如果小于1000,就让小火箭隐藏 -
$(window).scroll(function () { -
if($(window).scrollTop() >= 1000 ){ -
$(".actGotop").stop().fadeIn(1000); -
}else { -
$(".actGotop").stop().fadeOut(1000); -
} -
}); -
//在外面注册 -
$(".actGotop").click(function () { -
$("html,body").stop().animate({scrollTop:0},3000); -
//scrollTop为0 -
//不做动画,直接返回 :$(window).scrollTop(0); -
}) -
}); -
</script>
音乐导航栏案例
效果图:(移动鼠标或键盘按下 音乐)

源代码:
1.注册鼠标进入事件 ,span外边距动画
2.获取当前索引,播放对应音乐,注册鼠标离开事件,span下拉
3.注册键盘按下与抬起事件,获取每个键e.keyCode值,触发对应的鼠标进入事件(节流阀 重点)
-
<script> -
$(function () { -
//给li注册鼠标进入事件,让li下面的span top:0 播放音乐 -
$(".nav li").mouseenter(function () { -
$(this).children("span").stop().animate({top: 0}); -
//播放音乐 -
var idx = $(this).index(); -
$(".nav audio").get(idx).load(); -
$(".nav audio").get(idx).play(); -
}).mouseleave(function () { -
$(this).children("span").stop().animate({top: 60}); -
}); -
//节流阀 :按下的时候,触发,如果没弹起,不让触发下一次 -
//1. 定义一个flag -
var flag = true; -
//按下1-9这几个数字键,能触发对应的mouseenter事件 -
$(document).on("keydown", function (e) { -
if(flag) { -
flag = false; -
//获取到按下的键 -
var code = e.keyCode; -
if(code >= 49 && code <= 57){ -
//触发对应的li的mouseenter事件 -
$(".nav li").eq(code - 49).mouseenter(); -
} -
} -
}); -
$(document).on("keyup", function (e) { -
flag = true; -
//获取到按下的键 -
var code = e.keyCode; -
if(code >= 49 && code <= 57){ -
//触发对应的li的mouseenter事件 -
$(".nav li").eq(code - 49).mouseleave(); -
} -
}); -
//弹起的时候,触发mouseleave事件 -
}); -
</script>

被折叠的 条评论
为什么被折叠?



