2020-09-13---js中的运动

最新推荐文章于 2024-02-26 12:00:00 发布
最新推荐文章于 2024-02-26 12:00:00 发布
阅读量188 收藏
点赞数
分类专栏： H5
本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。
本文链接：https://blog.csdn.net/qq_45021462/article/details/108565945
版权
H5 同时被 2 个专栏收录
55 篇文章 0 订阅
订阅专栏
me
52 篇文章 0 订阅
订阅专栏

js文件

let timer = null;
//匀速运动
//01从左向右走，走向目标
function sport01(obj){
    clearInterval(timer);
    timer = setInterval(function(){
        if(obj.offsetLeft >= 500){
            clearInterval(timer);
        }else{
            obj.style.left = obj.offsetLeft + 10 + 'px';
        }
    },50)    
}

//02从右向左走，走向目标
function sport02(obj){
    clearInterval(timer);
    timer = setInterval(function(){
        if(obj.offsetLeft <= 500){
            clearInterval(timer);
        }else{
            obj.style.left = obj.offsetLeft - 10 + 'px';
        }
    },50);
}

//03从左向右和从右向左，都能走向目标
//把目标位置，还有加速度都传过来
function sport03(obj,target,speed){
    clearInterval(timer);
    timer = setInterval(function(){
        //这种写法会出现物体在目标边缘抖动的情况
        // if(target - obj.offsetLeft <= 0){
        //     obj.style.left = obj.offsetLeft - speed +'px';
        // }else if(target - obj.offsetLeft >= 0){
        //     obj.style.left = obj.offsetLeft + speed + 'px';
        // }else{
        //     clearInterval(timer);
        // }

        if(obj.offsetLeft === target){
            clearInterval(timer);
        }else{
            obj.style.left = obj.offsetLeft + speed + 'px';
        }
    },50)
}

//04从左向右和从右向左，都能走向目标
//传目标位置
function sport04(obj,target){
    clearInterval(timer);
    timer = setInterval(function(){
        //先判断物体现在在目标位置的左还是右,进而确定加速度为正还是为负
        var speed = obj.offsetLeft > target ? -10 : 10;
        if(obj.offsetLeft === target){
            clearInterval(timer);
        }else{
            obj.style.left = obj.offsetLeft + speed + 'px';
        }
    },50)
}

//05从左向右和从右向左，都能走向目标,解决加速度和位移差不是整数倍关系问题（物体会在目标位置边缘抖动的问题）
//传目标位置
function sport05(obj,target){
    clearInterval(timer);
    timer = setInterval(function(){
        //先判断物体现在在目标位置的左还是右,进而确定加速度为正还是为负
        var speed = obj.offsetLeft > target ? -7 : 7;
        if(Math.abs(obj.offsetLeft - target) < Math.abs(speed)){
            obj.style.left = target + 'px';
            clearInterval(timer);
        }else{
            obj.style.left = obj.offsetLeft + speed + 'px';
        }
    },50)
}

//缓冲运动（速度越来越慢）
//06从左向右和从右向左，都能走向目标
//传目标位置
function sport06(obj,target){
    clearInterval(timer);
    timer = setInterval(function(){
        //缓冲运动，速度不是一个固定的值,用物体当前的位置减去目标的位置，再除以一个固定的值，就会得到一个变化的速度，因为当前的位置在不断的变化，所以当前的位置减去目标的位置的差是一个变化的数，且这个数越来越小。
        var speed = (target - obj.offsetLeft ) / 8 ;
        //处理小数问题  （因为到了最后速度有可能变为一个不变的小数，导致永远到不了目标位置），让小数都取整，每次减1，知道减到目标位置。
        // 速度为正的时候，向上取整，为负的时候，向下取整
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        //缓冲一定能到目标位置，判断条件为是否到了目标位置，到了就停止计时器。
        if(obj.offsetleft === target + 'px'){   
            clearInterval(timer);
        }else{
            obj.style.left = obj.offsetLeft + speed + 'px';
        }
    },50)
}

let alpha = 100;//假设当前的opacity值为1,因为计算机处理小数有问题，所以先扩大100倍，最终再除以100.
//淡入淡出效果（透明度的变化）
//07鼠标移入，透明度改变
function sport07(obj,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //计算速度
        var speed = (target - alpha) / 8 ;
        //处理小数
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(obj.style.opacity === target ){   
            clearInterval(obj.timer);
        }else{
            alpha += speed;
            obj.style.opacity = alpha / 100;
            // obj.style.opacity = alpha / 100 + speed;
            obj.style.filter = 'alpha(opacity = ' + alpha + ')';
        }
    },50)
}

