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)/9if(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小時,自我學習狀態還可以就是頸椎有點酸,不能在松懈了,雖然還是很迷茫,插今天和昨天基金虧的孩子都哭啥了 嗚嗚嗚。好了最后一句還是我最喜歡的文案:
你在做什么?我在仰望天空。度的仰望是什么?是我想念她的角度。為什么要把頭抬到度?為了不讓我的眼淚掉下來。?好了如果有人愿意跟我一起監督我學習的畫可以私聊我哈哈哈
總結
以上是生活随笔為你收集整理的3.15 study 简单移动动画js实现的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: win7系统下 安装anaconda时报
- 下一篇: 微博置顶