【纯JS实现元素加速运动的函数封装】的更多相关文章

纯JS实现元素加速运动的函数封装

//elem:给哪个元素添加位移:direction:是垂直方向的话就传入top,水平方向left:speed控制速度,向下.向右传入正值,反之传入负值:distance表示位移的距离function elemDisplace(elem, direction,speed, distance){ //记录元素当前的位置 var origin = parseInt( getComputedStyle(elem, null)[direction] ); var pos; var Timer = set…

js cookie创建读取删除函数封装

js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的作用:document.cookie 获取的cookie是这样的:name1=aaa; name2=bbb; name3=ccc; 所以需要用split函数分割,先用:分割,然后用=等号分割 3.删除cookie的函数封装的作用:设置过期时间是位过去时间 二.js cookie创建读取删除函数封装…

DOM的高级操作-一种JS控制元素的视觉假象

1.运动中的边界处理(让其在一个指定区域内运动) 当元素的offsetLeft值超出一定距离或达到一个我们想要设置的边界值时,停止计时器. var timer; timer = setInterval(function(){//计时器 if(obox.offsetLeft>=200){//判断的条件 clearInterval(timer); }else{[ obox.style.left = obox.offsetLeft+10+"px";//每30毫秒我们走的步长 } },3…

前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数

前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前端总结·基础篇·JS(二)数组深拷贝.去重以及字符串反序和数组(Array) 前端总结·基础篇·JS(三)arguments.callee.call.apply.bind及函数封装和构造函数 目录 一.函数使用 1.1 函数声明和函数表达式 1.2 函数封装(自调用函数.闭包) 1.3 函数属性(a…

JS中深浅拷贝 函数封装代码

一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一个值,另一个也会动态改变. 三.深拷贝 深拷贝是真正意义上实现了数组和对象的拷贝,它创建了另外一个一模一样的对象,和原对象不是一个内存地址,修改一个值不会影响另一个的值. 使用JSON.stringify()和JSON.parse()也可以实现深拷贝.当值为undefined.任意函数.symbol…

JS-获取class类名为某个的元素-【getClass】函数封装

原理: /*  * 根据class获取元素. * 原理是,取出oparent下的所有元素,组成数组,然后遍历类名,全等判断.*/ 源码 1 function getClass(oParent,clsName){ var oParent = document.getElementById(oParent); 2 var boxArr = new Array(); 3 oElements = oParent.getElementsByTagName('*'); 4 for(var i=0;i<oEl…

react request.js 函数封装

1.request.js  函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from '../store'; import { push } from 'react-router-redux'; import qs from 'qs'; // 请求路径 const BaseUrl = 'https://www.baidu.com/'; // 主机及端口 //axios默认配置请求的…

js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）

js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(url,funSucc,fnFaild){ //1.以函数作为函数的参数传进来 var xhr=new XMLHttpRequest(); xhr.open('GET',url,true); xhr.send(null); xhr.onreadystatechange=function(){ if (x…

JS---动画函数封装：设置任意的一个元素,移动到指定的目标位置

动画函数封装:设置任意的一个元素,移动到指定的目标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 200px; height: 200px; background-color: red; /*脱离文档流*/ positi…

js节流与防抖函数封装

js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时. 经典案例:百度输入内容自动搜索 /** *防抖函数 *@param fn 事件触发的操作 *@param delay 多少毫秒内连续触…