javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
本文实例总结了javascript运动效果实现与用法。分享给大家供大家参考，具体如下：
一、图片放大缩小效果：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>图片放大缩小</title>
<style>
*{margin:0;padding:0;list-style:none;}
#ulList{margin:50px;}
#ulListli{margin:10px;width:100px;height:100px;float:left;background:#ddd;border:1pxsolidblack;}
</style>
<script>
window.onload=function()
{
varoUl=document.getElementById('ulList');
varaLi=oUl.getElementsByTagName('li');
varzIndex=2;
//布局转换
for(vari=0;i<aLi.length;i++){
aLi[i].style.left=aLi[i].offsetLeft+'px';
aLi[i].style.top=aLi[i].offsetTop+'px';
}
for(vari=0;i<aLi.length;i++){
aLi[i].style.position='absolute';
aLi[i].style.margin='0';
}
for(vari=0;i<aLi.length;i++){
aLi[i].onmouseover=function()
{
this.style.zIndex=zIndex++;
startMove(this,{width:200,height:200,marginLeft:-50,marginTop:-50});
};
aLi[i].onmouseout=function()
{
startMove(this,{width:100,height:100,marginLeft:0,marginTop:0});
};
}
};
functiongetStyle(obj,attr)
{
if(obj.currentStyle){
returnobj.currentStyle[attr];
}else{
returngetComputedStyle(obj,false)[attr];
}
}
functionstartMove(obj,json,fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varbStop=true;
for(varattrinjson)
{
variCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}
else
{
iCur=parseInt(getStyle(obj,attr));
}
variSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur!=json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},30)
}
</script>
</head>
<body>
<ulid="ulList">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
二、信息滑动淡入加载显示效果：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<style>
#msgBox{width:500px;margin:0auto;padding:5px;}
.msgList{filter:alpha(opacity=0);opacity:0;font-size:12px;line-height:1.6;border-bottom:1pxsolid#ddd;}
.box{float:left;}
</style>
<script>
window.onload=function()
{
varoTxt=document.getElementById('txt1');
varoBtn=document.getElementById('btn1');
varoBox=document.getElementById('msgBox');
oBtn.onclick=function()
{
varoMsg=document.createElement('div');
varaDiv=oBox.getElementsByTagName('div');
oMsg.className='msgList';
oMsg.innerHTML=oTxt.value;
oTxt.value='';
if(aDiv.length==0){
oBox.appendChild(oMsg);
}else{
oBox.insertBefore(oMsg,aDiv[0]);
}
variH=oMsg.offsetHeight;
oMsg.style.height=0;
startMove(oMsg,{height:iH},function(){
startMove(oMsg,{opacity:100});
});
};
};
functiongetStyle(obj,attr)
{
if(obj.currentStyle){
returnobj.currentStyle;
}else{
returngetComputedStyle(obj,false)[attr];
}
}
functionstartMove(obj,json,fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varbStop=true;
for(varattrinjson){
variCur=0;
if(attr=='opacity'){
iCur=Math.round((parseFloat(getStyle(obj,attr))*100));
}else{
iCur=parseInt(getStyle(obj,attr));
}
variSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur!=json[attr]){
bStop=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}else{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
</script>
</head>
<body>
<divclass="box">
<textareaid="txt1"cols="40"rows="10"></textarea><br/>
<inputid="btn1"type="button"value="提交信息"/>
</div>
<divid="msgBox">
</div>
</body>
</html>
三、无缝滚动效果：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:480px;height:120px;margin:50pxauto;border:1pxsolidblack;position:relative;overflow:hidden;}
#div1li{float:left;padding:10px;}
#div1liimg{display:block;}
#div1ul{position:absolute;}
</style>
<script>
window.onload=function()
{
varoDiv=document.getElementById('div1');
varoUl=oDiv.getElementsByTagName('ul')[0];
varaLi=oUl.getElementsByTagName('li');
varaBtn=document.getElementsByTagName('input');
variSpeed=-3;
vartimer=null;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
timer=setInterval(move,30);
aBtn[0].onclick=function()
{
iSpeed=-3;
};
aBtn[1].onclick=function()
{
iSpeed=3;
};
oDiv.onmouseover=function()
{
clearInterval(timer);
};
oDiv.onmouseout=function()
{
timer=setInterval(move,30);
};
functionmove(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0px';
}elseif(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
}
};
</script>
</head>
<body>
<inputtype="button"value="向左"/>
<inputtype="button"value="向右"/>
<divid="div1">
<ul>
<li><imgsrc="images/1.jpg"width="100"height="100"/></li>
<li><imgsrc="images/2.jpg"width="100"height="100"/></li>
<li><imgsrc="images/3.jpg"width="100"height="100"/></li>
<li><imgsrc="images/4.jpg"width="100"height="100"/></li>
</ul>
</div>
</body>
</html>
更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。