本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
使用setTimeout()或者setInterval()使用这两个函数定时调用一段代码。这是其原理。
目的,重复修改内联样式,达到动画的效果
通过在相同的时间内构造出一帧帧的内容,然后让其在函数的作用下不断的改变css的值,达到动画的效果
js写css动画
// 将e转化为相对定位的元素,使得其可以左右移动 // 第一个参数为元素对象或者元素的id // 如果第二个参数是函数,以e为参数,它将在动画结束时调用 // 第三个参数指定e移动的距离,默认为5像素 // 第四个参数指定移动多久,默认500毫秒 function shake(e, oncomplete, distance, time) { // 句柄函数 if (typeof e === "string") e = document.getElemnentById(e); // 如果传入的是对象的id则获取对象的id,如果传入的为元素(元素为对象)则直接跳过这一句 if (!time) time = 500; // 如果time是空值,则直接使用默认值 if (!distance) distance = 5; // 如果未指定移动的距离,则默认为5像素 var originalStyle = e.style.cssText; // 获取元素e的css样式 e.style.position = "relative"; // 设置为相对定位 var start = (new Date()).getTime(); // 设置动画开始的时间,获取一个格林威治时间 animate(); // 动画开始 // 函数检查消耗时间,并更新e的位置 // 如果动画完成,它将e还原为原始状态 // 否则,将会更新e的位置,安排其自身重新运行 function animate() { var now = (new Date()).getTime(); // 获取现在的时间 var elapsed = now-start; // 从开始以来消耗了多长时间 var fraction = elapsed / time; // 为总时间的几分之几 if (fraction <p>查询计算出的样式</p><pre class="brush:php;toolbar:false">getComputedStyle(e)
275个样式。。。O__O "…
脚本化css类
除了能脚本化内联样式,同样的也能脚本化css的类
移除,添加类
e.className = "attention"; // 添加类 e.className = ""; // 移除类
显示类列表
classList
只读属性,返回元素类属性的实时集合。
e.classList()
脚本化样式表
开启和关闭样式表
style和link元素的CSSStyleSheet对象定义了一个在js中可以设置和查询的disabled属性。
关于disabled属性,该属性在HTML中不属于规范的一部分,在HTML中不存在,但是,在DOM中存在该属性。在标签中无法设置该属性,但是可以在脚本中设置该属性如果值为true,样式表关闭,否则样式表打开
e.disabled = true;
这样样式表即可关闭。
类似的通过以下方式也可
document.styleSheets[0].disabled;
CSSStyleSheet对象同样也定义了用来查询,插入和删除样式表规则的api
var firstRule = document.styleSheets[0].cssRules[0];
document.styleSheets[0] 一个只读属性,返回一个该文档的链接或嵌入的样式表
该样式只读,不可进行插入和删除
其中selectorText为css选择器
cssText 为css的文本样式
insertRule()和deleteRule()这两种方法,达到添加和删除规则
还有一个addRule()方法
insertRule()和deleteRule()这两种方法,达到添加和删除规则
ss.insertRule(".name {color:blue}", 0);
在ss样式表中,在第0条cssRules中添加一条css规则。使得类为name的字体变蓝
如果添加的索引已经存在则不会覆盖,所有的索引加1,然后进行插入
删除样式规则
删除上一条插入的样式
ss.deleteRule(0);
删除第0条规则,样式继续保持从0开始
这个不难,直接插入一个新的style元素通过innerHTML的方式将其插入新的css内容,或者直接插入link标签,设置添加一个html的属性使用的是 Element.setAttritube()方法,将rel的值设置为stylesheet 然后在用同样的方法添加src属性
纯粹的dom 和 bom的操作,不涉及任何样式表的内容
相关推荐:
CSS 和 JS 动画哪个更快_html/css_WEB-ITnose
css动画结束后 js无法修改translated值 ._html/css_WEB-ITnose
以上就是js如何写出css动画 ?js写css动画的方法(代码)的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号