技术教程 编程教程 特效合集（原生JS代码）适合初学者 正文

特效合集（原生JS代码）适合初学者

2023-02-14,,,,

1、返回顶部（完全兼容各个浏览器，不含美化）

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style type="text/css">

 #div1 {

     width:20px;

     height:100px;

     position:absolute;

     top:0;

     right:0;

     background:#f00;

 }

 </style>

 <script>

 //完全兼容所有浏览器

 var bSys=null;//标志用户滚动了滚动条

 var timer=null;

 window.onload=window.onresize=window.onscroll=function() {

     var oDiv=document.getElementById("div1");

     var sctop=document.body.scrollTop||document.documentElement.scrollTop;

     var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

     oDiv.style.top=sctop+t+'px';

     //检测用户滚动了滚动条

     if(!bSys) {

         clearInterval(timer);

     }

     bSys=false;

     oDiv.onclick=function() {

         timer=setInterval(function() {

                 var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;

                 var ispeed=Math.floor(-scrolltop/8);

                 if(scrolltop==0) {

                     clearInterval(timer);    //当scrolltop为0的时候，就停止这个定时器

                 }

                 bSys=true;

                 document.documentElement.scrollTop=document.body.scrollTop=scrolltop+ispeed;

         },30);

     };

 };

 </script>

 </head>

 <body>

 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

 <div id="div1">返回顶部</div>

 </body>

 </html>

2、返回顶部2（完全兼容各个浏览器，含美化+缓冲）

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>返回顶部+缓冲</title>

 <style>

 #div1{width:100px; height:50px; position:absolute; right:0px; top:0px;background:red;}

 span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;}

 //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

 </style>

 <script>

 window.onload=window.onscroll=window.onresize=function() {

     var oDiv=document.getElementById("div1");

     var sct=document.documentElement.scrollTop||document.body.scrollTop;

     var t=sct+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

     startMove(parseInt(t));  //scrolltop,ff/ie:document.documentElement   chrome:document.body获取

 };

 var timer=null;

 function startMove(iTarget) {

     var oDiv=document.getElementById("div1");

     var iSpeed=null;

     clearInterval(timer);

     timer=setInterval(function() {

         iSpeed=(iTarget-oDiv.offsetTop)/8;

         iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //变速改变速度

         if(oDiv.offsetTop==iTarget) {

             clearInterval(timer);

         }

         else {

             oDiv.style.top=oDiv.offsetTop+iSpeed+'px';

         }

     },30);

 }

 </script>

 </head>

 <body style="height:2000px;">

 </body>

 </html>

3、拖拽（完全兼容各个浏览器，不含美化）

 function drag() {

     var oDiv=document.getElementById('div1');

     var disX=disY=0;

     oDiv.onmousedown=function(ev) {

         var oEvent=ev||event;

         disX=oEvent.clientX-oDiv.offsetLeft;

         disY=oEvent.clientY-oDiv.offsetTop;//保存物体以鼠标单击瞬间时的位置

         document.onmousemove=function(ev) {

             var oEvent=ev||event;

             var l=oEvent.clientX-disX;

             var t=oEvent.clientY-disY;

             if(l<0)

                 l=0;

             else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)

                 l=document.documentElement.clientWidth-oDiv.offsetWidth;

             if(t<0)

                 t=0;

             else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)

                 t=document.documentElement.clientHeight-oDiv.offsetHeight;

             oDiv.style.left=l+'px';

             oDiv.style.top=t+'px';

         };

         document.onmouseup=function()　{

             document.onmousemove=document.onmouseup=null;

         };

         return false;//解决ff早期的bug发生

     };

 }

4、缓冲运动（//运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);）

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 #div1{width:100px; height:50px; position:absolute; left:700px; top:50px;background:red;}

 span{position: absolute; left:300px; top:0px;; display:inline-block; width:1px; height:200px; background:blue;}

 //运动缓冲：主要是在速度上，做了一个变速，利用：offsetLeft-iTarget/8

 </style>

 <script>

 window.onload=function() {

     var oDiv=document.getElementById("div1");

     var obt=document.getElementById("obt");

     var timer=null;

     var iSpeed=null;

     var iTarget=300;

     obt.onclick=function() {

         clearInterval(timer);

         timer=setInterval(function() {

             iSpeed=(iTarget-oDiv.offsetLeft)/8;

                 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

             if(oDiv.offsetLeft==iTarget) {

                 clearInterval(timer);

             }

             else {

                 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';

             }

         },30);

     };

 };

 </script>

 </head>

 <body>

 <input type="button" value="开始运动" id="obt"/>

 <div id="div1"></div>

 <span></span>

 </body>

 </html>

