jQuery经典小案例

目录

下拉菜单案例

突出展示案例 

淘宝精品案例

 京东呼吸灯案例

tab栏切换案例

手风琴案例

 城市选择案例

 微博发布案例

弹幕效果案例

 固定导航栏案例

 小火箭返回顶部案例

音乐导航栏案例

---

 

 

下拉菜单案例

 

效果图：

源代码： 

鼠标进入事件mouseenter 鼠标离开事件mouseleave

下拉动画slideDown /slideUp

.stop() 停止动画

 

突出展示案例 

效果图： 

源代码： 

兄弟标签 $( ).siblings( ) 

 

淘宝精品案例

效果图：

淘宝精品案例 效果图

 

源代码：

 获取索引用 .index()；  

筛选选择器 $().eq(i)；

 京东呼吸灯案例

效果图：点击 切换图片

京东呼吸灯案例 效果图

 

源代码：

给左右焦点按钮注册点击事件

右按钮当索引++ 等于图片的个数时，索引跳转到第一张图片（左按钮为-1时，跳转最后一张图片）

下一张图片fadeIn 动画显示，所有兄弟图片 fadeOut 动画渐隐，实现呼吸灯效果

tab栏切换案例

效果图：

源代码：

1.给所有tab注册鼠标进入事件

2.给当前tab添加样式addClass（“样式名”），给其他兄弟移除样式【排他功能】

3.获取当前索引，给当前div添加选中（display：block），其他图片隐藏

手风琴案例

效果图：

源代码： 

 城市选择案例

效果图：

源代码：

主要考察层级（子代）选择器、筛选选择器、appendTo等

 微博发布案例

效果图：

源代码：

. val() 获取文本的值   .trim( )；清除空白片段

若输入内容长度不等于0，则将获取到的内容添加到ul中的li里面

再将输入框内的内容清空

弹幕效果案例

效果图：

源代码：

1.定义颜色数组， 设置弹幕的随机颜色和随机高度

2.创建一个span与输入框内容一致。设置随机颜色和初始位置（x,y），添加到盒子内

3.动画 匀速 从右到左，执行完以后删除此span（回调函数），删除文本框内容

4.设置e.keyCode==13，即键盘回车键抬起事件时，触发事件

 固定导航栏案例

效果图：

源代码：

 小火箭返回顶部案例

效果图：（点击火箭，返回页面顶部）

源代码：

音乐导航栏案例

效果图：（移动鼠标或键盘按下 音乐）

源代码：

1.注册鼠标进入事件 ，span外边距动画

2.获取当前索引，播放对应音乐，注册鼠标离开事件，span下拉

3.注册键盘按下与抬起事件，获取每个键e.keyCode值，触发对应的鼠标进入事件（节流阀 重点）