javascript每日一练（十三）——运动实例

时间：2022-12-18 07:17:40

一、图片放大缩小

 <!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="data:images/1.jpg" width="100" height="100" /></li>
         <li><img src="data:images/2.jpg" width="100" height="100" /></li>
         <li><img src="data:images/3.jpg" width="100" height="100" /></li>
         <li><img src="data:images/4.jpg" width="100" height="100" /></li>
     </ul>
 </div>
 </body>
 </html>

相关文章