5、多个定时器共同进行

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 div{width:70px; height:30px; background:red; margin:20px; filter:alpha(opacity:30); opacity:0.3;}

 </style>

 <script>

 window.onload=function() {

     var divs=document.getElementsByTagName("div");

     for(var i=0; i<divs.length; i++) {

         divs[i].onmouseover=function() {startMove(this, 300);};

         divs[i].onmouseout=function() {startMove(this, 70);};

     }

 };

 //var timer=null; 此处用了一个共用的定时器timer

 function startMove(obj, iTarget) {

     var iSpeed=null;

     clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器）

     obj.timer=setInterval(function() {

         iSpeed=(iTarget-obj.offsetWidth)/8;

         iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);

         if(obj.offsetWidth==iTarget) {

             clearInterval(obj.timer);

         } else {

             obj.style.width=obj.offsetWidth+iSpeed+'px';

         }

     }, 30);

 }

 </script>

 </head>

 <body>

 <div id="div1"></div>

 <div id="div1"></div>

 <div id="div1"></div>

 <div id="div1"></div>

 <div id="div1"></div>

 </body>

 </html>

6、多个淡入淡出

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 div{width:100px; height:70px; background:red; margin:20px; filter:alpha(opacity:30); opacity:0.3;}

 </style>

 <script>

 //var alpha=30; //这个alpha不方便获取，这里采用变量存储,针对多个公用一个变量alpha，最好不要共用

 //取html中标签中的行内样式：style

 //取非行内样式：ff:getComputeStyle  ie:currentStyle

 //取所有样式的通用写法

 function getStyle(obj, attr) {

     if(obj.currentStyle)

         return obj.currentStyle[attr];

     else

         return obj.getComputeStyle(obj, false)[attr];

 }

 function startMove(obj, iTarget) {

     var iSpeed=null;

     clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器）

     obj.timer=setInterval(function() {

         iSpeed=(iTarget-obj.alpha)/8;

         iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);

         if(obj.alpha==iTarget) {

             clearInterval(obj.timer);

         } else {

             obj.alpha+=iSpeed;

             obj.style.filter='alpha(opacity:'+obj.alpha+')';

             obj.style.opacity=obj.alpha/100;

         }

     }, 30);

 }

 window.onload=function() {

     var divs=document.getElementsByTagName("div");

     for(var i=0; i<divs.length; i++) {

         divs[i].alpha=30;

         divs[i].onmouseover=function() {startMove(this, 100);};

         divs[i].onmouseout=function() {startMove(this, 30);};

     }

 };

 </script>

 </head>

 <body>

 <div></div>

 <div></div>

 <div></div>

 <div></div>

 </body>

 </html>

7、通用动画带渐变

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 div{width:100px; height:70px; background:red; margin:20px; filter:alpha(opacity=30); opacity:0.3;}

 </style>

 <script>

 //var alpha=30; //这个alpha不方便获取，这里采用变量存储,针对多个公用一个变量alpha，最好不要共用

 //取html中标签中的行内样式：style

 //取非行内样式：ff:getComputeStyle  ie:currentStyle--->替换offsetXXX之类的获取

 //，因为这个存在一个问题，当为自身块定义了border大小，减小，反而会以border指定大小增加XXX大小（offsetXXX包括xxx+padding+border）

 //取所有样式的通用写法

 function getStyle(obj, attr) {

     if(obj.currentStyle)

         return obj.currentStyle[attr];

     else

         return obj.getComputeStyle(obj, false)[attr];

 }

 function startMove(obj, attr, iTarget) {

     var iSpeed=null;

     clearInterval(obj.timer);//这里为每个对象，分配单独的timer（定时器）

     obj.timer=setInterval(function() {

         var iCur=null;

         if(attr=='opacity') {

             iCur=parseInt(100*parseFloat(getStyle(obj, attr)));

             //获得指定对象属性的值,小数很容易爆发问题存在，避免小数发生问题，这里采用抛出小数部分，parseInt

         } else {

             iCur=parseInt(getStyle(obj, attr));

             //取非行内样式：ff:getComputeStyle  ie:currentStyle--->替换offsetXXX之类的获取

             //，因为这个存在一个问题，当为自身块定义了border大小，减小，反而会以border指定大小增加XXX大小（offsetXXX包括xxx+padding+border）

             //取所有样式的通用写法

         }

         iSpeed=(iTarget-iCur)/8;

         iSpeed=iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);

         if(iCur==iTarget) {

             clearInterval(obj.timer);

         } else {

             if(attr=='opacity') {

                 obj.style[attr]=(iCur+iSpeed)/100;

                 obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';

                 document.getElementById('tct').value=obj.style[attr];

             } else {

                 obj.style[attr]=iCur+iSpeed+'px';

             }

         }

     }, 30);

 }

 window.onload=function() {

     var divs=document.getElementsByTagName("div");

     for(var i=0; i<divs.length; i++) {

         divs[i].alpha=30;

         divs[i].onmouseover=function() {startMove(this, 'opacity', 100);};

         divs[i].onmouseout=function() {startMove(this, 'opacity', 30);};

     }

 };

 </script>

 </head>

 <body>

 <input type="text" value="" id="tct"/>

 <div></div>

 <div></div>

 <div></div>

 <div></div>

 </body>

 </html>

