前端
꧁小ۣۖิ鸽ۣۖิ子ۣۖิ꧂
天道酬勤、厚德载物
展开
-
点击背景冒泡
容器,一个div里面再嵌套一个div,然后给它们一个id,还有设置它的宽度和高度;样式,给body还有div样式,使它看起来好看一些,再给body样式js增添效果:这是面对对象编程效果图:最后完成!点击会有冒泡弹出效果图:...原创 2022-02-24 08:33:09 · 246 阅读 · 0 评论 -
JS实现左右切换
首先,给一个标题标签,做醒目的提示提示我们该怎么操作然后用一个盒子包裹住要切换的元素,如下:然后,为了让它看起来更好看一点,给它添加一些好分辨的样式,如下再用js增添效果:获取id鼠标按下鼠标移动时鼠标松开时效果图:最后完成!...原创 2022-01-06 15:03:44 · 1278 阅读 · 4 评论 -
彩色小球跟随光标
容器,一个画布标签,然后给它一个id,还有设置它的宽度和高度;样式,给画布标签样式,使它看起来好看一些,再给body样式js增添效果:首先,这是面对对象编程下面两个都是删除球操作创建prototype原型对象渲染小球canvas 设置鼠标监听,鼠标移动过程中创建小球效果图:最后完成!...原创 2021-12-21 10:15:31 · 185 阅读 · 1 评论 -
适用背景的动态拉线球
元素直接给一个画布标签,然后给它一个id;样式,给画布标签一个 display:block;的样式,使它转为块级元素,再用通用符 * 给全局的样式的外边距和内边距设为零js增添效果:首先,先获取画布标签的id,然后声明一个变量来接收指向二维绘图的环境,然后再获取它的宽高,如:第一步先创建父函数名为ball 三个参数,给球在里面创建一个随机的定位在canvas内 确定一个半径值再确定一个颜色orange,然后给球一个随机的运动趋势第二步创建一个空数组 ,再返回第一步,把空数组push进父函数ba原创 2021-12-20 19:49:18 · 276 阅读 · 0 评论 -
特等刮刮乐
1.建立一个HTML5页面首先在一个给一个块级盒子装奖项和一个画布标签,然后再给一个”再来一个”的按钮,如:2.再建立一个样式表3.再建一个js表最后用js代码,增添效果,如下图:4.全部完成后,打开页面首先是刚进去没有点击任何键然后点击一下回车键,如:最后完成!...原创 2021-12-08 16:49:06 · 160 阅读 · 0 评论 -
水杯动态特效
案例原理:给一个空的大盒子作为容器,添加样式使它生动起来。html,就一个大盒子 ,里有缓慢升起(缓慢降落)的液体水。css样式使大盒子生动起来。最后关键的一步,修改一下参数即可。最后我们来看下图片...原创 2021-12-08 16:40:24 · 375 阅读 · 1 评论 -
简单抽奖效果
案例原理:在一个大盒子里面放八个装图片的盒子,再放一个放开始的盒子一共九个,抽奖的概率是随机的。html,就两个内容一个大盒子 ,里有八个装奖品图片的盒子,还有一个放开始键的盒子。css样式给大盒子一个宽度和高度。最后关键的一步如果想要选中中奖得给他一个判断条件,修改一下参数即可。最后我们来看下图片...原创 2021-11-27 08:41:45 · 96 阅读 · 0 评论 -
星星闪烁效果
1.建立一个HTML5页面给一个启动的按钮,然后给一个空盒子做效果,如:2.再建立一个样式表给按钮一个黄色按钮,然后再给空盒子布置样式3.再建一个js表最后用js代码,给空盒子添加样式,增添效果注释图中有,不懂问4.全部完成后,打开页面首先是刚进去没有点击任何键然后点击一下回车键,如:最后完成,为以后的项目键盘事件提供了快捷方式!...原创 2021-11-27 08:36:27 · 4016 阅读 · 0 评论 -
盒子躲避鼠标
案例原理:在一个大盒子里面放一个图片让它在一个随机的定位,躲避的速率也是随机的。html,就两个内容一个大盒子 ,里有一个图片,大盒子相对定位,图片绝对定位。css样式给大盒子一个宽度和高度。盒子样式 就是 border-radius: 100%,颜色自定;后我们来看代码一.首先给图片一个随机定位,获取到大盒子的宽减去图片的宽,就是图片横轴上的活动范围,命名为x,以此类推图片竖轴上活动范围命名为y。二. 然后再确定一个开始的运动趋势,随机数决定的方向。二.以上两种条件都满足了之后就就开始执行原创 2021-11-17 10:26:46 · 4678 阅读 · 5 评论 -
获取键盘按下的键位对应ask码
1.建立一个HTML5页面只需要用一个元素来做容器即可,如:2.再建立一个样式表给容器上样式来使容器外貌更加美观3.再建一个js表再引入jq 去实现效果4.全部完成后,打开页面首先是刚进去没有点击任何键然后点击一下回车键,如:最后完成,为以后的项目键盘事件提供了快捷方式!...原创 2021-11-17 10:20:00 · 348 阅读 · 1 评论 -
Flex 布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009 年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Fl原创 2021-09-26 15:34:17 · 54 阅读 · 1 评论