Javascript _ javascript tips

This article mainly introduces how js achieves multiple different motion effects on the same page. It involves javascript techniques for achieving multiple effects at the same time, which is of great practical value, for more information about how to implement different motion effects on the same page, see the example in this article. Share it with you for your reference. The specific analysis is as follows:

Key Aspect 1:

function getstyle(obj,name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];}}

From the style sheet, take the value based on the id and attribute name.

Key Aspect 2:

if(attr == "opacity"){cur = Math.round(parseFloat(getstyle(obj,attr))*100);}else{cur = parseInt(getstyle(obj,attr));}

If the transparency value is set, because it may be a decimal point, you need to use parseFloat, And then there may be decimal places, and round them to an integer using the round method.

If you set a non-transparency value, use parseInt to take only the numerical value

Other notes are mentioned in the previous sections and will not be described here.

Finally, run the following code:

 Untitled documentScript window. onload = function () {var runs = document. getElementById ("runs"); var runs_li = runs. getElementsByTagName ("li"); runs_li [0]. onmouseover = function () {startrun (this, "width", 300);} runs_li [0]. onmouseout = function () {startrun (this, "width", 80);} runs_li [1]. onmouseover = function () {startrun (this, "height", 300);} runs_li [1]. onmouseout = function () {startrun (this, "height", 80);} runs_li [2]. onmouseover = function () {startrun (this, "fontSize", 50);} runs_li [2]. onmouseout = function () {startrun (this, "fontSize", 14);} runs_li [3]. onmouseover = function () {startrun (this, "opacity", 100);} runs_li [3]. onmouseout = function () {startrun (this, "opacity", 30) ;}} function startrun (obj, attr, target) {clearInterval (obj. timer); obj. timer = setInterval (function () {var cur = 0; if (attr = "opacity") {c Ur = 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);} 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);} function getstyle (obj, name) {if (obj. currentStyle) {return obj. currentStyle [name];} else {return getComputedStyle (obj, false) [name];} script
 
 
 
  
  
1
 
  
  
2
 
  
  
3
 
  
  
4
 
 

I hope this article will help you design javascript programs.