一、图片放大缩小
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
二、信息滑动淡入加载显示
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
三、无缝滚动
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>