//宽度变化
//08鼠标移入，宽度改变
function sport08(obj,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //计算速度
        var speed = (target - obj.offsetWidth) / 8 ;
        //处理小数
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(obj.style.offsetWidth === target ){   
            clearInterval(obj.timer);
        }else{
            obj.style.width = obj.offsetWidth + speed + 'px';
        }
    },50)
}

//宽度变化 
//兼容问题 当盒子加了border之后，盒子的宽度就回不去了
//09鼠标移入，宽度改变
function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr]
}
function sport09(obj,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //获取当前宽度
        var cur = parseInt( getStyle(obj,'width') );//获取回来的宽度有单位，取整，去掉单位。
        // var cur = getStyle(obj,'width');
        //计算速度
        var speed = (target - cur) / 8 ;
        //处理小数
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(cur === target ){   
            clearInterval(obj.timer);
        }else{
            obj.style.width = cur + speed + 'px';
        }
    },50)
}

//多物体透明度变化
//多个物体不能共用一个透明度
//10鼠标移入，透明度改变
function sport10(obj,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //当前透明度
        //  获取回来是字符串 '0.5462' 先变为数字parseFloat  再乘以100然后取整
        var cur = parseInt(parseFloat(getStyle(obj,'opacity')) * 100 );
        //计算速度
        var speed = (target - cur) / 8 ;
        //处理小数
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(cur === target ){   
            clearInterval(obj.timer);
        }else{
            obj.style.opacity = (cur + speed) / 100;
            // obj.style.opacity = alpha / 100 + speed;
            obj.style.filter = 'alpha(opacity = ' + cur + speed + ')';
        }
    },50)
}

//多物体各种样式变化
//多个物体不能共用一个透明度
//11鼠标移入，对应属性改变
//需要把要改变的属性传过来
function sport11(obj,attr,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //当前透明度
        //  获取回来是字符串 '0.5462' 先变为数字parseFloat  再乘以100然后取整
        var cur = attr === 'opacity' ? parseInt(parseFloat(getStyle(obj,'opacity')) * 100 ) : parseInt( getStyle(obj,attr) );
        //计算速度
        var speed = (target - cur) / 8 ;
        //处理小数
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(cur === target ){   
            clearInterval(obj.timer);
        }else{
            if(attr === 'opacity'){
                obj.style.opacity = (cur + speed) / 100;
                // obj.style.opacity = alpha / 100 + speed;
                obj.style.filter = 'alpha(opacity = ' + cur + speed + ')';
            }else{
                //必须使用[]访问attr属性
                obj.style[attr] = cur + speed + 'px';
            }
        }
    },50)
}

应用案例：
1.多物体多属性变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18多物体多属性变化</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
            margin: 10px;
            border: 1px solid black;
            opacity: 1;
            filter: alpha(opacity = 100);
            /* position: absolute; */
        }
    </style>
</head>
<body>
    <div id="box">变宽</div>
    <div id="box">变高</div>
    <div id="box">透明</div>
    <div id="box">变粗</div>
    <div id="box">变大</div>
    <script src="js/sport.js"></script>
    <script>
        var o_box = document.querySelectorAll('#box');
        o_box[0].onmouseenter = function(){
            sport11(this,'width',400);
        }
        o_box[0].onmouseout = function(){
            sport11(this,'width',100);
        }

        o_box[1].onmouseenter = function(){
            sport11(this,'height',400);
        }
        o_box[1].onmouseout = function(){
            sport11(this,'height',100);
        }
       
        o_box[2].onmouseenter = function(){
            sport11(this,'opacity',30);
        }
        o_box[2].onmouseout = function(){
            sport11(this,'opacity',100);
        }

        o_box[3].onmouseenter = function(){
            sport11(this,'borderWidth',40);
        }
        o_box[3].onmouseout = function(){
            sport11(this,'borderWidth',1);
        }

        o_box[4].onmouseenter = function(){
            sport11(this,'fontSize',40);
        }
        o_box[4].onmouseout = function(){
            sport11(this,'fontSize',1);
        }
    </script>
</body>
</html>

2.移入移出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>19仿飞秋</title>
    <style>
        #box{
            width: 200px;
            height: 500px;
            background-color: pink;
            position: absolute;
            left: -200px;
            top: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="js/sport.js"></script>
    <script>
        var o_box = document.querySelector('#box');
        // o_box.onmouseenter = function(){
        //     sport05(this,0);
        // }
        // o_box.onmouseout = function(){
        //     sport05(this,-200);
        // }

        o_box.onmouseenter = function(){
            sport11(this,'left',0);
        }
        o_box.onmouseout = function(){
            sport11(this,'left',-200);
        }
    </script>
