使用定时器改变元素的样式信息
来源:互联网 发布:淘宝助理快递单背景图 编辑:程序博客网 时间:2024/05/18 21:40
1.使用定时器改变样式信息
obj:传入对象
attrName:需要发生改变的属性名
endValue:改变之后的最终值
function changeAttrValue(obj,attrName,endValue){
clearInterval(obj.timer); // 避免冒泡造成的影响
obj.timer = setInterval(function(){
var currentValue = getAttrValue(obj,attrName); // 获得属性的当前值
var speed = ( parseInt(endValue) - parseInt(currentValue) )/4; // 设置步长
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 对speed取整,注意不能取到0
obj.style[attrName] = parseInt(currentValue) + speed + 'px'; // 设置最新获得的属性值
if( obj.style[attrName] == endValue ){
clearInterval(obj.timer); // 关闭定时器
}
},50);
}
2.获得元素的样式信息
obj:传入对象
attrName:属性名
function getAttrValue(obj,attrName){
if( obj.currentStyle ){
return obj.currentStyle[attrName]; // IE浏览器中的获取方法
}else{
return getComputedStyle(obj,null)[attrName];
}
}
- 使用定时器改变元素的样式信息
- 使用css3的appearance改变元素样式
- 简单的改变元素样式
- css:hover鼠标改变另一个元素样式的使用
- 使用JS动态改变元素样式
- 用JS改变的元素CSS样式
- 用JS改变的元素CSS样式
- 用JS改变的元素CSS样式
- 用JS改变的元素CSS样式
- jq 改变其他兄弟元素的样式
- 改变元素的css样式 脚本
- js改变元素样式
- javascript改变元素样式
- 获取元素的具体样式信息getcss
- 如何使用JS来改变CSS样式 -- 元素的样式属性名称在CSS和JS中的对照表
- hover改变其他元素样式
- JavaScript改变HTML元素的样式改变CSS及元素属性
- JavaScript_改变表单元素样式的那些事;
- wordpress 当前栏目名,当前栏目的分类名
- C++时间标准库时间time和系统时间的使用
- hdu1787(欧拉函数)
- sql语句的查询语句基本大全
- sql语句的表的连接
- 使用定时器改变元素的样式信息
- Docker 1.12新功能探索(9):network基础
- 打怪升级(求最大公约数)
- 扑克牌游戏(字符串操作)
- HDU-1036
- 通过Spark Streaming的window操作实战模拟热点搜索词案例实战
- ULR Web 三种路径
- 关于tomcat中Servlet对象池
- 机器学习(三) 深度学习的经典论文、代码、博客文章