用js实现类似jquery里的animate动画效果
2012-03-14 10:54
851 查看
效果如下,鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去。
// function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
window.onload = function(){
var box = document.getElementById("box");
box.onmouseover = function(){
startrun(box,"width",200,function(){
startrun(box,"height",200,function(){
startrun(box,"opacity","100")
});
});
}
box.onmouseout = function(){
startrun(box,"height",100,function(){
startrun(box,"width",100,function(){
startrun(box,"opacity","30");
});
});
}
}
function startrun(obj,attr,target,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cur = 0;
if(attr == "opacity"){
cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}
var speed = (target-cur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur == target){
clearInterval(obj.timer);
if(fn){
fn();
}
}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)
}
// ]]>
要点一:
startrun(obj,attr,target,fn)
box.onmouseover = function(){
startrun(box,"width",200,function(){
startrun(box,"height",200,function(){
startrun(box,"opacity","100")
});
});
}
如上面,函数也可以做为参数使用,就可以达到先执行某个动作,再执行某个动作的效果了。
要点二:
if(cur == target){
clearInterval(obj.timer);
if(fn){
fn();
}
}
当运动到达目标点,关闭定时器,然后就可以执行新的函数了。
最后,上代码
// function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
window.onload = function(){
var box = document.getElementById("box");
box.onmouseover = function(){
startrun(box,"width",200,function(){
startrun(box,"height",200,function(){
startrun(box,"opacity","100")
});
});
}
box.onmouseout = function(){
startrun(box,"height",100,function(){
startrun(box,"width",100,function(){
startrun(box,"opacity","30");
});
});
}
}
function startrun(obj,attr,target,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cur = 0;
if(attr == "opacity"){
cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}
var speed = (target-cur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur == target){
clearInterval(obj.timer);
if(fn){
fn();
}
}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)
}
// ]]>
要点一:
startrun(obj,attr,target,fn)
box.onmouseover = function(){
startrun(box,"width",200,function(){
startrun(box,"height",200,function(){
startrun(box,"opacity","100")
});
});
}
如上面,函数也可以做为参数使用,就可以达到先执行某个动作,再执行某个动作的效果了。
要点二:
if(cur == target){
clearInterval(obj.timer);
if(fn){
fn();
}
}
当运动到达目标点,关闭定时器,然后就可以执行新的函数了。
最后,上代码
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> <!-- body{margin:0; padding:0; font:12px/1.5 arial;} #box{width:100px; height:100px; position:absolute; background:#06c; left:0;filter:alpha(opacity=30); opacity:0.3;} --> </style> <script> <!-- function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } window.onload = function(){ var box = document.getElementById("box"); box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,function(){ startrun(box,"opacity","100") }); }); } box.onmouseout = function(){ startrun(box,"height",100,function(){ startrun(box,"width",100,function(){ startrun(box,"opacity","30"); }); }); } } function startrun(obj,attr,target,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = 0; if(attr == "opacity"){ cur = Math.round(parseFloat(getstyle(obj,attr))*100); }else{ cur = parseInt(getstyle(obj,attr)); } var speed = (target-cur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == target){ clearInterval(obj.timer); if(fn){ fn(); } }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> </head> <body> <div id="box"> </div> </body> </html>
相关文章推荐
- js实现类似jquery里animate动画效果的方法
- 用js实现类似jquery里的animate动画效果
- jquery的animate动画效果函数用JS代码是如何实现的
- 浅谈原生JS实现jQuery的animate()动画示例
- 原生js实现鼠标点击效果(不是真实鼠标点击,用js模拟鼠标点击,类似jquery trigger效果)
- Jquery使用animate实现css3的transform动画效果
- 用js实现的模拟jquery的animate自定义动画(2.5K)
- WOW.js+animate 帮助你实现滚动页面动画效果
- 原生js简单实现jQuery的动画效果
- 利用jQuery的动画函数animate实现豌豆发射效果
- 利用jQuery的动画函数animate实现豌豆发射效果
- jQuery中animate()动画效果的实现
- jquery结合animate.css 动画效果的实现
- 浅谈原生JS实现jQuery的animate()动画
- jquery使用CSS3实现文字动画效果插件Textillate.js
- 用js实现的模拟jquery的animate自定义动画(2.5K)
- jquery使用CSS3实现文字动画效果插件Textillate.js
- js、jquery和css 3中的动画实现效果
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
- js实现类似新浪微博首页内容渐显效果的方法