JavaScript
关注
分享
扫一扫
javascript知识点总结
、小会
这个作者很懒，什么都没留下…
展开
-
案例——放大镜（JQ实现）
效果图只要做到下面这几步，这个小效果轻松实现准备2张图片（一大一小）控制 移动盒子 / 小图片盒子 === 大图片盒子 / 大图片实现鼠标进入和离开小图片盒子时，大图片盒子和移动盒子的显隐实现移动盒子跟随鼠标在小图片盒子中移动实现大图片跟随小图片盒子移动上源码~ function() { let $magnigierBox = $('.magnigierBox'), $smallBox = $magnigierBox.find('.smallBox'),原创 2021-02-20 18:24:46 · 170 阅读 · 0 评论 -
案例——选项卡插件（原生JS实现）
效果图废话不多说，咋直接上源码！！~ function() { class TabPlugin { constructor(container, options = {}) { //第一个参数必须，并且传递的参数是元素对象 //参数合法性验证 if (typeof container === 'undefined' && container.nodeType === 1) {原创 2021-02-19 22:52:10 · 142 阅读 · 0 评论 -
案例——封装一个轮播图插件
说起插件，可能很多人搞不清楚插件和类库、组件、框架的区别，在这里，我先来简单的聊一聊它们之间的区别和联系类库提供一些真实项目中常用的方法，任何项目都可以把类库导入进来，调取里面的方法实现自己需要的业务逻辑，常见的有jQuery、ZEPTO插件具备一定的业务功能，例如：我们可以封装轮播图插件、选项卡插件、模态框插件等（插件规定了当前这个功能的样式结构，把实现功能的JS进行封装，以后想实现这个功能直接导入插件即可）常见的有swiper / iscroll / jquery-dialog / jqu原创 2021-02-17 12:32:59 · 371 阅读 · 1 评论 -
案例——轮播图（原生JS实现）
效果图首先我们来理一下思路搭建结构注意点：我们需要一个container轮播图容器，溢出隐藏我们需要一个wrapper容器用于存放所有的图片，wrapper相对于container定位，后期改变wrapper的left值实现轮播图的切换写样式…写js获取所有需要操作的元素获取数据（基于AJAX异步获取数据，当然没有服务器提供数据，只能自己写一点）实现数据绑定HTML页面（基于Promise管理异步操作）注意绑定的时候图片要多绑定一个，便于后面实现无缝轮播（每原创 2021-02-16 20:24:55 · 407 阅读 · 1 评论 -
案例——基本的动画效果
基于JS实现基本的动画效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画移动</title> <style> #div1 { width: 200px; height: 200px; background:原创 2021-02-14 20:23:26 · 121 阅读 · 0 评论 -
案例——图片的延迟加载（又称懒加载）
图片的延迟加载（图片的懒加载）图片的延迟加载是前端优化的重要手段之一，开始加载页面的时候，并没有真实的图片，当页面结构和数据都呈现完成后，在加载真实的图片步骤：在结构上，我们把img图片放到div盒子中，开始的时候图片的src为空，我们就把图片的地址存放到自定义属性 data-src中，我们给图片所在的盒子设置一个默认的背景图片占位（要求这张图越小越好 1KB）在JS中，当监听到页面中的结构和数据都加载完成后（或者设置一个间隔时间），开始把data-src自定义属性中存储的真实图片地址.原创 2021-02-13 18:51:58 · 429 阅读 · 0 评论 -
案例——瀑布流（JS实现 / JQ）
效果图代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <link rel="stylesheet" href="css/baseCss原创 2021-02-11 16:17:20 · 156 阅读 · 0 评论 -
案例——jQuery实现选项卡
jQuery实现选项卡代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- import css --> <link rel="stylesheet" href="css/tab.css"></head><bo原创 2021-02-10 22:15:44 · 128 阅读 · 0 评论 -
案例——跑马灯
跑马灯效果图代码html+css<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>跑马灯</title> <link rel="stylesheet" href="css/base原创 2021-02-09 17:18:55 · 179 阅读 · 0 评论 -
DOM的重绘与回流
DOM的重绘与回流计算DOM结构加载CSS生成渲染树浏览器基于显卡按照渲染树画页面重绘当某一个DOM元素样式更改（位置没有变，只是样式更改），浏览器就会重新渲染这个元素box.style.color = 'red';//触发了一次重绘box.style.fontSize = '16px';//又触发了一次重绘...//优化方案：//=>一次性将需要修改的样式搞定，例：//先写个样式类.xxx{ color = 'red', fontSize =原创 2021-02-08 17:04:23 · 243 阅读 · 0 评论 -
案例——拖拽+左右弹跳+自由落体（JS源码实现）
拖拽案例代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>基本的拖拽效果</title> <style> body { -webkit-user-select: none; -moz-user-select: none;原创 2021-02-04 18:14:59 · 235 阅读 · 0 评论 -
案例——N级菜单
N级菜单效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>N级菜单</title> <style> #menu { width: 400px; background: burlywood; }原创 2021-02-01 20:48:45 · 126 阅读 · 0 评论 -
案例——模块化开发选项卡
选项卡效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模块化开发选项卡</title> <style> * { margin: 0; padding: 0; box-sizing: border-box;原创 2021-01-31 21:05:18 · 107 阅读 · 0 评论 -
基于原生JS封装Tool库（源码）
Tool库var Tool = function() { //getElementByClassName在IE678中不存在，因此可以用来判断是不是低版本浏览器 this.flag = "getElementsByClassName" in document;};Tool.prototype = { constructor: Tool, //常用函数 //通过ClassName获取元素 getElementsByClassName: function(c原创 2021-01-30 21:31:39 · 269 阅读 · 0 评论 -
案例——原生js模块化开发日历控件
模块化开发日历效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>日历控件</title> <style> body { -webkit-user-select: none; } #calendar {原创 2021-01-29 23:54:43 · 256 阅读 · 0 评论 -
案例——原生js返回顶部
原生JS实现返回顶部案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>返回顶部的案例</title> <style> body, div { margin: 0; padding: 0; -webkit原创 2021-01-29 17:37:42 · 111 阅读 · 0 评论 -
try catch / throw
js错误处理和异常调试查看报错F12调出控制台错误的处理try catch一旦发生错误，程序就终止执行了。但是js提供try-catch结构，允许对错误处理。try{ throw new Error('出错');//中断程序，抛出错误}catch(e){ console.log(e.name+":"+e.message); console.log(e.stack);}//Error: 出错// at <anonymous>:2:11try代码块抛出错原创 2021-01-24 12:14:54 · 328 阅读 · 0 评论