上一页 1 ··· 23 24 25 26 27 28 29 30 31 ··· 36 下一页

2020年1月15日

205 jQuery 的基本使用:下载,入口函数,顶级对象$,jQuery 对象和 DOM 对象,jQuery 对象和 DOM 对象转换

摘要: 1.2.1 jQuery 的下载 ​ jQuery的官网地址: https://jquery.com/,官网即可下载最新版本。 各个版本的下载:https://code.jquery.com/ ​ 版本介绍: 1x :兼容 IE 678 等低版本浏览器, 官网不再更新 2x :不兼容 IE 678 阅读全文

posted @ 2020-01-15 20:25 冲啊! 阅读(211) 评论(0) 推荐(0)

204 jQuery 介绍

摘要: 1.1.1 JavaScript 库 JavaScript库 :即 library,是一个封装好的特定的集合(方法和函数)。 从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。 简单理解: 就是一个JS 文件, 阅读全文

posted @ 2020-01-15 20:22 冲啊! 阅读(175) 评论(0) 推荐(0)

203 本地存储:localStorage、sessionStorage、记住用户名案例

摘要: 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。 1.7.1 本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大,sessionStorage 阅读全文

posted @ 2020-01-15 17:52 冲啊! 阅读(447) 评论(0) 推荐(0)

202 移动端常用开发插件:fastclick ,Swiper ,lsuperslide,iscroll,zy.media.js

摘要: 1.5.1 什么是插件 移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢? JS 插件 :是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。 我们 阅读全文

posted @ 2020-01-15 11:56 冲啊! 阅读(468) 评论(0) 推荐(0)

201 click 延时300ms的解决方案: fastclick 插件 等

摘要: 移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案: 1.4.1 禁用缩放 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 1.4.2 利用touch事件自己封装这个事件解决300ms 延迟 ​ 原理就 阅读全文

posted @ 2020-01-15 09:53 冲啊! 阅读(191) 评论(0) 推荐(0)

2020年1月14日

200 classList 属性

摘要: classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。 该属性用于在元素中添加,移除及切换 CSS 类。有以下方法 添加类: element.classList.add(’类名’); 移除类: element.classList.remove(’类名’); 切换 阅读全文

posted @ 2020-01-14 22:19 冲啊! 阅读(129) 评论(0) 推荐(0)

0199 移动端 之 轮播图

该文被密码保护。 阅读全文

posted @ 2020-01-14 22:18 冲啊! 阅读(7) 评论(0) 推荐(0)

0198 触屏事件:touchstart、touchmove、touchend、touches、targetTouches、changedTouches

摘要: 1.3.1 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触 阅读全文

posted @ 2020-01-14 19:51 冲啊! 阅读(825) 评论(0) 推荐(0)

0197 案例:筋头云

摘要: 1. 利用动画函数做动画效果 2. 原先筋斗云的起始位置是0 3. 鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可 4. 鼠标离开某个小li,就把目标值设为 0 5. 如果点击了某个小li, 就把li当前的位置存储起来,做为筋斗云的起始位置 阅读全文

posted @ 2020-01-14 13:39 冲啊! 阅读(145) 评论(0) 推荐(0)

196 案例:淘宝返回顶部

摘要: 返回顶部 1. 带有动画的返回顶部 2. 此时可以继续使用我们封装的动画函数 3. 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了 4. 页面滚动了多少,可以通过 window.pageYOffset 得到 5. 最后是页面滚动,使用 window.scroll(x,y) 阅读全文

posted @ 2020-01-14 11:26 冲啊! 阅读(220) 评论(0) 推荐(0)

0195 JavaScript网页轮播图,节流阀

摘要: 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 ​ 3.图片播放的同时,下面小圆圈模块跟随一起变化。 ​ 4.点击小圆圈,可以播放相应图片。 ​ 5.鼠标 阅读全文

