javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

2019-11-20 10:50:04

字体：大中小

来源：转载

供稿：网友

本文实例总结了javascript运动效果实现与用法。分享给大家供大家参考，具体如下：

一、图片放大缩小效果：

<!doctype html><html><head><meta charset="utf-8"><title>图片放大缩小</title><style>*{ margin:0; padding:0; list-style:none;}#ulList{ margin:50px;}#ulList li{ margin:10px; width:100px; height:100px; float:left; background:#ddd; border:1px solid black;}</style><script>window.onload = function(){ var oUl = document.getElementById('ulList'); var aLi = oUl.getElementsByTagName('li'); var zIndex = 2; //布局转换 for(var i=0;i<aLi.length;i++){  aLi[i].style.left = aLi[i].offsetLeft + 'px';  aLi[i].style.top = aLi[i].offsetTop + 'px'; } for(var i=0;i<aLi.length;i++){  aLi[i].style.position = 'absolute';  aLi[i].style.margin = '0'; } for(var i=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});  }; }};function getStyle(obj, attr){ if(obj.currentStyle){  return obj.currentStyle[attr]; }else{  return getComputedStyle(obj, false)[attr]; }}function startMove(obj, json, fn){ clearInterval(obj.timer); obj.timer=setInterval(function (){  var bStop=true;  for(var attr in json)  {   var iCur=0;   if(attr=='opacity')   {    iCur=parseInt(parseFloat(getStyle(obj, attr))*100);   }   else   {    iCur=parseInt(getStyle(obj, attr));   }   var iSpeed=(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><ul id="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>

二、信息滑动淡入加载显示效果：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#msgBox{ width:500px; margin:0 auto; padding:5px;}.msgList{ filter:alpha(opacity=0); opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;}.box{ float:left;}</style><script>window.onload = function(){ var oTxt = document.getElementById('txt1'); var oBtn = document.getElementById('btn1'); var oBox = document.getElementById('msgBox'); oBtn.onclick = function() {  var oMsg = document.createElement('div');  var aDiv = 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]);  }  var iH = oMsg.offsetHeight;  oMsg.style.height = 0;  startMove(oMsg, {height:iH}, function(){   startMove(oMsg, {opacity:100});  }); };};function getStyle(obj, attr){ if(obj.currentStyle){  return obj.currentStyle; }else{  return getComputedStyle(obj, false)[attr]; }}function startMove(obj, json, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){  var bStop = true;  for(var attr in json){   var iCur = 0;   if(attr == 'opacity'){    iCur = Math.round((parseFloat(getStyle(obj, attr))*100));   }else{    iCur = parseInt(getStyle(obj, attr));   }   var iSpeed = (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><div class="box"> <textarea id="txt1" cols="40" rows="10"></textarea><br /> <input id="btn1" type="button" value="提交信息" /></div><div id="msgBox"></div></body></html>

三、无缝滚动效果：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{ margin:0; padding:0; list-style:none;}#div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}#div1 li{ float:left; padding:10px;}#div1 li img{ display:block;}#div1 ul{ position:absolute;}</style><script>window.onload = function(){ var oDiv = document.getElementById('div1'); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var aBtn = document.getElementsByTagName('input'); var iSpeed = -3; var timer = 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); }; function move(){  if(oUl.offsetLeft<-oUl.offsetWidth/2){   oUl.style.left = '0px';  }else if(oUl.offsetLeft>0){   oUl.style.left = -oUl.offsetWidth/2 + 'px';  }  oUl.style.left = oUl.offsetLeft + iSpeed + 'px'; }};</script></head><body><input type="button" value="向左" /><input type="button" value="向右" /><div id="div1"> <ul>  <li><img src="images/1.jpg" width="100" height="100" /></li>  <li><img src="images/2.jpg" width="100" height="100" /></li>  <li><img src="images/3.jpg" width="100" height="100" /></li>  <li><img src="images/4.jpg" width="100" height="100" /></li> </ul></div></body></html>

更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：javascript弹性运动效果简单实现方法

下一篇：javascript运动框架用法实例分析(实现放大与缩小效果)