javascript每日一练—运动

时间：2015-07-12 14:06:51 阅读：134 评论：0 收藏：0 [点我收藏+]

标签：

1、弹性运动

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

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
 8 </style>
 9 <script>
10 window.onload = function()
11 {
12     var oBtn = document.getElementById(‘btn1‘);
13     var oDiv = document.getElementById(‘div1‘);
14     
15     oBtn.onclick = function()
16     {
17         startMove(oDiv, 300);
18     };
19 };
20 
21 var iSpeed = 0;
22 var left = 0;
23 
24 function startMove(obj, iTarget)
25 {
26     clearInterval(obj.timer);
27     obj.timer = setInterval(function(){
28         iSpeed += (iTarget - obj.offsetLeft)/5;
29         iSpeed *= 0.7;
30         
31         left += iSpeed;
32         
33         if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
34             clearInterval(obj.timer);
35             obj.style.left = iTarget + ‘px‘;
36         }else{
37             obj.style.left = obj.offsetLeft + iSpeed + ‘px‘;    
38         }        
39         
40     }, 30);
41 }
42 </script>
43 </head>
44 
45 <body>
46 <input id="btn1" type="button" value="运动" />
47 <div id="div1"></div>
48 <div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
49 </body>
50 </html>

View Code

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>

View Code

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

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7 #msgBox{ width:500px; margin:0 auto; padding:5px;}
  8 .msgList{ filter:alpha(opacity=0); opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;}
  9 
 10 .box{ float:left;}
 11 </style>
 12 
 13 <script>
 14 window.onload = function()
 15 {
 16     var oTxt = document.getElementById(‘txt1‘);
 17     var oBtn = document.getElementById(‘btn1‘);
 18     var oBox = document.getElementById(‘msgBox‘);
 19     
 20     oBtn.onclick = function()
 21     {
 22         var oMsg = document.createElement(‘div‘);
 23         var aDiv = oBox.getElementsByTagName(‘div‘);
 24         
 25         oMsg.className = ‘msgList‘;
 26         oMsg.innerHTML = oTxt.value;
 27         oTxt.value = ‘‘;
 28         
 29         if(aDiv.length==0){
 30             oBox.appendChild(oMsg);
 31         }else{
 32             oBox.insertBefore(oMsg, aDiv[0]);
 33         }
 34         
 35         var iH = oMsg.offsetHeight;
 36         oMsg.style.height = 0;
 37         
 38         startMove(oMsg, {height:iH}, function(){
 39             startMove(oMsg, {opacity:100});
 40         });
 41         
 42     };
 43 };
 44 
 45 function getStyle(obj, attr)
 46 {
 47     if(obj.currentStyle){
 48         return obj.currentStyle;
 49     }else{
 50         return getComputedStyle(obj, false)[attr];
 51     }
 52 }
 53 
 54 function startMove(obj, json, fn)
 55 {
 56     clearInterval(obj.timer);
 57     obj.timer = setInterval(function(){
 58         var bStop = true;
 59         
 60         for(var attr in json){
 61             var iCur = 0;
 62             
 63             if(attr == ‘opacity‘){
 64                 iCur = Math.round((parseFloat(getStyle(obj, attr))*100));
 65             }else{
 66                 iCur = parseInt(getStyle(obj, attr));
 67             }
 68             
 69             var iSpeed = (json[attr] - iCur) / 8;
 70             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 71             
 72             if(iCur != json[attr]){
 73                 bStop = false;
 74             }
 75             
 76             if(attr == ‘opacity‘){
 77                 obj.style.filter = ‘alpha(opacity=‘ + (iCur + iSpeed)+‘)‘;
 78                 obj.style.opacity = (iCur + iSpeed) / 100;
 79             }else{
 80                 obj.style[attr] = iCur + iSpeed + ‘px‘;
 81             }
 82         }
 83         
 84         if(bStop){
 85             clearInterval(obj.timer);
 86             
 87             if(fn){
 88                 fn();
 89             }
 90         }
 91     }, 30);
 92 }
 93 </script>
 94 </head>
 95 
 96 <body>
 97 <div class="box">
 98     <textarea id="txt1" cols="40" rows="10"></textarea><br />
 99     <input id="btn1" type="button" value="提交信息" />
100 </div>
101 <div id="msgBox">
102     
103 
104 </div>
105 </body>
106 </html>

View Code

4、无缝滚动

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 *{ margin:0; padding:0; list-style:none;}
 8 #div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;}
 9 #div1 li{ float:left; padding:10px;}
10 #div1 li img{ display:block;}
11 #div1 ul{ position:absolute;}
12 </style>
13 <script>
14 window.onload = function()
15 {
16     var oDiv = document.getElementById(‘div1‘);
17     var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
18     var aLi = oUl.getElementsByTagName(‘li‘);
19     var aBtn = document.getElementsByTagName(‘input‘);
20     var iSpeed = -3;
21     var timer = null;
22     
23     oUl.innerHTML += oUl.innerHTML;
24     oUl.style.width = aLi[0].offsetWidth * aLi.length + ‘px‘;
25     
26     timer = setInterval(move, 30);
27     
28     aBtn[0].onclick = function()
29     {
30         iSpeed = -3;
31     };
32     
33     aBtn[1].onclick = function()
34     {
35         iSpeed = 3;
36     };
37     
38     oDiv.onmouseover = function()
39     {
40         clearInterval(timer);
41     };
42     
43     oDiv.onmouseout = function()
44     {
45         timer = setInterval(move, 30);
46     };
47     
48     function move(){                
49         if(oUl.offsetLeft<-oUl.offsetWidth/2){
50             oUl.style.left = ‘0px‘;
51         }else if(oUl.offsetLeft>0){
52             oUl.style.left = -oUl.offsetWidth/2 + ‘px‘;
53         }
54         oUl.style.left = oUl.offsetLeft + iSpeed + ‘px‘;
55     }
56     
57 };
58 </script>
59 </head>
60 
61 <body>
62 <input type="button" value="向左" />
63 <input type="button" value="向右" />
64 <div id="div1">
65     <ul>
66         <li><img src="images/1.jpg" width="100" height="100" /></li>
67         <li><img src="images/2.jpg" width="100" height="100" /></li>
68         <li><img src="images/3.jpg" width="100" height="100" /></li>
69         <li><img src="images/4.jpg" width="100" height="100" /></li>
70     </ul>
71 </div>
72 </body>
73 </html>

View Code

javascript每日一练—运动

标签：

原文地址：http://www.cnblogs.com/aure/p/4640800.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行