
JavaScript 小案例
主要是一些小的案例
super code
努力生活
展开
-
鼠标跟随特效
鼠标跟随鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动代码<style> body{ height:5000px; } div{width:50px; height:50px; background:red; border-radius:50%; position:absolute;}</style>js 代码<script> window.onload = function(){原创 2021-07-27 15:44:46 · 2056 阅读 · 0 评论 -
弹性小球 ~ 注释详细
弹性小球源码css代码<style type="text/css"> html,body{ margin: 0; padding: 0; } #box{ width: 100px; height: 100px; border-radius: 50%; background: #FF0000; position: absolute; left: 0; top: 0; } </style&原创 2021-07-27 15:18:39 · 166 阅读 · 0 评论 -
纯js实现烟花效果
概述在网页背景中实现鼠标点击出现模拟烟花爆炸的特效思路/* document - 点击事件 - 坐标值 火花 - 接收坐标值 创建火花 设置样式 定位 - left = x top = document.documentElement.clientHeight - 50 添加到页面 运动到点击的位置 - 到达位置 - 火花消失 - 产生爆炸 = 传递坐标值 爆炸 数量原创 2021-07-20 09:06:21 · 1773 阅读 · 3 评论 -
JS轮播图
JS轮播实现功能:图片自动切换鼠标移入停止自动播放点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片实现原理:/* 轮播图核心:当前下标 轮播图方式:left/top/opacity/z-index/display/background 一、添加元素,完善页面 左按钮: 创建元素(span) 设置id( ltBtn) 设置元素内容(<)原创 2021-07-19 22:01:04 · 145 阅读 · 0 评论