</body>
</html>

3.分享到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20分享到</title>
    <style>
        #box{
            width: 200px;
            height: 400px;
            background-color: pink;
            position: absolute;
            left: -200px;
            top: 100px;
        }
        #sp{
            width: 20px;
            height: 70px;
            background-color: grey;
            position: absolute;
            left: 200px;
            top: 160px;
        }
    </style>
</head>
<body>
    <div id="box">
        <span id="sp">分享到</span>
    </div>
    <script src="js/sport.js"></script>
    <script>
        //当鼠标移入span让box出来，鼠标移出span让box回去，会发生抖动现象，利用冒泡的原理，把移入事件加在box上，当鼠标滑入span的时候，冒泡到父级box。
        // var o_sp = document.querySelector('#sp');
        var o_box = document.querySelector('#box');
        o_box.onmouseenter = function(){
            sport06(o_box,0);
        }
        o_box.onmouseout = function(){
            sport06(o_box,-200);
        }
    </script>
</body>
</html>

效果
默认：
在这里插入图片描述
鼠标滑入‘分享到’
在这里插入图片描述

易de
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自研直播系统-直播系统实战
逆天-逍遥哥哥的博客
07-01 1702
自研直播系统-直播系统实战
js中 !! 操作的作用和其他使用技巧
Sport_18的博客
05-08 331
最近在看到关于JavaScript代码中包含“!!”这样的操作，在网上查找了资料，并总结其用法和类似技巧 js中!和!!操作 在js中 “!” 操作符意味着取反操作，又因为js是弱类型语言，“!” 操作可以将变量转化为布尔值，null、undefined和空字符串取反都为true，其余都为false。 !null=true !undefined=true !''=true !100=false !'abc'=false "!!"操作意味着先将变量取反，并转化为布尔值，然后再进行一.
2020-09-05
weixin_45153565的博客
09-05 822
目录 JAVA最新面试题 一、Java 基础部分 二、Java 代码查错 三、算法与编程 四、html&JavaScript&ajax 部分 五、Java web 部分 六、数据库部分 七、XML 部分 八、流行的框架与新技术 九、软件工程与设计模式 十、j2ee 部分 十一、 ejb 部分 十二、 webservice 部分 十三、 Linux 十四、 问得稀里糊涂的题 十五、 其他 部分面试题，不太全，留邮箱就行，发给你们 一、Java 基础部...
2020-
madrouge的博客
11-19 652
只有光头才能变强。 文本已收录至我的GitHub精选文章，欢迎Star：https://github.com/ZhongFuCheng3y/3y 在上周总结了一篇「工作中常用到的Java集合类」，反响还不错。这周来写写Java另一个重要的知识点：「多线程」 多线程大家在初学的时候，对这个知识点应该有不少的疑惑的。我认为主要原因有两个： 多线程在初学的时候不太好学，并且一般写项目的时候也很少用得上（至少在初学阶段时写的项目基本不需要自己创建线程）。多线程的知识点在面试经常考，多线程.
2020-09-16---js实现五星好评效果&放大镜效果&瀑布流
qq_45021462的博客
09-17 329
放大镜效果&瀑布流放大镜效果思想瀑布流固定列数思想 放大镜效果 思想 面向对象的思维分析 分析功能 移入事件，移入的时候，滑块显示，大图显示 移出事件，移出的时候，滑块消失，大图消失 移动事件，移动的时候，滑块跟随，滑块有边界，不能出来图片，且鼠标在滑块中间 放大镜的核心：求比例 鼠标在小图上移动多少，对应的右边的大图移动相应对的比例。 瀑布流 固定列数 思想 瀑布流的核心：找最小高度的列的位置 面向对象分析 1.求最小高度：求所有列当中最小高度列所在的下标值 固定列数，每一列为一个ul，把所
高校运动会信息管理系统 毕业设计-附源码70142
Vxin_CXSJ881的博客
08-30 101
本论文介绍了一个高校运动会信息管理系统的设计和实现过程。首先是高校运动会的需求分析和可行性分析，通过比较运动会的各个工作流程，确定了系统的数据流程和数据库结构，然后介绍了高校运动会信息管理系统开发所使用的软件开发工具，最后描述了系统的详细设计与实现。本系统是基于B/S架构的管理系统，包含了赛事信息、赛事报名、赛程信息、赛事分类、裁判信息、秩序手册、个人成绩、赛道信息、学院信息、学院成绩等多个模块功能，较好的实现了运动会管理的功能。本系统是一个较精简的管理系统，也有许多待完善的功能模块，但经测试使用
2022美亚杯第八届中国电子数据取证大赛-个人赛write up详解
最新发布
Karka_的博客
02-26 1554
2022美亚杯第八届中国电子数据取证大赛-个人赛 更多网络安全CTF题目本内容为我个人解题思路，有不同见解欢迎讨论。检材文件下载链接：https://pan.baidu.com/s/1kg8FMeMaj6BIBmuvUZHA3Q?pwd=ngzs提取码：ngzs个人赛与团队赛下载文件解压密码：MeiyaCup2022个人赛解压缩时间：45min左右团队赛解压缩时间：1h20min左右个人赛加密容器解密密钥团队赛加密容器解密密钥I.案件详情。
微信小程序开发--uniapp
mzc的博客
10-10 5483
uniapp介绍 什么是uniapp uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 截止2020年8月份，uniapp已经支持一套代码打包到 Android、IOS、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、360小程序 10个平台。 移动端跨平台技术发展史 随着互联网的逐渐发展，互联网公司越来越多，原生的移动端存在无法
uni-app引入腾讯地图
@宝儿姐
08-11 8156
这篇地图开发教程先对uniapp开发map进行的说明，(uniapp是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到ios，android，web以及各种小程序，快应用等多个平台),并对uniapp使用map组件的基本使用方法做了详细的介绍，并对地址搜索、获取附近动态，地图上标注附近的人，定位附近门店、滑动轨迹、vue接入腾讯地图接口等示例代码与效果进行了完备的展示。 二、使用步骤 1.uniapp开发map说明 使用uniapp是因为它是一个使用vue.js开发所有前端应用的
ans-javascript-sdk:Analysys JavaScript SDK
05-07
npm install ans-javascript-sdk --save JavaScript 基础说明： JS SDK 用于由 HTML 、 Css 及 Javascript 制作成的网站，集成前请先安装SDK 快速集成 如果您是第一次使用易观方舟产品，可以通过阅读本文快速了解此...
CSP2020-JS二轮获奖名单.xls
12-20
CSP2020-JS二轮获奖名单.xls
可以修改样式的js-xlsx
05-21
在vue中需要把解压后的两个文件放在static目录，然后在项目中import即可。 参考：https://blog.csdn.net/dan_seek/article/details/106500048 ---------------------------------------------- 由SheetJS出品的js-...
msfs2020-toolbar-fseconomy:Microsoft FlightSimulator 2020 工具栏 FSEconomy 窗口
05-29
msfs2020-toolbar-fseconomy Microsoft FlightSimulator 2020 工具栏窗口，用于加载 FSEconomy 系统。 要在更改 UI 面板模板定义时构建 SPB，请运行build.bat或手动SDK\Tools\bin\fspackagetool.exe maximus-...
three.js-r126.zip
06-16
three.js-r126.zip
echarts入门（通过axios请求数据）
qq_45021462的博客
11-22 6186
echarts入门（axios请求数据） 1. npm 安装 ECharts npm install echarts --save 2. 下面的是基本结构，里面的数据是静态的（写死的，不是通过接口请求到的） <template> <div> <div id="echart" style="width : 80%;height : 300px"></div> </div> </template&gt
Vue使用elementUI实现一个后台管理
qq_45021462的博客
11-15 4211
Vue使用elementUI实现一个后台管理功能效果功能分析1.安装2.main.vue3.App.vue4.views(1) Home.vue 功能效果 初始界面 添加商品分类 修改分类 删除分类 功能分析 1.安装 （1）首先创建一个vue项目，创建过程我之前的博客有写过。该后台是基于element UI组件库。 （2）安装element ui npm -i element-ui -S （3）全局引入，参考element-UI官网 引入下面的代码到mian.js import Ele
axios拦截器
qq_45021462的博客
12-09 2582
请求拦截 interceptors 拦截器 this.$axios.interceptors.request.use(config=>{ // 发生请求前的处理 return config },err=>{ // 请求错误处理 return Promise.reject(err); }) //或者用axios实例创建拦截器 let instance = this.$axios.create(); instance.interceptors.r.
Vue实现用户登录导航守卫
qq_45021462的博客
11-30 2282
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下： 1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码 2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token 3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面 4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面 5、每次调后端接口，都要在请求头中加token 6、后端判断请求头中有无token，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值