特效合集（原生JS代码）适合初学者
1、返回顶部（完全兼容各个浏览器，不含美化）
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 #div1 { 8 width:20px; 9 height:100px; 10 position:absolute; 11 top:0; 12 right:0; 13 background:#f00; 14 } 15 </style> 16 17 <script> 18 //完全兼容所有浏览器 19 var bSys=null;//标志用户滚动了滚动条 20 var timer=null; 21 window.onload=window.onresize=window.onscroll=function() { 22 var oDiv=document.getElementById("div1"); 23 var sctop=document.body.scrollTop||document.documentElement.scrollTop; 24 var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2; 25 oDiv.style.top=sctop+t+'px'; 26 //检测用户滚动了滚动条 27 if(!bSys) { 28 clearInterval(timer); 29 } 30 bSys=false; 31 32 oDiv.onclick=function() { 33 timer=setInterval(function() { 34 var scrolltop=document.body.scrollTop||document.documentElement.scrollTop; 35 var ispeed=Math.floor(-scrolltop/8); 36 if(scrolltop==0) { 37 clearInterval(timer); //当scrolltop为0的时候，就停止这个定时器 38 } 39 bSys=true; 40 document.documentElement.scrollTop=document.body.scrollTop=scrolltop+ispeed; 41 },30); 42 }; 43 }; 44 </script> 45 </head> 46 47 <body> 48 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br> 49 <div id="div1">返回顶部</div> 50 </body> 51 </html>
2、返回顶部2（完全兼容各个浏览器，含美化+缓冲）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>返回顶部+缓冲</title> 6 <style> 7 #div1{width:100px; height:50px; position:absolute; right:0px; top:0px;background:red;} 8 span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;} 9 //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 10 </style> 11 <script> 12 13 window.onload=window.onscroll=window.onresize=function() { 14 var oDiv=document.getElementById("div1"); 15 var sct=document.documentElement.scrollTop||document.body.scrollTop; 16 var t=sct+(document.documentElement.clientHeight-oDiv.offsetHeight)/2; 17 startMove(parseInt(t)); //scrolltop,ff/ie:document.documentElement chrome:document.body获取 18 }; 19 20 21 var timer=null; 22 function startMove(iTarget) { 23 var oDiv=document.getElementById("div1"); 24 var iSpeed=null; 25 clearInterval(timer); 26 timer=setInterval(function() { 27 iSpeed=(iTarget-oDiv.offsetTop)/8; 28 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //变速改变速度 29 if(oDiv.offsetTop==iTarget) { 30 clearInterval(timer); 31 } 32 else { 33 oDiv.style.top=oDiv.offsetTop+iSpeed+'px'; 34 } 35 },30); 36 } 37 </script> 38 </head> 39 <body style="height:2000px;"> 40 </body> 41 </html>
3、拖拽（完全兼容各个浏览器，不含美化）
1 function drag() { 2 var oDiv=document.getElementById('div1'); 3 var disX=disY=0; 4 oDiv.onmousedown=function(ev) { 5 var oEvent=ev||event; 6 disX=oEvent.clientX-oDiv.offsetLeft; 7 disY=oEvent.clientY-oDiv.offsetTop;//保存物体以鼠标单击瞬间时的位置 8 9 document.onmousemove=function(ev) { 10 var oEvent=ev||event; 11 var l=oEvent.clientX-disX; 12 var t=oEvent.clientY-disY; 13 if(l<0) 14 l=0; 15 else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) 16 l=document.documentElement.clientWidth-oDiv.offsetWidth; 17 if(t<0) 18 t=0; 19 else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) 20 t=document.documentElement.clientHeight-oDiv.offsetHeight; 21 oDiv.style.left=l+'px'; 22 oDiv.style.top=t+'px'; 23 }; 24 25 document.onmouseup=function() { 26 document.onmousemove=document.onmouseup=null; 27 }; 28 return false;//解决ff早期的bug发生 29 }; 30 31 32 }
4、缓冲运动（//运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{width:100px; height:50px; position:absolute; left:700px; top:50px;background:red;} 8 span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;} 9 //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8 10 </style> 11 <script> 12 window.onload=function() { 13 var oDiv=document.getElementById("div1"); 14 var obt=document.getElementById("obt"); 15 var timer=null; 16 var iSpeed=null; 17 var iTarget=300; 18 obt.onclick=function() { 19 clearInterval(timer); 20 21 timer=setInterval(function() { 22 iSpeed=(iTarget-oDiv.offsetLeft)/8; 23 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 24 if(oDiv.offsetLeft==iTarget) { 25 clearInterval(timer); 26 } 27 else { 28 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 29 } 30 },30); 31 }; 32 }; 33 </script> 34 </head> 35 36 <body> 37 <input type="button" value="开始运动" id="obt"/> 38 <div id="div1"></div> 39 <span></span> 40 </body> 41 </html>
5、多个定时器共同进行
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div{width:70px; height:30px; background:red; margin:20px; filter:alpha(opacity:30); opacity:0.3;} 8 </style> 9 <script> 10 window.onload=function() { 11 var divs=document.getElementsByTagName("div"); 12 for(var i=0; i<divs.length; i++) { 13 divs[i].onmouseover=function() {startMove(this, 300);}; 14 divs[i].onmouseout=function() {startMove(this, 70);}; 15 } 16 }; 17 //var timer=null; 此处用了一个共用的定时器timer 18 function startMove(obj, iTarget) { 19 var iSpeed=null; 20 clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器） 21 obj.timer=setInterval(function() { 22 iSpeed=(iTarget-obj.offsetWidth)/8; 23 iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed); 24 if(obj.offsetWidth==iTarget) { 25 clearInterval(obj.timer); 26 } else { 27 obj.style.width=obj.offsetWidth+iSpeed+'px'; 28 } 29 }, 30); 30 } 31 32 </script> 33 </head> 34 35 <body> 36 <div id="div1"></div> 37 <div id="div1"></div> 38 <div id="div1"></div> 39 <div id="div1"></div> 40 <div id="div1"></div> 41 </body> 42 </html>
6、多个淡入淡出
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div{width:100px; height:70px; background:red; margin:20px; filter:alpha(opacity:30); opacity:0.3;} 8 </style> 9 10 <script> 11 //var alpha=30; //这个alpha不方便获取，这里采用变量存储,针对多个公用一个变量alpha，最好不要共用 12 //取html中标签中的行内样式：style 13 //取非行内样式：ff:getComputeStyle ie:currentStyle 14 //取所有样式的通用写法 15 function getStyle(obj, attr) { 16 if(obj.currentStyle) 17 return obj.currentStyle[attr]; 18 else 19 return obj.getComputeStyle(obj, false)[attr]; 20 } 21 22 function startMove(obj, iTarget) { 23 var iSpeed=null; 24 clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器） 25 obj.timer=setInterval(function() { 26 iSpeed=(iTarget-obj.alpha)/8; 27 iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed); 28 if(obj.alpha==iTarget) { 29 clearInterval(obj.timer); 30 } else { 31 obj.alpha+=iSpeed; 32 obj.style.filter='alpha(opacity:'+obj.alpha+')'; 33 obj.style.opacity=obj.alpha/100; 34 } 35 }, 30); 36 } 37 38 window.onload=function() { 39 var divs=document.getElementsByTagName("div"); 40 for(var i=0; i<divs.length; i++) { 41 divs[i].alpha=30; 42 divs[i].onmouseover=function() {startMove(this, 100);}; 43 divs[i].onmouseout=function() {startMove(this, 30);}; 44 } 45 }; 46 47 48 </script> 49 </head> 50 51 <body> 52 <div></div> 53 <div></div> 54 <div></div> 55 <div></div> 56 57 </body> 58 </html>
7、通用动画带渐变
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div{width:100px; height:70px; background:red; margin:20px; filter:alpha(opacity=30); opacity:0.3;} 8 </style> 9 10 <script> 11 //var alpha=30; //这个alpha不方便获取，这里采用变量存储,针对多个公用一个变量alpha，最好不要共用 12 //取html中标签中的行内样式：style 13 //取非行内样式：ff:getComputeStyle ie:currentStyle--->替换offsetXXX之类的获取 14 //，因为这个存在一个问题，当为自身块定义了border大小，减小，反而会以border指定大小增加XXX大小（offsetXXX包括xxx+padding+border） 15 //取所有样式的通用写法 16 function getStyle(obj, attr) { 17 if(obj.currentStyle) 18 return obj.currentStyle[attr]; 19 else 20 return obj.getComputeStyle(obj, false)[attr]; 21 } 22 23 function startMove(obj, attr, iTarget) { 24 var iSpeed=null; 25 clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器） 26 obj.timer=setInterval(function() { 27 var iCur=null; 28 if(attr=='opacity') { 29 iCur=parseInt(100*parseFloat(getStyle(obj, attr))); 30 //获得指定对象属性的值,小数很容易爆发问题存在，避免小数发生问题，这里采用抛出小数部分，parseInt 31 } else { 32 iCur=parseInt(getStyle(obj, attr)); 33 //取非行内样式：ff:getComputeStyle ie:currentStyle--->替换offsetXXX之类的获取 34 //，因为这个存在一个问题，当为自身块定义了border大小，减小，反而会以border指定大小增加XXX大小（offsetXXX包括xxx+padding+border） 35 //取所有样式的通用写法 36 } 37 iSpeed=(iTarget-iCur)/8; 38 iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed); 39 if(iCur==iTarget) { 40 clearInterval(obj.timer); 41 } else { 42 if(attr=='opacity') { 43 obj.style[attr]=(iCur+iSpeed)/100; 44 obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; 45 document.getElementById('tct').value=obj.style[attr]; 46 } else { 47 obj.style[attr]=iCur+iSpeed+'px'; 48 } 49 } 50 }, 30); 51 } 52 53 window.onload=function() { 54 var divs=document.getElementsByTagName("div"); 55 for(var i=0; i<divs.length; i++) { 56 divs[i].alpha=30; 57 divs[i].onmouseover=function() {startMove(this, 'opacity', 100);}; 58 divs[i].onmouseout=function() {startMove(this, 'opacity', 30);}; 59 } 60 }; 61 </script> 62 </head> 63 64 <body> 65 <input type="text" value="" id="tct"/> 66 <div></div> 67 <div></div> 68 <div></div> 69 <div></div> 70 71 </body> 72 </html>
8、FLASH的图片轮换效果 — 兼容性不是很好，存在一些bug，后期修复
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>仿FLASH的图片轮换效果 — 兼容性不是很好，存在一些bug，后期修复</title> 6 <link rel="stylesheet" type="text/css" href="miao_style.css"> 7 <script src="../move.js"></script> 8 <script> 9 function getClass(oParent, sClass) { 10 var aEle=oParent.getElementsByTagName('*'); 11 var aResult=[]; 12 for(var i=0; i<aEle.length; i++) { 13 if(aEle[i].className==sClass){ 14 aResult.push(aEle[i]); 15 } 16 } 17 return aResult; 18 } 19 20 window.onload=function() { 21 var oDiv=document.getElementById('playimages'); 22 //左右按钮 23 var oBtnPrev=getClass(oDiv, 'prev')[0]; 24 var oBtnNext=getClass(oDiv, 'next')[0]; 25 var oMarkLeft=getClass(oDiv, 'mark_left')[0]; 26 var oMarkRight=getClass(oDiv, 'mark_right')[0]; 27 //小图点击 28 var oSmallUl=getClass(oDiv, 'small_pic')[0].getElementsByTagName('ul')[0]; 29 var aSmallLi=oSmallUl.getElementsByTagName('li'); 30 var oBigUl=getClass(oDiv, 'big_pic')[0]; 31 var aBigLi=oBigUl.getElementsByTagName('li'); 32 var iNow=0; 33 var iMinZindex=2 ; 34 oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){ 35 startMove(oBtnPrev, 'opacity', 100); 36 }; 37 38 oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){ 39 startMove(oBtnPrev, 'opacity', 0); 40 }; 41 42 oBtnNext.onmouseover=oMarkRight.onmouseover=function(){ 43 startMove(oBtnNext, 'opacity', 100); 44 }; 45 46 oBtnNext.onmouseout=oMarkRight.onmouseout=function(){ 47 startMove(oBtnNext, 'opacity', 0); 48 }; 49 oSmallUl.style.width=aSmallLi[0].offsetWidth*aSmallLi.length+'px'; 50 for(var i=0; i<aSmallLi.length; i++) { 51 aSmallLi[i].index=i; 52 aSmallLi[i].onmouseover=function(){ 53 startMove(this, 'opacity', 100); 54 }; 55 56 aSmallLi[i].onmouseout=function(){ 57 if(this.index!=iNow) { 58 startMove(this, 'opacity', 60); 59 } 60 }; 61 62 aSmallLi[i].onclick=function() { 63 64 if(this.index==0) return; 65 iNow=this.index; 66 tab(); 67 }; 68 69 function tab() { 70 for(var j=0; j<aSmallLi.length; j++) { 71 startMove(aSmallLi[j], 'opacity', 60); 72 } 73 startMove(aSmallLi[iNow], 'opacity', 100); 74 aBigLi[iNow].style.zIndex=iMinZindex++; 75 aBigLi[iNow].style.height=0+'px'; 76 //大图上下动 77 startMove(aBigLi[iNow], 'height', oBigUl.offsetHeight); 78 //小图左右动 79 if(iNow==0) { 80 startMove(oSmallUl, 'left', 0); 81 } else if(iNow==aSmallLi.length-1) { 82 startMove(oSmallUl, 'left', -(iNow-2)*aSmallLi[0].offsetWidth); 83 } else { 84 startMove(oSmallUl, 'left', -(iNow-1)*aSmallLi[0].offsetWidth); 85 } 86 } 87 88 89 //向前 90 oBtnPrev.onclick=function() { 91 iNow--; 92 if(iNow==-1) 93 iNow=aSmallLi.length-1; 94 tab(); 95 }; 96 //向后 97 oBtnNext.onclick=function() { 98 iNow++; 99 if(iNow==aSmallLi.length) 100 iNow=0; 101 tab(); 102 }; 103 } 104 105 }; 106 </script> 107 </head> 108 109 <body> 110 <div id="playimages" class="play"> 111 <ul class="big_pic"> 112 <div class="prev"></div> 113 <div class="next"></div> 114 115 <div class="text">加载图片说明……</div> 116 <div class="length">计算图片数量……</div> 117 118 <a class="mark_left" href="javascript:;"></a> 119 <a class="mark_right" href="javascript:;"></a> 120 <div class="bg"></div> 121 122 <li style="z-index:1;"><img src="images/1.jpg" /></li> 123 <li><img src="images/2.jpg" /></li> 124 <li><img src="images/3.jpg" /></li> 125 <li><img src="images/4.jpg" /></li> 126 <li><img src="images/5.jpg" /></li> 127 <li><img src="images/6.jpg" /></li> 128 </ul> 129 <div class="small_pic"> 130 <ul style="width:390px;"> 131 <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li> 132 <li><img src="images/2.jpg" /></li> 133 <li><img src="images/3.jpg" /></li> 134 <li><img src="images/4.jpg" /></li> 135 <li><img src="images/5.jpg" /></li> 136 <li><img src="images/6.jpg" /></li> 137 </ul> 138 </div> 139 </div> 140 141 </body> 142 </html>