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>