js运动框架
2015-07-31 13:20
447 查看
// JavaScript Document
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].timer=null;
oDiv[i].onmouseover=function(){
startMove(this,'opacity',100);
}
oDiv[i].onmouseout=function(){
startMove(this,'opacity',30);
}
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
var timer=null;
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iCur=0;
if(attr=='opacity'){
iCur=parseInt(parseFloat(getStyle(obj,'opacity'))*100);//在这里首先要用pareFloat()方法让opacity的小数值取出,然后再用parseInt()方法将该属性值多余的小数去掉
}else{
iCur=parseInt(getStyle(obj,'width'));
}
var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur==iTarget){
clearInterval(obj.timer);
}else{
if(attr=='opacity'){
obj.style.opacity=(iCur+iSpeed)/100;
//obj.style.filter=iCur+iSpeed;
}else{
obj.style.width=iCur+iSpeed+'px';
}
}
},30);
}
</script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].timer=null;
oDiv[i].onmouseover=function(){
startMove(this,'opacity',100);
}
oDiv[i].onmouseout=function(){
startMove(this,'opacity',30);
}
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
var timer=null;
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iCur=0;
if(attr=='opacity'){
iCur=parseInt(parseFloat(getStyle(obj,'opacity'))*100);//在这里首先要用pareFloat()方法让opacity的小数值取出,然后再用parseInt()方法将该属性值多余的小数去掉
}else{
iCur=parseInt(getStyle(obj,'width'));
}
var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur==iTarget){
clearInterval(obj.timer);
}else{
if(attr=='opacity'){
obj.style.opacity=(iCur+iSpeed)/100;
//obj.style.filter=iCur+iSpeed;
}else{
obj.style.width=iCur+iSpeed+'px';
}
}
},30);
}
</script>
相关文章推荐
- JS方法
- Newtonsoft.Json 高级用法
- 【分享】 封装js操作textarea 方法集合(兼容很好)。
- elasticlunr.js 最新版本v0.6.7发布啦
- js中的三个编码函数:escape,encodeURI,encodeURIComponent
- javascript实现检验的各种规则
- 纯JS实现本地图片预览的方法
- javascript动画算法实例分析
- js正则验证方法大全
- 对象和XML,JSON格式字符串的相互转换
- 网页制作实践步骤一 导航栏
- javascript文本模板用法实例
- 【坑】javascript中给元素加事件的方法名不要加小括号
- js 数组方法整理
- Javascript实现网络监测的方法
- JavaScript学习笔记——函数
- JSON字符串转JSON对象
- javascript实现简单的页面右下角提示信息框
- JavaScript实现快速排序的方法
- JS模块化编程