JavaScript函数封装的示例详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 30px;
height: 30px;
background-color: pink;
position: absolute;
top: 100px;
right: 0px;
z-index: 1;
}
.box2 {
width: 140px;
height: 30px;
background-color: purple;
position: absolute;
top: 100px;
right: -140px;
}
.box {
width: 400px;
height: 1000px;
border: 1px solid grey;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">^</div>
<div class="box2">会员内容</div>
</div>
<script>
//鼠标经过box1的时候，box2就往左边移140px；
var box1 = document.querySelector('.box1')
var box2 = document.querySelector('.box2')
var a = box2.offsetLeft
box1.addEventListener('mouseover', function() {
animate(box2, a - 140)
})
box1.addEventListener('mouseout', function() {
animate(box2, a + 140)
})
function animate(obj, target, callback) {
clearInterval(obj.timer) //先把原先地定时器清除之后，再开启另外一个新地定时器
obj.timer = setInterval(fn, [15])
function fn() {
var a = obj.offsetLeft //不能换成div.style.left 不然会只移动一次。注意读取位置永offset，修改永style
var step = (target - a) / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step) //将结果赋值回去
//把步长值改为整数，不要出现小数的情况
if (a == target) {
//取消定时器
clearInterval(obj.timer)
//执行回调函数 函数名+()回调函数写到定时器结束里面
//首先判断没有有这个回调函数
if (callback) {
callback()
}
}
obj.style.left = a + step + 'px'
}
}
//鼠标离开的时候，box2就往右边移140px
</script>
</body>
</html>
这个下面看着就头晕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 30px;
height: 30px;
background-color: pink;
position: absolute;
top: 100px;
right: 0px;
z-index: 1;
}
.box2 {
width: 140px;
height: 30px;
background-color: purple;
position: absolute;
top: 100px;
right: -140px;
}
.box {
width: 400px;
height: 1000px;
border: 1px solid grey;
position: relative;
overflow: hidden;
}
</style>
<script src="animater.js"></script>
</head>
<body>
<div class="box">
<div class="box1">^</div>
<div class="box2">会员内容</div>
</div>
<script>
//鼠标经过box1的时候，box2就往左边移140px；
var box1 = document.querySelector('.box1')
var box2 = document.querySelector('.box2')
var a = box2.offsetLeft
box1.addEventListener('mouseover', function() {
animate(box2, a - 110)
})
box1.addEventListener('mouseout', function() {
animate(box2, a + 110)
})
</script>
</body>
</html>
先将js单独写在一个独立的文件中。
之后直接使用函数。但在此之前要先引入JS文件
<script>
//鼠标经过box1的时候，box2就往左边移140px；
var box1 = document.querySelector('.box1')
var box2 = document.querySelector('.box2')
var img = document.querySelector('img')
var a = box2.offsetLeft
box1.addEventListener('mouseover', function() {
animate(box2, a - 110, callback)
})
box1.addEventListener('mouseout', function() {
animate(box2, a + 110, callback1)
})
</script>
JS单独文件：
function animate(obj, target, callback) {
clearInterval(obj.timer) //先把原先地定时器清除之后，再开启另外一个新地定时器
obj.timer = setInterval(fn, [15])
function fn() {
var a = obj.offsetLeft //不能换成div.style.left 不然会只移动一次。注意读取位置永offset，修改永style
var step = (target - a) / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step) //将结果赋值回去
//把步长值改为整数，不要出现小数的情况
if (a == target) {
//取消定时器
clearInterval(obj.timer)
//执行回调函数 函数名+()回调函数写到定时器结束里面
//首先判断没有有这个回调函数
if (callback) {
callback()
}
}
obj.style.left = a + step + 'px'
}
}
function callback() {
img.src = '10-右.png'
img.style.width = '50%'
}
function callback1() {
img.src = '9-左.png'
img.style.width = '50%'
}
觉得在图标不是很多的时候用iconfont要方便很多。单数如果图标很多，就用lcoMoon来导入图标。或者使用精灵图等来设置
以上就是JavaScript函数封装的示例详解的详细内容，更多关于JavaScript函数封装的资料请关注我们其它相关文章！
相关推荐
-
JS基于封装函数实现的表格分页完整示例
本文实例讲述了JS基于封装函数实现的表格分页.分享给大家供大家参考,具体如下: HTML代码: <html> <head> <meta charset='utf-8'> <title>www.jb51.net js表格分页</title> <script type="text/javascript" src="script.js"></script> <style type=&
-
JavaScript中cookie工具函数封装的示例代码
一. 语法 1.1 获取当前页面的所有cookie: var allCookies = document.cookie; allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对). 1.2 写一个新cookie: document.cookie = updatedCookie; updatedCookie是一个键值对形式的字符串.只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加.例如: document.coo
-
纯js封装的ajax功能函数与用法示例
本文实例讲述了纯js封装的ajax功能函数与用法.分享给大家供大家参考,具体如下: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)AJAX 不是新的编程语言,而是一种使用现有标准的新方法.是7种技术的综合,它包含了七个技术(javascript xml xstl xhtml dom xmlhttprequest , css), ajax 是一个粘合剂. 直接上程序: js调用部分: <script src="ds
-
JS实现运动缓冲效果的封装函数示例
本文实例讲述了JS实现运动缓冲效果的封装函数.分享给大家供大家参考,具体如下: 之前经常写运动函数,要写好多好多,后来想办法封装起来.(运动缓冲). /* 物体多属性同时运动的函数 obj:运动的物体 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 ratio:速度的系数 */ function bufferMove(obj, oTarget, fn,ratio = 8) { clearInterval(obj.iTimer); obj.iTimer = setInterv
-
JavaScript前端实用的工具函数封装
目录 1.webpack里面配置自动注册组件 2.自定义指令图片懒加载 3.图片文件转base64格式(实现预览) 4.数组转为tree型结构(递归实现) 5.递归深拷贝 6.将数组里面的对象转换成我们需要的键值对 1.webpack里面配置自动注册组件 第一个参数是匹配路径,第二个是深度匹配,第三个是匹配规则 const requireComponent = require.context('./libary', true, /\.vue$/) export default { install
-
JS轮播图中缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1.我想让页面中的一个盒子从开始的位置匀速向右运动到200px的地方,该怎么实现? 分析: 1)我们需要知道盒子在哪个地方,这个可以通过offsetLeft属性去获取: 2)要让盒子匀速运动,对于js肯定需要setInterval了: 3)要让盒子向右边跑起来?那就是需要不停改变盒子与左边起始点的距离,
-
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
本文实例讲述了原生javascript运动函数的封装.分享给大家供大家参考,具体如下: //封装匀速运动 //参数: // 1.dom对象 // 2.样式属性(top,left,width,height,opacity等等) // 3.起始位置,结束位置 // 4.速度:时间间隔,步长 // 5.方向: //返回值 function moveObj(domObj,attr,startValue,endValue,timeSpace,step,direction) { let currValue
-
JavaScript函数封装的示例详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
-
JavaScript箭头函数与普通函数的区别示例详解
目录 箭头函数与普通函数的区别 箭头函数的理解 箭头函数里的this指向 总结 箭头函数与普通函数的区别 要讨论箭头函数和普通函数的区别,首先来看看两者的基本格式 普通函数和箭头共同点就是圆括号和大括号,圆括号里面一般放置参数,大括号一般放置函数主体,很明显箭头函数不需要写那么长,举个例子,有一个数组,使用map方法为数组的每个元素增加字符 let arr=['昨天','今天','明天'] let newarr=arr.map(function(item){ return item+='放假'
-
Composition API思想封装NProgress示例详解
目录 正文 安装和基本使用 自己实现一个 正文 最近在用vue3封装一套后台管理模版,自然会用到NProgress.如果你没有用过,你可以看一下instagram,youtube这些网站,它们都有一个顶部加载条,这也是现在最流行的网页加载条. 于是我发现了@vueuse/integrations中的useNProgress,我们先看一下Anthony Fu大神如何去封装的,然后咱们再去试着自己实现一下. 安装和基本使用 npm i nprogress @vueuse/integrations 基
-
常用JavaScript正则表达式汇编与示例详解
1.1 前言 目前收集整理了21个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IP地址. 十六进制颜色. 日期. 微信号.车牌号.中文正则等.表单验证处理必备,赶紧收藏吧! 还会陆续加入新的正则进来,大家多提宝贵意见! 2.1 用户名正则 2.1.1 基本用户名正则 在做用户注册时,都会用到用户名正则校验. 定义基本用户名命名规则如下: 最短4位,最长16位 {4,16} 可以包含小写大母 [a-z]
-
PHP日期和时间函数的使用示例详解
(1)查看日期函数拓展 phpinfo() <?php phpinfo(); 打开上述页面之后,可以看到以下,证明已经安装日期拓展 浏览器输入php.net访问php的文档 (2)设置时区 方式一:修改配置文件php.ini D:\ITSoft\wamp64\bin\php\php7.0.10\php.ini [Date] ; Defines the default timezone used by the date functions ; http://php.net/date.timezon
-
Swift中的高阶函数功能作用示例详解
目录 高阶函数的作用 1. 简化代码 2. 提高可读性 3. 支持函数式编程 4. 提高代码的可重用性 常见的高阶函数 1. map() 2. filter() 3. reduce() 4. sorted() 5. forEach() 6. compactMap() 7. flatMap() 8. zip() 9. first() 10. contains() 高阶函数的作用 Swift中的高阶函数是指那些参数或返回值是函数的函数.它们的存在使得我们可以用非常简洁和优雅的代码来解决许多问题. 1
-
JavaScript函数柯里化详解
什么是柯里化 柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数. 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callba
-
JavaScript函数定义方法实例详解
本文实例讲述了JavaScript函数定义方法.分享给大家供大家参考,具体如下: JavaScript 函数定义方法 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立即执行,会在我们需要的时候调用到. function myFunction(a, b) { return a * b; } 分号是用来分隔可执行JavaScript语句. 由于函数声明不是一个可执行语句,所以不以分号结束
-
express异步函数异常捕获示例详解
在express中时使用 Async/await 编写异步代码时,每个 async 函数都要包裹在try/catch中,代码量多了看着冗余不优雅,express又不像koa的异步机制可以订阅全局的error事件,为了解决这个问题,需要写个捕获异步函数异常的中间件. uncaughtException 开始能想到的肯定是try/catch了,但是也想过能否使用nodejs提供的uncaughtException事件,在全局捕获异常,例如下面的代码: process.on("uncaughtExce
-
JavaScript 类的封装操作示例详解
本文实例讲述了JavaScript 类的封装操作.分享给大家供大家参考,具体如下: 一,首先,为什么要使用封装? 这是从信息的角度出发的,信息的隐藏是最终的目的,而封装只不过是实现隐藏的一种方法. 这里我们需要明白一点就是:类的定义有如下的三种方式: (第一种)门户大开型方式 (第二种)用命令规范区别私有和公有的方式 (第三种)闭包 现在详细描述一下每一种类的定义方式: 针对第一种,门户大开类型 首先,我们来看一种情况 (1)声明一个简单的类,代码如下 function Per