案例练习
关注
分享
扫一扫
实战案例
苦涩2020
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
基于jQuery实现幻灯片切换效果
效果图功能：1、幻灯片自动切换；2、点击下方小圆点切换对应幻灯片；3、点击左右两侧耳朵控制幻灯片切换至上一张或下一张；4、鼠标悬停幻灯片上时，幻灯片停止切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/res.原创 2020-07-02 11:28:32 · 766 阅读 · 0 评论 -
基于jQuery实现自动或点击切换效果
效果图功能：元素自动切换，当点击下方小圆点时，控制上方元素同步切换方法：主要是定义一个全局变量，通过自增变化来控制自动切换效果，其中当自身显示时，兄弟元素隐藏；给小圆点添加单击事件，当点击时，传递自身对象给单击切换函数，通过对象获取点击对象的下标值，从而切换元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</.原创 2020-07-01 23:16:52 · 1099 阅读 · 0 评论 -
基于jQuery实现水平轮播效果
效果图方法：使用动画效果，让第一幅图的宽度逐渐变为0px，然后将第一幅图添加至父元素末尾<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <script src="./.原创 2020-07-01 22:18:53 · 436 阅读 · 1 评论 -
基于jQuery实现垂直轮播效果
效果图方法：使用定时器让元素不断替换及高度变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <script src="./jquery-3.4.1.min.js"&.原创 2020-07-01 16:58:13 · 712 阅读 · 0 评论 -
基于JavaScript实现放大镜效果
基于JavaScript实现放大镜效果描述：右侧图片必须是左侧图片的倍数大，主要是获取鼠标相对与被触发元素的坐标位置，再通过位置定位实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> *{ .原创 2020-06-21 23:17:11 · 352 阅读 · 0 评论 -
基于CSS3实现水平轮播效果
效果图方法：使用动画实现功能；鼠标悬停可以实现暂停<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> .原创 2020-06-01 11:48:38 · 393 阅读 · 0 评论 -
基于CSS3实现垂直轮播效果
效果图方法：使用动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> .box{ .原创 2020-05-31 23:47:18 · 1771 阅读 · 0 评论 -
基于CSS3实现闪光条效果
效果图方法一：使用转换中的倾斜转换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> .box{ .原创 2020-05-31 23:28:24 · 653 阅读 · 0 评论 -
基于CSS3实现元素宽度向两侧延伸
效果图方法一：使用转换中的角度转换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> nav{ .原创 2020-05-31 22:09:39 · 1479 阅读 · 0 评论 -
基于JavaScript实现配对游戏
基于JavaScript配对游戏当用户点击两个相同的图案或字符后配对成功，全部配对成功后游戏获胜界面如下：代码如下：有兴趣的朋友欢迎继续完善 ^ _ ^<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>配对游戏<...原创 2020-04-23 13:48:13 · 740 阅读 · 0 评论 -
基于JavaScript实现网页计算器
基于JavaScript的网页计算器基于HTML、CSS、JavaScript制作的网页计算器，其中可以实现加、减、乘、除、取整、求余、阶乘、科学计数等功能界面如下：有兴趣的朋友可以继续完善 ^ _ ^代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...原创 2020-04-04 23:13:17 · 2672 阅读 · 0 评论