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

最新推荐文章于 2024-09-04 20:18:34 发布

WLYQ1314

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量123

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/lostyu/p/jsmryl13.html

版权

一、图片放大缩小

  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 #ulList{ margin:50px;}
  9 #ulList li{ margin:10px; width:100px; height:100px; float:left; background:#ddd; border:1px solid black;}
 10 </style>
 11 <script>
 12 window.onload = function()
 13 {
 14     var oUl = document.getElementById('ulList');
 15     var aLi = oUl.getElementsByTagName('li');
 16     var zIndex = 2;
 17     
 18     //布局转换
 19     for(var i=0;i<aLi.length;i++){
 20         aLi[i].style.left = aLi[i].offsetLeft + 'px';
 21         aLi[i].style.top = aLi[i].offsetTop + 'px';        
 22     }
 23     
 24     for(var i=0;i<aLi.length;i++){
 25         aLi[i].style.position = 'absolute';
 26         aLi[i].style.margin = '0';
 27     }
 28     
 29     for(var i=0;i<aLi.length;i++){
 30         aLi[i].onmouseover = function()
 31         {
 32             this.style.zIndex = zIndex++;
 33             startMove(this, {width:200, height:200, marginLeft:-50, marginTop:-50});
 34         };
 35         aLi[i].onmouseout = function()
 36         {
 37             startMove(this, {width:100, height:100, marginLeft:0, marginTop:0});
 38         };
 39     }
 40 };
 41 
 42 function getStyle(obj, attr)
 43 {
 44     if(obj.currentStyle){
 45         return obj.currentStyle[attr];
 46     }else{
 47         return getComputedStyle(obj, false)[attr];
 48     }
 49 }
 50 
 51 function startMove(obj, json, fn)
 52 {
 53     clearInterval(obj.timer);
 54     obj.timer=setInterval(function (){
 55         var bStop=true;        
 56         for(var attr in json)
 57         {
 58             
 59             var iCur=0;
 60             
 61             if(attr=='opacity')
 62             {
 63                 iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
 64             }
 65             else
 66             {
 67                 iCur=parseInt(getStyle(obj, attr));
 68             }
 69             
 70             
 71             var iSpeed=(json[attr]-iCur)/8;
 72             iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
 73             
 74             
 75             if(iCur!=json[attr])
 76             {
 77                 bStop=false;
 78             }
 79             
 80             if(attr=='opacity')
 81             {
 82                 obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
 83                 obj.style.opacity=(iCur+iSpeed)/100;
 84             }
 85             else
 86             {
 87                 obj.style[attr]=iCur+iSpeed+'px';
 88             }
 89         }
 90         
 91         if(bStop)
 92         {
 93             clearInterval(obj.timer);
 94             
 95             if(fn)
 96             {
 97                 fn();
 98             }
 99         }
100     }, 30)
101 }
102 </script>
103 </head>
104 
105 <body>
106 <ul id="ulList">
107     <li></li>
108     <li></li>
109     <li></li>
110     <li></li>
111     <li></li>
112     <li></li>
113     <li></li>
114     <li></li>
115     <li></li>
116     <li></li>
117     <li></li>
118     <li></li>
119     <li></li>
120     <li></li>
121     <li></li>
122     <li></li>
123     <li></li>
124     <li></li>
125     <li></li>
126     <li></li>
127 </ul>
128 </body>
129 </html>

View Code

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

  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

三、无缝滚动

 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

转载于:https://www.cnblogs.com/lostyu/p/jsmryl13.html

WLYQ1314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript每日一练（十三）——运动实例

一、图片放大缩小 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>图片放大缩小</title> 6 <style> 7 *{ margin:0; padding:0...
复制链接

扫一扫