IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> 3.15 study 简单移动动画js实现 -> 正文阅读

[游戏开发]3.15 study 简单移动动画js实现

首先老规矩汇报学习进度129/167 为什么这么慢呢是我偷偷停工了好几天有些迷茫(就是在玩去了),然后其实昨天也看了一点但太少了就没写博客,然后看一下今天的效果

?

一个滑块移动的案例 想用gif动图好像没转换器,以后看用py能自己写一个吗,然后实现就是很简单的动画效果,不是匀速加像素 就行到极值点隐藏就可以

给出主要的js 部分代码就可以了

动画函数js代码

function fn(obj,target,callback){
				clearInterval(obj.timer)
				obj.timer = setInterval(function(){
					// 优化步长值 为整数
					var seep = (target-obj.offsetLeft)/9
					if(seep>0){
						seep = Math.ceil((target-obj.offsetLeft)/35)
					}
					else{
						seep = Math.floor((target-obj.offsetLeft)/35)
					}
					if(obj.offsetLeft==target){
						clearInterval(obj.timer)
						if(callback){
							callback();
						}
					}
					else{
					
							obj.style.left = obj.offsetLeft+seep+'px'
							console.log(1)
					}		
				},100)
				}

动画效果js代码

		<script>
			var slider =document.querySelector('.sliderbar')
			var con = document.querySelector('.con')
			slider.addEventListener('mouseenter',function(){
//				var height = 
					con.style.display='block'
				fn(con,-160,function(){
					
					slider.children[0].innerHTML='->'
				})
				
			})
			slider.addEventListener('mouseleave',function(){
//				
				fn(con,0,function(){
					slider.children[0].innerHTML='<---'
					con.style.display='none'
				})
			})
		</script>

没啥可以说的就是 极值点进行回调就可以 其他的就是基本事件学习,封装函数思想。

看一下今天的学习进度 day 06 是昨天的? 哈哈哈学的太少了就没更博客 ,躺平了,偷懒我就是猪

?总结一下把:今天进入轮播图效果,还差40集这个星期不偷懒应该可以学的玩吧,在偷懒以后就要去刷盘子了,今天学了大概3小时,自我学习状态还可以就是颈椎有点酸,不能在松懈了,虽然还是很迷茫,插今天和昨天基金亏的孩子都哭啥了 呜呜呜。好了最后一句还是我最喜欢的文案:

你在做什么?我在仰望天空。度的仰望是什么?是我想念她的角度。为什么要把头抬到度?为了不让我的眼泪掉下来。?好了如果有人愿意跟我一起监督我学习的画可以私聊我哈哈哈

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-03-17 22:31:30  更:2022-03-17 22:34:11 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/16 18:45:40-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码