首页>>Jquery文字>>js鼠标经过图标和文字翻滚360度(2020-05-09)

js鼠标经过图标和文字翻滚360度

js鼠标经过图标和文字翻滚360度
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. var FeiChao = window.FeiChao ||{};  
  2. FeiChao.Organ = function(){  
  3. document.onreadystatechange = Organadvert;  
  4.     function Organadvert() {  
  5.         var ad = document.getElementsByClassName("adleft");  
  6.         var adlength = ad.length;  
  7.             for(var i=0;i<adlength;i++)  
  8.             {  
  9.                 var adid = ad[i].id = 'ad'+i;  
  10.                 if(adid)  
  11.                 {  
  12.                     var nid = document.getElementById(adid);  
  13.                     nid.onmouseover=function () {  
  14.                         for (var i = 0; i < ad.length; i++) {  
  15.                             var tfc  = this.lastElementChild;  
  16.                             ad[i].style.background = '#eeeeee'  
  17.                             this.style.background = '#fff'  
  18.                             tfc.style.transform = 'rotate(360deg)';  
  19.                             tfc.style.transition = '1s';  
  20.                             fadein(tfc);  
  21.                             var tfl  = this.firstElementChild;  
  22.                             tfl.style.transform = 'rotate(360deg)';  
  23.                             tfl.style.transition = '1s';  
  24.                     }  
  25.                 }  
  26.                     nid.onmouseout=function() {  
  27.                         for (var i = 0; i < ad.length; i++) {  
  28.                             var tfc  = this.lastElementChild;  
  29.                             tfc.display = 'none';  
  30.                             ad[i].style.background = '#fff'  
  31.                             tfc.style.transform = 'rotate(0deg)';  
  32.                             fadeout(tfc);  
  33.                             var tfl  = this.firstElementChild;  
  34.                             tfl.style.transform = 'rotate(0deg)';  
  35.                         }  
  36.                     }  
  37.                 }  
  38.             }  
  39.     }  
  40. }  
  41.   
  42. //fadein  
  43. function fadein(el)  
  44. {  
  45.     el.style.opacity = 0;  
  46.     el.style.display = "";  
  47.     var last = +new Date();  
  48.     var tick = function()  
  49.     {  
  50.         el.style.opacity = +el.style.opacity + (new Date() - last);  
  51.         last = +new Date();  
  52.         if(+el.style.opacity >0)  
  53.         {  
  54.             (window.requestAnimationFrame && requestAnimationFrame(tick) || setTimeout(tick,16));  
  55.         }  
  56.     }  
  57. }  
  58.   
  59. // fadeout  
  60. function fadeout(el)  
  61. {  
  62.     el.style.opacity = 1;  
  63.     el.style.display = "";  
  64.     var last = +new Date();  
  65.     var tick = function()  
  66.     {  
  67.         el.style.opacity = +el.style.opacity + (new Date() - last);  
  68.         last = +new Date();  
  69.         if(+el.style.opacity <1)  
  70.         {  
  71.             (window.requestAnimationFrame && requestAnimationFrame(tick) || setTimeout(tick,16));  
  72.         }  
  73.     }  
  74. }  

 


原文地址:http://www.freejs.net/article_jquerywenzi_860.html