posted @ 2020-01-14 11:24 冲啊! 阅读(321) 评论(0) 推荐(0)

2020年1月13日

0194 动画函数封装:动画实现原理,给不同元素记录不同定时器,缓动效果原理,多个目标值之间移动,动函数添加回调函数,动画完整版代码,京东问题反馈元素左右移动案例

摘要: 1.6.1 动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置。 实现步骤: 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位,才能使用element.style 阅读全文

posted @ 2020-01-13 19:47 冲啊! 阅读(344) 评论(0) 推荐(0)

0193 mouseenter 和mouseover的区别

摘要: 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发 。 mouseenter 只会经过自身盒子触发 。 之所以这样,就是因为mouseenter不会冒泡 跟mouseenter搭配鼠标 阅读全文

posted @ 2020-01-13 16:08 冲啊! 阅读(183) 评论(0) 推荐(0)

0192 offset、client、scroll 三大系列总结

摘要: 他们主要用法: 1.offset系列 经常用于获得元素位置 offsetLeft offsetTop 2.client经常用于获取元素大小 clientWidth clientHeight 3.scroll 经常用于获取滚动距离 scrollTop scrollLeft 4.注意页面滚动的距离通过 阅读全文

posted @ 2020-01-13 15:57 冲啊! 阅读(164) 评论(0) 推荐(0)

0191 元素滚动 scroll 系列:scrollTop,scrollLeft,scrollWidth,scrollHeight,window.pageYOffset

摘要: 1.3.1 scroll 概述 scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 1.3.2 页面被卷去的头部 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被 阅读全文

posted @ 2020-01-13 12:25 冲啊! 阅读(568) 评论(0) 推荐(0)

0190 元素可视区 client 系列:clientTop,clientLeft,clientWidth,offsetHeight,淘宝 flexible.js 源码分析

摘要: 1.2.1 client概述 client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 1.2.2. 淘宝 flexible.js 源码分析 立即执行函数 (function() 阅读全文

posted @ 2020-01-13 10:34 冲啊! 阅读(258) 评论(0) 推荐(0)

2020年1月12日

0189 案例:仿京东放大镜效果

摘要: 1.1.6 案例:仿京东放大镜 整个案例可以分为三个功能模块 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能 黄色的遮挡层跟随鼠标功能。 移动黄色遮挡层,大图片跟随移动功能。 1.1.7 案例分析 黄色的遮挡层跟随鼠标功能。 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父 阅读全文

posted @ 2020-01-12 21:22 冲啊! 阅读(370) 评论(0) 推荐(0)

0188 案例:模态框拖拽

摘要: 弹出框,我们也称为模态框。 ​ 1.点击弹出层,会弹出模态框, 并且显示灰色半透明的遮挡层。 ​ 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 ​ 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。 ​ 4.鼠标松开,可以停止拖动模态框移动 1.1.5 模态框拖拽 阅读全文

posted @ 2020-01-12 21:18 冲啊! 阅读(232) 评论(0) 推荐(0)

0187 案例:获取鼠标在盒子内的坐标

摘要: 1. 我们在盒子内点击,想要得到鼠标距离盒子左右的距离。 2. 首先得到鼠标在页面中的坐标(e.pageX, e.pageY) 3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop) 4. 用鼠标距离页面的坐标减去盒子在页面中的距离,得到 鼠标在盒子内的坐 阅读全文

posted @ 2020-01-12 21:17 冲啊! 阅读(199) 评论(0) 推荐(0)

0186 元素偏移量 offset 系列:offsetTop,offsetLeft,offsetWidth,offsetHeight,offset 与 style 区别,

摘要: 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 1.1.2 offset 与 style 区别 offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位的 of 阅读全文

posted @ 2020-01-12 21:15 冲啊! 阅读(358) 评论(0) 推荐(0)

上一页 1 ··· 23 24 25 26 27 28 29 30 31 ··· 36 下一页

导航