加入收藏 | 设为首页 | 会员中心 | 我要投稿 银川站长网 (https://www.0951zz.com/)- 云通信、基础存储、云上网络、机器学习、视觉智能!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

JS函数封装怎样实现 代码是哪些

发布时间:2023-08-05 10:59:20 所属栏目:语言 来源:
导读:在这篇文章中,我们来学习一下“JS函数封装怎样实现,代码是什么”的相关知识,下文有详细的讲解,易于大家学习和理解,有需要的朋友可以借鉴参考,下面就请大家跟着小编的思路一起来学习一下吧!<!DOCTYPE

在这篇文章中,我们来学习一下“JS函数封装怎样实现,代码是什么”的相关知识,下文有详细的讲解,易于大家学习和理解,有需要的朋友可以借鉴参考,下面就请大家跟着小编的思路一起来学习一下吧!

<!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来导入图标。

(编辑:银川站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章