特效合集(原生JS代码)适合初学者

时间:2022-09-20 16:59:59

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代码)适合初学者的更多相关文章

  1. CSS3悬停特效合集Hover&period;css

    CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.co ...

  2. 奇舞js笔记——第0课——如何写好原生js代码

    摘要 1.好的代码职责要清晰,javscript不要用来操作样式: 2.API要设计的合理:通用性,适度的抽象(数据抽象,过程抽象),可扩展性: 3.效率问题:用好的.合适的算法(前端程序员要把自己当 ...

  3. jsonp原生js代码示例

    /* mightygumball.js */ /* * get the content of a JSON file using JSONP * update every 3 seconds. * * ...

  4. AJAX原生JS代码

    var http_request = false;function send_request(method,url,content,responseType,callback){ http_reque ...

  5. 原生JS代码实现一个Ajax异步请求

    异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...

  6. 原生js代码挑战之动态添加双色球

    var ballArr = []; //存放已有的红球,用来排除重复和排序window.onload = function(){ var btn = document.createElement(&q ...

  7. 比sort&lpar;&rpar;性能更好的原生js代码实现数组从小到大排序

    nums = [1,2,4,1,34,6,-1,2] for(let i = nums.length - 1; i > 0; i--) { let maxIdx = i; for(let j = ...

  8. 原生JS代码实现随机产生一个16进制的颜色值

    封装一个函数 function getColor() { var str = "#"; //一个十六进制的值的数组 var arr = ["0", " ...

  9. 利用tween,使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

随机推荐

  1. 修改navigationbar右侧按钮离屏幕边缘位置

    先上代码 UIButton *settingBtn = [Utils creatCustomButtonWithFrame:CGRectMake(, , , ) btnTitle: titleColo ...

  2. 【原创】利用Windows系统日志统计员工每天上下班考勤时间

    利用Windows系统日志统计员工每天上下班考勤时间(命令行参数为统计月份): using System; using System.Collections.Generic; using System ...

  3. LeetCode 34&period; Search for a Range (找到一个范围)

    Given an array of integers sorted in ascending order, find the starting and ending position of a giv ...

  4. &lbrack;bzoj1488&rsqb;&lbrack;HNOI2009&rsqb;图的同构——Polya定理

    题目大意 求两两互不同构的含n个点的简单图有多少种. 简单图是关联一对顶点的无向边不多于一条的不含自环的图. a图与b图被认为是同构的是指a图的顶点经过一定的重新标号以后,a图的顶点集和边集能完全与b ...

  5. CVE-2019-0686&vert;Microsoft Exchange特权提升漏洞补丁已发布

    Microsoft Exchange Server中存在一个特权提升漏洞.成功利用此漏洞的攻击者可以获得与Exchange服务器的任何其他用户相同的权限.这可能允许攻击者执行诸如访问其他用户的邮箱之类 ...

  6. jvm启动参数设置 -Dfile&period;encoding&equals;UTF-8 解决freemark乱码

    今天一个spring boot应用windows跑起来后页面显示乱码,加上jvm启动参数为utf-8后,页面显示正常.

  7. Google的java工具类Guava

    前言 google开发java项目肯定也不想重复造*,所以肯定也有工具类,就是它了:Guava 我将举例几个实际的例子,发挥这个工具类好用的功能.更多的方法和功能,还有内部的实现可以直接参考http ...

  8. Mysql系列四:数据库分库分表基础理论

    一.数据处理分类 1. 海量数据处理,按照使用场景主要分为两种类型: 联机事务处理(OLTP) 面向交易的处理系统,其基本特征是原始数据可以立即传送到计算机中心进行处理,并在很短的时间内给出处理结果. ...

  9. search的 制作

    <meta charset="utf-8">  <title>search的制作</title> <style type="te ...

  10. 以python代码解释fork系统调用

    import os print('Process (%s) start...' % os.getpid()) # Only works on Unix/Linux/Mac: pid = os.fork ...