8、FLASH的图片轮换效果 — 兼容性不是很好，存在一些bug，后期修复

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>仿FLASH的图片轮换效果 — 兼容性不是很好，存在一些bug，后期修复</title>

 <link rel="stylesheet" type="text/css" href="miao_style.css">

 <script src="../move.js"></script>

 <script>

 function getClass(oParent, sClass) {

     var aEle=oParent.getElementsByTagName('*');

     var aResult=[];

     for(var i=0; i<aEle.length; i++) {

         if(aEle[i].className==sClass){

             aResult.push(aEle[i]);

         }

     }

     return aResult;

 }

 window.onload=function() {

     var oDiv=document.getElementById('playimages');

     //左右按钮

     var oBtnPrev=getClass(oDiv, 'prev')[0];

     var oBtnNext=getClass(oDiv, 'next')[0];

     var oMarkLeft=getClass(oDiv, 'mark_left')[0];

     var oMarkRight=getClass(oDiv, 'mark_right')[0];

     //小图点击

     var oSmallUl=getClass(oDiv, 'small_pic')[0].getElementsByTagName('ul')[0];

     var aSmallLi=oSmallUl.getElementsByTagName('li');

     var oBigUl=getClass(oDiv, 'big_pic')[0];

     var aBigLi=oBigUl.getElementsByTagName('li');

     var iNow=0;

     var iMinZindex=2 ;

     oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){

         startMove(oBtnPrev, 'opacity', 100);

     };

     oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){

         startMove(oBtnPrev, 'opacity', 0);

     };

     oBtnNext.onmouseover=oMarkRight.onmouseover=function(){

         startMove(oBtnNext, 'opacity', 100);

     };

     oBtnNext.onmouseout=oMarkRight.onmouseout=function(){

         startMove(oBtnNext, 'opacity', 0);

     };

     oSmallUl.style.width=aSmallLi[0].offsetWidth*aSmallLi.length+'px';

     for(var i=0; i<aSmallLi.length; i++) {

         aSmallLi[i].index=i;

         aSmallLi[i].onmouseover=function(){

             startMove(this, 'opacity', 100);

         };

         aSmallLi[i].onmouseout=function(){

             if(this.index!=iNow) {

                 startMove(this, 'opacity', 60);

             }

         };        

         aSmallLi[i].onclick=function() {

             if(this.index==0) return;

             iNow=this.index;

             tab();

         };

         function tab() {

             for(var j=0; j<aSmallLi.length; j++) {

                 startMove(aSmallLi[j], 'opacity', 60);

             }

             startMove(aSmallLi[iNow], 'opacity', 100);

             aBigLi[iNow].style.zIndex=iMinZindex++;

             aBigLi[iNow].style.height=0+'px';

             //大图上下动

             startMove(aBigLi[iNow], 'height', oBigUl.offsetHeight);

             //小图左右动

             if(iNow==0) {

                 startMove(oSmallUl, 'left', 0);

             } else if(iNow==aSmallLi.length-1) {

                 startMove(oSmallUl, 'left', -(iNow-2)*aSmallLi[0].offsetWidth);

             } else {

                 startMove(oSmallUl, 'left', -(iNow-1)*aSmallLi[0].offsetWidth);

             }

         }

         //向前

         oBtnPrev.onclick=function() {

             iNow--;

             if(iNow==-1)

                 iNow=aSmallLi.length-1;

             tab();

         };

         //向后

         oBtnNext.onclick=function() {

             iNow++;

             if(iNow==aSmallLi.length)

                 iNow=0;

             tab();

         };

     }

 };

 </script>

 </head>

 <body>

 <div id="playimages" class="play">

     <ul class="big_pic">

         <div class="prev"></div>

         <div class="next"></div>

         <div class="text">加载图片说明……</div>

         <div class="length">计算图片数量……</div>

         <a class="mark_left" href="javascript:;"></a>

         <a class="mark_right" href="javascript:;"></a>

         <div class="bg"></div>

         <li style="z-index:1;"><img src="data:images/1.jpg" /></li>

         <li><img src="data:images/2.jpg" /></li>

         <li><img src="data:images/3.jpg" /></li>

         <li><img src="data:images/4.jpg" /></li>

         <li><img src="data:images/5.jpg" /></li>

         <li><img src="data:images/6.jpg" /></li>

     </ul>

     <div class="small_pic">

         <ul style="width:390px;">

             <li style="filter: 100; opacity: 1;"><img src="data:images/1.jpg" /></li>

             <li><img src="data:images/2.jpg" /></li>

             <li><img src="data:images/3.jpg" /></li>

             <li><img src="data:images/4.jpg" /></li>

             <li><img src="data:images/5.jpg" /></li>

             <li><img src="data:images/6.jpg" /></li>

         </ul>

     </div>

 </div>

 </body>

 </html>

特效合集（原生JS代码）适合初学者的相关教程结束。

《特效合集（原生JS代码）适合初学者.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!