jQuery经典小案例

下拉菜单案例

突出展示案例

淘宝精品案例

京东呼吸灯案例

tab栏切换案例

手风琴案例

城市选择案例

微博发布案例

弹幕效果案例

固定导航栏案例

小火箭返回顶部案例

音乐导航栏案例

下拉菜单案例

效果图：

源代码：

鼠标进入事件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有一个marginTopif($(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. 定义一个flagvar 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>

jQuery经典小案例相关推荐

Vue制作todoList事件备忘录经典小案例
前言今天是10月1日国庆节,行走在大街小巷,处处洋溢着热烈喜庆的节日氛围,在这一天祝愿祖国繁荣昌盛,越来越强大.因国庆放假(本来周六这天有课),今天无聊看了看后台私信,看到了很对私我类似的消息: 很 ...
JavaScript每日一练经典小案例（二）
这些案例都是一些非常经典的案例,有帮助到大家可以点个赞一.禁止复制案例我们可以采用contextmenu的方法让需要复制文字不显示菜单代码如下: //禁用右键菜单document.addEven ...
JavaScript每日一练经典小案例（一）
一.密码显示隐藏效果先看效果: 通过分析,我们可以看到通过改变文本属性可以实现文本显示代码实现原理:通过判断眼睛的点击事件改变 <!DOCTYPE html> <html lan ...
python项目实例初学者-经典Python案例，初学者的小帮手，立马学会Python！
原标题:经典Python案例,初学者的小帮手,立马学会Python! 对于刚开始学习Python的人来说,会通过Python的一些经典案例练手,这样既可以加深对Python的理解,也可以增进自己的技术 ...
JQuery的几个简单小案例（基础）
JQuery的几个简单小案例实现表格的的隔行换色实现复选框的全选与全不选 QQ表情的选择多选下拉列表的左右移动实现表格的的隔行换色需求:事先制作一个如图所示的table表格,将数据行的奇数行 ...
jQuery插件实现图片墙小案例
你想写出绚丽多彩的图片墙吗?想的话就来一起看一下接下来的内容吧接下来就让我们使用两个简单的插件来实现图片墙小案例吧.编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件.( ...
jQuery[详解]+小案例
jQuery的总结 1.初始jQuery 2.jQuery的选择器 3.jQuery的事件和动画 4.使用jQuery操作Dom 小案例 ...
运用JQuery代码写的计算器小案例
JQuery核心函数: (1). jQuery([selector,[context]]) 用法:这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器查找所有匹配的元素). 这个函数接收 ...
jQuery 属性操作——案例：购物车案例模块
案例:购物车案例模块-全选 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...

jQuery经典小案例

下拉菜单案例

突出展示案例

淘宝精品案例

京东呼吸灯案例

tab栏切换案例

手风琴案例

城市选择案例

微博发布案例

弹幕效果案例

固定导航栏案例

小火箭返回顶部案例

音乐导航栏案例

jQuery经典小案例相关推荐

最新文章

热门文章