javascript每日一练—运动

时间：2021-09-27 07:20:48

1、弹性运动

　　运动原理：加速运动+减速运动+摩擦运动；

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}

 </style>

 <script>

 window.onload = function()

 {

     var oBtn = document.getElementById('btn1');

     var oDiv = document.getElementById('div1');

     oBtn.onclick = function()

     {

         startMove(oDiv, 300);

     };

 };

 var iSpeed = 0;

 var left = 0;

 function startMove(obj, iTarget)

 {

     clearInterval(obj.timer);

     obj.timer = setInterval(function(){

         iSpeed += (iTarget - obj.offsetLeft)/5;

         iSpeed *= 0.7;

         left += iSpeed;

         if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){

             clearInterval(obj.timer);

             obj.style.left = iTarget + 'px';

         }else{

             obj.style.left = obj.offsetLeft + iSpeed + 'px';

         }        

     }, 30);

 }

 </script>

 </head>

 <body>

 <input id="btn1" type="button" value="运动" />

 <div id="div1"></div>

 <div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>

 </body>

 </html>

2、图片放大缩小

<!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>

3、信息滑动淡入加载显示

 <!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>

4、无缝滚动

 <!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>

相关文章