Javascript motion effect example summary (zoom in and out, slide fade in, scroll) _ javascript skills

This article mainly introduces the javascript motion effect, and summarizes and analyzes the methods of JavaScript effects, such as Zoom-in, sliding-in, and scrolling based on examples, for more information, see the examples in this article to summarize the implementation and usage of javascript motion effects. We will share this with you for your reference. The details are as follows:

I. Zoom in and out the image:

 Zoom in and outScript window. onload = function () {var oUl = document. getElementById ('ullist'); var aLi = oUl. getElementsByTagName ('lil'); var zIndex = 2; // layout conversion for (var I = 0; i0? 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
 
 
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  
 
  
  

 
 

II. Information sliding fade-in loading display effect:

 Untitled documentScript 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 ('P'); var aDiv = oBox. getElementsByTagName ('P'); oMsg. className = 'msglist'; oMsg. innerHTML = oTxt. value; oTxt. value = ''; if (aDiv. length = 0) {oBox. appendChild (oMsg);} e Lse {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 () {v Ar 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
 
 

Iii. Seamless rolling effect:

 Untitled documentScript window. onload = function () {var oDiv = document. getElementById ('p1'); var oUl = oDiv. getElementsByTagName ('ul ') [0]; var aLi = oUl. getElementsByTagName ('lil'); 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