JS实现运动缓冲效果的封装函数示例
作者:MaxLucio 发布时间:2023-06-30 14:34:45
标签:JS,运动缓冲,封装函数
本文实例讲述了JS实现运动缓冲效果的封装函数。分享给大家供大家参考,具体如下:
之前经常写运动函数,要写好多好多,后来想办法封装起来。(运动缓冲)。
/*
物体多属性同时运动的函数
obj:运动的物体
oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值
ratio:速度的系数
*/
function bufferMove(obj, oTarget, fn,ratio = 8) {
clearInterval(obj.iTimer);
obj.iTimer = setInterval(function () {
// 此处设定开关bBtn,假设所有的属性均已运动完毕true
var bBtn = true;
for(var sAttr in oTarget){
// 获取当前值,此处兼容透明度的变化
if(sAttr === 'opacity') {
var iCur = parseFloat(getStyle(obj, sAttr) * 100);
} else {
var iCur = parseInt(getStyle(obj, sAttr));
}
// 计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等
var iSpeed = (oTarget[sAttr] - iCur) / ratio;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
// 计算下一次的值
var iNext = iCur + iSpeed;
// 赋值给对应样式
if(sAttr ==='opacity') {
obj.style.opacity = iNext / 100;
obj.style.filter = 'alpha(opacity=' + iNext +')';
} else {
obj.style[sAttr] = iNext + 'px';
}
// 清除定时器,当前的位置和终点值是否相等,相等则说明结束
if(iNext !== oTarget[sAttr]) {
bBtn = false;
}
}
// 如果bBtn的值为true,则说明所有的属性均已运动完毕,回调函数fn()
if(bBtn) {
clearInterval(obj.iTimer);
if(fn){
fn();
}
}
}, 50);
}
以上封装函数也可以用于单个属性,多样式运动,比如:
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);
就这样。
希望本文所述对大家JavaScript程序设计有所帮助。
来源:https://www.cnblogs.com/lucio110/p/7345286.html
0
投稿
猜你喜欢
- 在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要
- 1、首先看SSM(Spring+SpringBoot+Mybatis)的依赖<project xmlns="http://m
- ▲ SHOW执行下面这个命令可以了解服务器的运行状态mysql >show status;该命令将显示出一长列状态
- 大概在九九年做游戏网站的时候,就对文章的发布感到麻烦,不过那会儿玩ASP不精。只是将就用着。在遇到长文件 10000 字时网页就是一大片长了
- Bit-Packed Data TypesMySQL有一些存储类型使用一个值中的一些单个的比特位来紧凑的存储数据。纯技术上将,不管是底层的存
- Web,全称为 World Wide Web,是 Internet 上最重要和最为人们所熟知的应用之一。Web 是指 Internet 上所
- 1,jdk配置由于jdk官网的链接不直接支持wget,可以使用下面的方法下载jdk,其中jdk版本为jdk1.8.0_91:wget --n
- 操作系统:Windows2000,IIS5出现症状:使用ASPJPEG时执行Server.CreateObject("Persit
- 一、INSERT和REPLACEINSERT和REPLACE语句的功能都是向表中插入新的数据。这两条语句的语法类似。它们的主要区别是如何处理
- 本文介绍了保护MySQL数据库中重要数据受外部攻击的六个注意事项,以减少面临的风险。与自动的数据库备份不同,对系统管理员来说,保护数据免受未
- '====================================='功能:根据ip地址输出地区'参数:ip
- 1.由于设置了slave的配置信息,mysql在数据库data目录下生成master.info,所以如有要修改相关slave的配置要先删除该
- 最近在做个大数据量的录入,为了方便客户输入,需要通过方向键来移动到输入框中,本代码仅供学习、研究,请勿用于其它用途:D下面贴的代码只是贴出来
- Access爱好者以会VBa为荣。我觉得这不是好现象。vba只是vb的子集,有着很多限制,比如不支持继承,不支持指针,不支持子界类型等。使用
- 数据库的选择原则是什么?我只知道小网站用Access,大网站用SQL,请问它的具体选择原则是什么?在实际应用中,数据库的选择原则一般是:如果
- 让你的读者能够方便地收藏你的文章到社会化书签(网摘)网站,如 新浪,google,yahoo,Del.icio.us, 365key等添加到
- 最近写了两个管理后台的前端页面,其中有一个管理后台,左侧菜单导航和右侧内容页是两个iframe,需求是,点击上面的主导航时,左侧iframe
- 去听了牛人 dbaron 的一个 Web Page Layout/Display in Mozilla 讲座( via )。讲的东西对我一个
- 重复的数据可能有这样两种情况,第一种: 表中只有某些字段一样,第二种是两行记录完全一样。一、对于部分字段重复数据的删除 1.查询重复的数据
- 此BUG最初是在《前端观察》网站刊登,这里再描述一下,代码如下:<style>*{ padding:0; m