小例子
关注
分享
扫一扫
江南时雨
这个作者很懒，什么都没留下…
展开
-
JS轮播图
JS轮播图轮播图的结构：左右按钮、中间滚动的图片用li装着、表示图片滚动的小圆点<div class="focus fl"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow_l"></a> <!-- 右侧按钮 --> <a href="javascript原创 2021-03-12 23:53:06 · 149 阅读 · 0 评论 -
一个简单的缓动动画函数
一个简单的缓动动画函数缓动动画的思路：1.让盒子每次移动的距离慢慢变小，速度就会慢慢降下来；2.核心算法：（目标值-现在的位置）/10 ， 作为每次移动的距离步长；3.停止的条件是: 让当前盒子位置等于目标位置时就停止定时器。还有一个关键就是可能每次计算的步长会出现小数的情况，导致移动的位置距离预计距离有一点差距。所以要把步长值修改为整数如果步长大于0（移动反向向正方向）就向上取整，如果小于零（移动反向向负方向）就向下取整。使用三元表达式比较简洁// 把步长值改为整数 不要出现小数的问题原创 2021-03-10 21:41:51 · 383 阅读 · 0 评论 -
商品放大镜案例
商品放大镜案例当鼠标放在旁边的小商品图片上时可以看到一个相同商品的大图一、实现效果：二、步骤：一、当鼠标经过 preview_img 就是显示和隐藏 mask遮挡层和big大盒子 （1）.分为鼠标经过（mouseover）和鼠标离开事件（mouseout）二、鼠标移动的时候，让黄色的盒子跟随鼠标移动 （1）.计算鼠标在盒子内部的坐标 &nbs原创 2021-03-08 23:51:58 · 206 阅读 · 0 评论 -
倒计时效果
倒计时效果这是我在b站视频上学到的一个倒计时效果1、定时器 window.setInterval(调用函数，延时时间)的使用：（1）、window可以省略（2）、每隔延时时间就会去重复调用这个函数一个要注意的地方：当我们正常完成这个功能后，当每次刷新页面时，倒计时框里会出现我们最开始在盒子里初始化的 1 2 3.解决方法是 我们在开启倒计时前 先调用一次这个函数，防止第一次刷新时页面有空白<body> <div> <span class="原创 2021-03-06 11:29:48 · 180 阅读 · 0 评论 -
输入框放大的例子
输入框放大的例子b站上看到的一个例子，类似于京东快递单号查询单号 <style> * { margin: 0; padding: 0; } .search { position: relative; width: 178px; margin: 100px; }原创 2021-03-05 23:53:07 · 203 阅读 · 0 评论 -
tab栏切换的小例子
tab栏切换的小例子初学JS&API跟着视频做了一个 tab 栏切换的案例思路：1、tab切换 点击上面的选项卡底色会变成红色，其余不变（利用排他思想—核心是先干掉其他人，然后留下我自己）----这里可以使用修改类名的方式2、当点击上面的选项卡后 下面的内容会随之变化，下面要写到点击事件里3、上面的选项与下面的内容一一对应，可以给上面的每一个选项添加自定义的属性，属性值从0开始，与for循环里的 i 值相对应 更加方便~~<!DOCTYPE html><html l原创 2021-03-02 23:16:01 · 537 阅读 · 0 评论 -
一个全选和取消全选的例子
一个全选和取消全选的例子初学跟着网上视频做了一个 全选和取消全选的例子1.一个大的盒子里面放一个表格 装有一些数据 还有 复选框 checkbox2.先获取 表格标题复选框 和 表格数据部分复选框 元素3. 先完成勾选表头的复选框实现全选的功能—利用for循环 将表头复选框的状态赋给下面每个复选框， " this.checked " 可以得到当前复选框的状态 返回值为 true 或者 false4. 下一步 实现 如果勾选后 表格数据部分没有被全部选中则取消表头的全选，还是利用for 循环，原创 2021-03-02 13:37:39 · 294 阅读 · 0 评论 -
一个关闭二维码的例子
一个关闭二维码的例子初学js现在才开始学js 记录一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal原创 2021-03-01 00:19:07 · 270 阅读 · 0 评论 -
一个隐藏密码的小例子
一个隐藏密码的小例子学了一点基础js 照着写了一个隐藏密码的例子~~~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi原创 2021-02-28 20:08:37 · 172 阅读 · 0 评论