一、图片放大缩小效果：
<!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> <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> <textarea cols="40" rows="10"></textarea><br /> <input type="button" value="提交信息" /> </div> <div> </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> <ul> <li><img src="https://www.jb51.net/images/1.jpg" /></li> <li><img src="https://www.jb51.net/images/2.jpg" /></li> <li><img src="https://www.jb51.net/images/3.jpg" /></li> <li><img src="https://www.jb51.net/images/4.jpg" /></li> </ul> </div> </body> </html>