首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js animate动画基础

什么是animate     js运动是我们学习js必不可少的研究部分,首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已,比如不断改变一个绝对定位div的left值,那么你看到的效果就是这个...我们知道从a这一点到b这一点我们的运动方式有很多, 1.比如匀速运动到这一点 2.比如先快后慢, 3.必须先慢后快等等    animate就是这些运动的一个实现过程,js可以实现animate,运动的过程大多数也被封装在...JQuery库中,下面就是用js来实现animate方法 封装animate 什么是封装:js封装就是将一些常用的函数方法写到一个.js文件里面,用函数的范式,以便于下次调用,或者多次调用。...(必须先导入js文件) 下面就是animate的封装方法: //返回el对象css样式中的property属性值 function getStyle(el, property) { if (getComputedStyle...else { current = parseInt(getStyle(el, property)); } //属性的变化速度

6.7K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    用JS 封装类似于JQ中animate的动画效果

    首先说一下,这篇文章对初学者有很大的帮助,特别是在学习原生JS的初学者,能够帮助你们能够更好的建立好良好的思路和对原生JS的更深一步的了解。废话我们就不多说了。 首先看一下我们要实现什么功能吧。...运动到400 宽度变为400 Css div { position: absolute; width: 100px; height: 100px; background-color: pink; } 核心js...document.getElementsByTagName("button"); var div = document.getElementsByTagName("div")[0]; btnArr[0].onclick = function () { animate...(div, "left", 400); } btnArr[1].onclick = function () { animate(div, "width", 400); } //参数变为3个 function...animate(ele, attr, target) { //先清定时器 clearInterval(ele.timer); ele.timer = setInterval(function () {

    6.5K50

    WEB入门之十八 动画特效

    所以这几个函数都有一个参数来设置动画的速度,该参数的取值有: Ø 无参数:元素将直接显示/隐藏,没有动画特效 Ø slow:慢速(在600ms内)显示/隐藏 Ø normal:正常速度(在400毫秒内)...该函数可以自动进行向上/向下滑动的切换,同样可以使用一个参数来设置动画速度。...可以有多个,有逗号隔开 Ø 参数2用来设置动画的速度,单位是毫秒 下面使用animate函数自定义一个动画,该动画实现了几组图片的滑动,参考代码如下所示。...:"500px",width:"137px",height:"78px"},300, function(){ $("#Layer2").html("播放"); } ); } }...,所以上述代码先控制广告图片向下滑动出来,然后使用delay函数延时5秒以等待图片动画播放完毕,最后从页面上慢慢淡出至消失。

    15410

    WEB入门之十八 动画特效

    所以这几个函数都有一个参数来设置动画的速度,该参数的取值有: Ø 无参数:元素将直接显示/隐藏,没有动画特效 Ø slow:慢速(在600ms内)显示/隐藏 Ø normal:正常速度(在400毫秒内)...该函数可以自动进行向上/向下滑动的切换,同样可以使用一个参数来设置动画速度。...可以有多个,有逗号隔开 Ø 参数2用来设置动画的速度,单位是毫秒 下面使用animate函数自定义一个动画,该动画实现了几组图片的滑动,参考代码如下所示。.../div> $("#Layer2").click( function(){ if($("#Layer2").html()=="播放...,所以上述代码先控制广告图片向下滑动出来,然后使用delay函数延时5秒以等待图片动画播放完毕,最后从页面上慢慢淡出至消失。

    7610
    领券