随笔分类 - 前端
摘要：动画封装 增加多条动画同时执行 将前进后退/放大缩小方法合并 增加动画执行完成后回调方法 将代码封装到动画类中 代码 html代码 <button class="begin500">开始到500</button> <button class="begin200">开始到200</button> <b
阅读全文
摘要：带动画轮播图 预览图 说明 轮播分两种，循环无限轮播和不无限轮播 不无限轮播：当index到达最后一张或者第一张图片时，直接return； 无限轮播：首先在html代码中多定义一个li <ul> <li><img src="IMG/ad1.jpg" alt="1"></li> <li><img sr
阅读全文
摘要：缓动动画 预览图 缓动动画和匀速动画区别并不大，匀速动画的step是固定的，所以展示的效果就是匀速变化，随意缓动动画只要将step改为动态由多变少就可以了 缓动动画公式 缓动动画公式 （结束位置 - 起始位置）* 缓动系数（0~1） step = (target - begin) * 0.3; 同时
阅读全文
摘要：匀速动画 预览图 代码 先将通用的html和css代码贴出来 html代码 <button class="begin500">开始到500</button> <button class="begin200">开始到200</button> <button class="end">结束</button
阅读全文
摘要：预览 html代码 <div class="box"> <img src="img/long.gif" alt="长图"> <div class="box-top"></div> <div class="box-bottom"></div> </div> css代码 <style> * { marg
阅读全文
摘要：预览 html代码 <div class="main-view"> <h1 class="property-center">京东秒杀</h1> <p class="property-center">FLASH DEALS</p> <img src="img/shandian.png" alt="闪电
阅读全文
摘要：效果图 html代码 <div> <img src="image/pic1.jpg" alt="图片" class="mainImage"> <p></p> <ul> <li><img src="image/pic1.jpg" alt="图片1"></li> <li><img src="image/
阅读全文
摘要：效果图 html代码 <div class="main"> <ul> <li>Q</li> <li class="weixin">W</li> <li>W</li> </ul> <div class="code-div"> <p>扫描二维码</p> <img src="image/IMG_6708.
阅读全文
摘要：样式 内联样式（不推荐） 又称之为行内样式将样式直接写在元素的style属性上 CSS样式之间试用;隔开，建议每条样式后都加上分号; 缺点：因为是单个元素设置样式，不方便维护。 <div style="color: red; background: blue">测试</div> 文档样式表（常用）
阅读全文
摘要：结构标签 !DOCTYPE HTML 位于HTML文档的第一行，他表示html使用哪一种规范来编码 html 告知此文档是一个html文档 每个html文档中只能有一对html标签，包含这文档的开始和结束，在它们之间包含这头部（head）和主体（body） head 文档的头部标签 它是所有头部标签
阅读全文
摘要：先上图 首先创建基本框架 html代码 <img src="IMG/ad1.jpg" alt="图片"> <p> <span class="lt"><</span> <span class="gt">></span> </p> css代码 div { width: 670px; bord
阅读全文
摘要：创建地图 直接通过css来创建 @charset "UTF-8"; .map { width: 600px; height: 600px; border: 1px solid gray; margin: 100px auto; position: relative; } 创建食物 首先定义食物的构造
阅读全文
摘要：DOM开篇 window 是一个全局对象，代表浏览器中一个打开的窗口，每个窗口都是一个window对象 document document是window的属性，这个属性是一个对象 document代表当前窗口的整个网页 通过document就可以拿到网页上的所有内容 DOM （文档模型对象） DOM
阅读全文
摘要：三大特性 封装 封装性就是隐藏实现细节，仅对外提供接口。 function Test() { this.name = 1; // -- 私有属性，外部无法访问 let age = 30; // -- 私有属性，外部无法访问 // -- 提供共有方法设置属性 this.setAge = functio
阅读全文
摘要：函数 函数和方法的区别 什么是函数 没有和其他的类绑定在一起的称为函数 function test() { console.log("你好呀"); } test(); 什么是方法 和其他类绑定再一起的称为方法 let test = { say:function () { console.log("你
阅读全文
摘要：常量 常量表示一些固定不变的数据 现实生活中人的性别其实就可以看做是常量, 生下来是男孩一辈子都是男孩, 生下来是女孩一辈子都是女孩 JavaScript中常量的分类 整型常量 整型常量其实就是正数, 在JavaScript中随便写一个整数都是整型常量 1 / 666 / 99 实型常量 实型常量其
阅读全文
浙公网安备 33010602011771号