WebAPI案例
一些前端WebAPI经典小案例
宫小白(转掘金了)
热爱文学,热爱生活,热爱编程
展开
-
webAPI案例之十分钟搞懂js原生轮播
webAPI案例之十分钟搞懂js原生轮播 一般轮播图的功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。 4.点击小圆圈,可以播放相应图片。 5.鼠标不经过轮播图,轮播图也会自动播放图片。鼠标经过,轮播图模块, 自动播放停止。 虽然boots...原创 2020-02-09 20:13:36 · 243 阅读 · 0 评论 -
webAPI案例之三分钟玩转动画封装
webAPI案例之三分钟玩转动画封装 动画原理: 获得盒子当前位置 让盒子在当前位置加上1个移动距离(注意此元素需要添加定位才能使用left) 利用定时器不断重复这个操作 加一个结束定时器的条件 1. 从简单开始 效果图: 思路相关: 相关代码: <!DOCTYPE html> <html lang="en"> <head> <met...原创 2020-02-08 10:49:27 · 137 阅读 · 0 评论 -
webAPI案例之三分钟玩转tab栏
经典案例之Tab栏 简单效果: 难点解析: 这个小案例的难点在与当我们给li编写事件处理函数时,也要拿到对应的div。 解法就是我们要知道lis的个数和divs是相同的。而且我们要拿的这俩个元素它们是有非常大的联系的。比如我拿到的是lis[2],那么对应的div就应是divs[2]。 事件处理函数中divs的目标索引我们是无法直接拿到,但是我们却可以通过这个处理函数的this拿到触发事件...原创 2020-02-04 23:57:37 · 355 阅读 · 1 评论