Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码,让你轻松了解运动的原理
2024-10-16 19:46:39
等待已久的可变大,变宽 等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求。我们看看是如何实现的。
我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.height=oDiv.style[‘height’]
那么,我们把要运动的属性作为一个参数,传入到之前函数中即可。
透明度呢,需要单独处理,判断下即可。
直接上代码。
<style type="text/css">
div {
width: 200px;
height: 200px;
margin: 20px;
float: left;
background: yellow;
border: 1px solid #CCCCFF;
filter: alpha(opacity=30);
opacity: 0.3;
}
</style>
<body>
<div id="div1"></div> </body>
以下是Javascript代码:
<script type="text/javascript">
window.onload = function() {
var oDiv1 = document.getElementById("div1"); oDiv1.onmouseover = function() {
startMove(this, 'opacity', 100);
};
oDiv1.onmouseout = function() {
startMove(this, 'opacity', 30);
}; } function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, null)[name];
}
} function startMove(obj, attr, iTarget) {
clearInterval(obj.time); obj.time = setInterval(function() {
var cur = 0; if (attr == 'opacity') {
cur=parseFloat(getStyle(obj, attr)) * 100;
} else {
cur = parseInt(getStyle(obj, attr));
} var speed = (iTarget - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur == iTarget) {
clearInterval(this.time);
} else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + cur + speed + ')';
obj.style.opacity = (cur + speed) / 100;
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
</script>
结合之前的博文中的知识,相信里面的一些计算原理大家都了如指掌,无需多说了吧。不懂可以回顾下之前的文章。
那么 这个运动框架到目前为止就没问题了吗?
不要急 这个还是有问题的 在IE7 下就会出现bug 。。 怎么会事呢 。
其实Javascript 中的运算是有误差的,alert(0.07*100); // 7.000000000….1
那么我们的代码中 parseFloat(getStyle(obj, attr)) * 100这句就会有误差。
这个问题怎么解决呢??
其实很简单,用 Math.round() ; 改掉相应的代码
cur=parseFloat(getStyle(obj, attr)) * 100;
改成 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); 即可
原理就是把小数干掉,留下整数的部分就可以了。
最新文章
- centos在线安装svn
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
- apache 根据端口访问配置
- 【转】8种Nosql数据库系统对比
- 如何建立一个“绑定友好的”usercontrol--wpf
- 李洪强漫谈iOS开发[C语言-035]-选择结构-与小结
- Nginx Rewrite规则初探(转)
- Gradle 修改 Maven 仓库地址(转)
- Erlang Rebar 使用指南之三:Rebar和OTP程序约定和命令
- 开源litemall学习
- 软件测试面试必问--bug交互流程
- JDK8 HashMap--treeify()树形化方法
- 安装confluence5.10.0版本
- 基于Ardalis.GuardClauses守卫组件的拓展
- FUNMVP:几张图看懂区块链技术到底是什么?(转载)
- @RequestParam @RequestBody @PathVariable 等参数绑定注解详解(转)
- [Linux实用工具]Linux监控工具munin的展示(Nginx)
- Vue 组件中 移动 this.$el 的注意事项
- 20155237 2016-2017-2 《Java程序设计》第6周学习总结
- Flask框架 之 路由和视图详解